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, with 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. A launch-telemetry HUD sits over the footage, with a mission clock, an altitude readout, and chapter markers. 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 working canvas scrub engine in one page, with frame windowing, a lerped playhead, and a jank budget
- 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. 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
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, free on its own page, with the interview, art direction, and chaining method behind the film
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 flight lands |
| Flight systems | The build, explained on the page itself |
| Closing CTA | Turn the wonder into a conversation |
Design and branding system
The art direction is a storybook told with launch-pad seriousness, and that tension is what makes it charming.
- A dawn palette of moonlit navy warming to saffron and gold. The film carries it, and the page chrome stays 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 instead of 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 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 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 with a per-frame budget, and the build ships only when the scrub passes
- There’s no prompt product for this template. The method behind it is the free Scroll-Film Studio skill
- 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 instead of a video element. Around three hundred pre-extracted frames are sampled through a sliding window and lerped against the scroll position, which keeps the motion smooth in both directions and at any scroll speed. The page was built and checked with a jank test 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 that’s 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, exactly as the template renders.
