Hero Studio
Animated WebGPU backgrounds from your brand colours. Northlight Studio is a made-up brand for the preview.
Starting the renderer
Northlight Studio
Northlight Studio
Rooms planned around the light you have
Calm, bright interiors for small homes and studios.
Book a home visitStarting the live preview
Lab demo
What this demonstrates
Bespoke motion design for a brand’s hero section, generated live in the browser.
- Animated backgrounds written in TSL, the three.js shading language, so one source runs on WebGPU and on WebGL 2
- Four motion styles that follow the brand colours, speed, scale and grain as you change them
- Hero text that stays readable: a WCAG contrast check picks the text colour and how strong a scrim it needs
- Pauses off-screen, holds a still frame for reduced motion, and falls back to a CSS gradient without a GPU
- Settings copy out as JSON, so a chosen look can be rebuilt exactly
WebGPUTSL shadersMotionBranding
Want something like this?
Everything in the Lab is hand-built — and a real version for your business starts with a free, no-obligation 20-minute call.
Hero Studio — a Lab demo, not a real business