Nightjar: Real-Time Motion Identity in WebGL2
Sulman Cheema
Studio R&D, motion identity. The open-air film season is our own invention. The sky engine, the identity and the six films are real, and they run live in the browser.
Brief
You only see a nightjar when it moves, and you hear it before you see it. A logo animated after the fact would miss that. We built the identity out of motion, light and sound from the start, and it still had to behave for visitors who switch motion or sound off.
Architecture and design system
A WebGL2 fragment shader renders the evening sky from the sun's depression below the horizon, read from a colour lookup texture, with layered heightfield silhouettes for the treeline and the city. Scroll position is the time of evening, so the page runs from sunset to full dark as you read.
The mark is a set of poses (horizon, churr, clap, flight) rather than one drawing. Each pose is reached on a damped spring defined by its damping ratio and frequency, so a wing settles with a measured overshoot instead of a stock ease.
The palette was sampled from the sky model and built into one system that the films, the type and the 18-page identity book share.
The sonic logo is synthesised in the browser with the Web Audio API and stays silent until the visitor asks for it.
Motion and visual delivery
The mark can be pressed, dragged and held. The type answers to wingspan and light sliders, and six short films, rendered live with WebGL2 and Canvas, show the identity in use. Keyboard control runs throughout, and the motion toggle works in both directions.
Impact
A mark with interactive states, six films and a sonic logo, shipped as one HTML file plus an 18-page identity book.
A page that moves from sunset to full dark as you scroll.
Measured on the published build (Chromium 141, axe-core 4.13, Lighthouse 12.8 desktop preset, October 2026):
0 axe violations against WCAG 2.2 AA at 1440 px and at 390 px.
Lighthouse 100 for accessibility, best practices and SEO.
0 third-party requests. The sky engine, 15 hand-written GLSL ES 3.00 shaders, the fonts and the six films live in one 1.35 MB file, 715 KB gzipped.
0 JavaScript errors with WebGL disabled or reduced motion on; the page falls back and keeps all of its text.
48 keyboard focus stops, and an 18-page identity book PDF that embeds every font it uses.
Live build: https://studio-helpers.com/work/nightjar/
Brief the studio: studio-helpers.com · WhatsApp +92 346 6616118 · Sulmancheema82@gmail.com
Like this project
Posted Oct 2, 2026
Studio R&D in motion identity. A WebGL2 sky that darkens as you scroll, a mark built as spring-driven states, six live-rendered films and a Web Audio sonic logo, in one file with 15 hand-written GLSL shaders.
