Quick summary
OLD LIGHT is a data film about the fact that nothing you see is happening now. Light has a speed limit, so every image arrives late: the moon by 1.28 seconds, sunrise by eight minutes, and the nearest star by four years. The piece makes that argument with its own running time instead of narration. When the light pulse crosses from Earth to the Moon, the shot lasts exactly 1.282 real seconds against a live counter, and that’s the only linear move in the whole film. Everything else is hand-eased.
Who this template is for
This is a brand moment, built for the times a company needs thirty seconds of attention, not a scroll.
- Brands needing a launch open, conference title card, showreel bumper, or campaign teaser
- Companies with a single idea worth stating cinematically rather than explaining in paragraphs
- Studios needing a reference for choreographed motion built without a video file
What problem this template solves
Most site templates look fine in a screenshot and fall apart in production. You get interchangeable sections, stock imagery, and nothing that proves craft.
- Template marketplaces sell the same layouts to thousands of buyers, so nothing ends up feeling owned
- Buyers can usually preview a design but almost never see the exact instructions that produced it
- Teams need reference builds that survive contact with real content rather than lorem-ipsum mock-ups
What you get with this template
You get a twenty-nine-second title film that plays on load, builds through six movements, and holds on its final frame. The browser renders it live.
- Six movements on one master timeline, with two match cuts carrying the edit
- Four stacked layers: a WebGL shader, canvas diagrams, live variable-font typography, and a grain and scanline pass
- A soundtrack synthesised through WebAudio, so the film ships with no audio file
Page sections overview
| Section | Purpose |
|---|---|
| Master timeline choreography | Drive every layer from one timeline so the edit stays locked |
| WebGL starfield and warp | Render the starfield, nebula, and hyper-warp as a fragment shader |
| Live variable-font typography | Animate the real axes of a variable font |
| Two match cuts | Carry the edit on two visual rhymes |
| Real-time duration argument | Make each shot last exactly as long as the light it depicts takes to travel |
| Synthesised score | Generate the entire soundtrack in WebAudio at runtime |
Design and branding system
The identity is deep-space instrumentation: near-black ground, a single cold accent, and a grain and scanline pass that gives rendered output a filmed quality.
- A near-black ground with one cold accent, so the light pulse is the only bright object and reads as the subject
- Grain, scanline, and vignette applied over the whole stack, which stops live rendering from looking clinical
- Variable-font display type animating real axes, treated as a moving object in the scene rather than a caption on top of it
Mobile and speed optimization
The build is desktop-first where the cinematic moments live, with a deliberate responsive pass so nothing breaks in a pocket.
- The layout reflows to a single column on small screens, with type scales tuned by hand
- Heavy media loads late or swaps to stills on slow connections, so the first paint stays fast
- Anything that depends on hover has a touch equivalent, so no content is stranded on a phone
How this template helps you convert
The page earns attention before it asks for anything. The OGtraplord homepage runs on the same logic.
- The strongest visual moment loads first, so visitors like what they see before they read a word
- Every section answers one question and hands off to the next, which keeps the scroll moving toward the call to action
- The ask arrives only after the proof: by the time visitors reach it, the work has already made the argument
Other information about this template
A few notes on this build.
- It runs twenty-nine and a half seconds, plays on load, and holds on its final frame rather than looping
- It needs WebGL and audio autoplay permission; without sound, the visual argument still holds
- Subject, palette, type, and beat map are all rebuilt around your story; the four-layer machinery carries over
- The whole film is a single self-contained file with no build step and no media downloads
How it works
One master timeline drives four stacked layers: a WebGL fragment shader for the starfield, nebula, and hyper-warp; a canvas layer for the diagrams, light pulse, and particles; live DOM typography animating real variable-font axes; and a grain, scanline, and vignette pass over the top. Two match cuts carry the edit. A sentence is crushed into a single point of light that becomes the Earth, and Proxima Centauri travels into the full stop of the closing line. The whole score (sub hits, noise sweeps, risers, pads, and a drone) is synthesised in the browser and scheduled off the same timeline at 96 bpm, so the cuts land on the beat. There’s no video, no audio files, and no build step. It’s one HTML file.
Where it fits
It fits anywhere a brand needs a moment instead of a page: a product launch open, a conference title card, a showreel bumper, or a campaign teaser. The subject, palette, type, and beat map all get rebuilt around your story. The machinery underneath carries over.
Screenshots
Captured from the live build, section by section, exactly as the template renders.
