Quick summary
FIRST LIGHT is a scroll-film site: the entire page is one continuous 25-second shot of the chubby OGtraplord mascot rocket launching from a storybook meadow at dawn, and scrolling is what plays it. The film was AI-generated shot by shot, each clip starting from the literal last frame of the one before it, so the launch reads as a single unbroken camera move from moonlit grass to orbital sunrise. Over the footage sits a launch-telemetry HUD — mission clock, altitude readout, chapter markers — and below the film the page lands on a paper mission manifest, the studio's flight log.
Who this template is for
A finished scroll-film site to study, and the reference build for the free Scroll-Film Studio skill.
- Brands that want an Apple-style cinematic scroll moment without licensing footage — the film here was generated, not shot
- Developers who want to read a real canvas scrub engine — frame windowing, lerped playhead, jank budget — in one page
- Anyone evaluating the Scroll-Film Studio skill who wants to see exactly what its Lane B footage pipeline produces
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
The template is the complete shipped site, and the method that produced it is a free download.
- The full scroll-film page: canvas scrub engine, telemetry HUD, chapter system, manifest and CTA, as static files
- A five-shot AI-generated film whose junctions were each verified with structural-similarity gates before shipping
- The Scroll-Film Studio skill — the interview, art direction and chaining method behind it — free on its own page
Page sections overview
| Section | Purpose |
|---|---|
| Mission Loader | Cover the frame preload with the mission brand |
| The Launch Film | One continuous 25-second shot, played by scrolling |
| Telemetry HUD | Mission clock, altitude and status over the footage |
| Chapter Markers | Five beats from T-MINUS to FIRST LIGHT |
| Mission Manifest | The paper section where the journey lands |
| Flight Systems | The build, explained on the page itself |
| Closing CTA | Turn the wonder into a conversation |
Design & branding system
The art direction is a storybook told with launch-pad seriousness, which is exactly the tension that makes it charming.
- A dawn palette — moonlit navy warming to saffron and gold — that the film itself carries, with the page chrome staying out of its way
- Instrument Serif display type over Inter, with a mono face reserved for the telemetry so the HUD reads as an instrument rather than a caption
- The mascot rocket kept deliberately chubby and toy-like in every shot, because the warmth is the brand and realism would cost 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 details worth knowing before you build on it.
- The film is roughly three hundred JPEG frames streamed through a sliding window, so memory stays flat even on long scrubs
- Scroll behaviour was tuned against a jank-test harness with a per-frame budget, and the build ships only when the scrub passes
- There is no prompt product for this template — the method behind it is the free Scroll-Film Studio skill instead
- Everything is static files: no framework, no build step, and nothing to host beyond a folder
How it works
The film is scrubbed on a canvas, not a video element — around three hundred pre-extracted frames are sampled through a sliding window and lerped against the scroll position, which is what keeps the motion smooth in both directions and at any scroll speed. The page was built and verified with a jank-test harness so the scrub holds up on slower machines, and the whole build ships as static files.
On its production
FIRST LIGHT was built with the Scroll-Film Studio skill — the same interview, art-direction and shot-chaining method available as a free download on this site. Every seam in the film passed a structural-similarity gate before it shipped, which is why the rocket never doubles or drifts between shots.
Screenshots
Captured from the live build, section by section. This is the template as it actually renders, not a mock-up.
