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, the nearest star by four years. The piece makes that argument with its own running time rather than with 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 is the only linear move in the whole film. Everything else is hand-eased.
Who this template is for
A brand moment rather than a page. It is for the times when 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 — 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 — rendered live in the browser rather than played back.
- Six movements on one master timeline, with two match cuts carrying the edit
- Four stacked layers — 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 real font axes rather than faking weight changes |
| Two Match Cuts | Carry the edit on two visual rhymes rather than transitions |
| 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 & 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 is what stops live rendering 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 & speed optimization
The build is desktop-first where the cinematic moments live, with a deliberate responsive pass so nothing breaks in a pocket.
- Layout reflows to a single column on small screens with type scales tuned by hand rather than left to chance
- Heavy media is deferred or swapped for stills on constrained connections so first paint stays fast
- Hover-dependent interactions carry touch-friendly equivalents, so no content is stranded on mobile
How this template helps you convert
The page earns attention before it asks for anything — the same conversion logic the OGtraplord homepage runs on.
- The strongest visual moment loads first, so a visitor forms a positive impression before reading a word
- Every section answers one question and hands off to the next, keeping scroll momentum toward the call to action
- The ask arrives only after the proof — by the time a visitor reaches 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. No video, no audio files, no build step: one HTML file.
Where it fits
Anywhere a brand needs a moment instead of a page — a product launch open, a conference title card, a showreel bumper, a campaign teaser. The subject, palette, type and beat map all get rebuilt around your story; the machinery underneath is what carries over.
Screenshots
Captured from the live build, section by section. This is the template as it actually renders, not a mock-up.
