Quick summary
Scroll Craft builds scroll-driven interactive landing pages for any business: a service company, a physical product, a food or drink brand, or a studio. Scroll becomes the timeline. Video scrubs frame by frame under the wheel, sections pin while their content advances, rails pan sideways, and the page ground changes colour as the visitor travels. It’s a method rather than a template. Every build starts from an interview and commits to one of eight mutually exclusive page grammars, including filmic one-shot, typographic poster, and split stage.
What keeps the output from repeating itself is the fingerprint gate. Each new build must differ from every previous one on at least four of six structural dimensions (grammar, nav treatment, hero device, act sequence, close pattern, and signature move), so two builds from this skill never share a skeleton. This is OGtraplord’s maintained fork of Nate Herk’s scrollcraft (MIT), extended with field notes from production builds and two verification-harness patches that upstream lacks.
Who this skill is for
This is for anyone who wants the Apple-style scroll experience without their page coming out looking like everyone else’s.
- Brands and studios that want a landing page that feels like an experience rather than a document
- Builders who keep producing scroll sites that all share one skeleton. The grammar system and the uniqueness gate exist for exactly this
- Developers who want the whole discipline (scrub engine, act cues, and verification harness) as a rerunnable method instead of a one-off build
What problem this skill solves
Scroll-driven pages fail in predictable ways, and the skill is engineered around each one.
- Most scrollytelling sites are the same site: a hero video, three pinned sections, and a fade. The eight-grammar system and the fingerprint gate make that convergence impossible
- Scroll effects that were never verified ship broken, with dead scroll ranges, clips that freeze, and cues that never fire. Here a harness scrolls the finished page itself and screenshots every act
- Per-frame animation done wrong makes the page paint-bound. The fork’s field notes encode the transform-only rules that keep the scrub smooth on modest hardware
What you get with this skill
The download is the entire method: the engine, scripts, references, and the lessons production already paid for.
- The full build process as one runnable skill: interview, brief, grammar selection, uniqueness gate, asset plan, build, and verify
- The scrollcraft engine (scrub, pin, cues, and act sequencing), plus a verification harness that serves the build, drives its scroll, and reports dead zones, frozen clips, contrast fails, and slow captures
- references/field-notes.md, with the production gotchas this fork adds: transform-only motion on fixed layers, the cue contract, mobile zone-crossing budgets, and 30fps re-encode recipes
- The fork’s two harness patches: a static server that honors HTTP Range so real-phone QA over LAN works, and a slow-capture diagnostic that names paint-bound acts instead of hiding them as flake
Steps overview
| Step | What happens |
|---|---|
| Interview | Learn the brand before designing anything |
| Brief and grammar | Commit to one page grammar and a signature move |
| Uniqueness gate | Prove the build is structurally new |
| Assets and build | Semantic HTML on a design-system floor |
| Verify | The page proves itself before it ships |
Design and branding system
The skill treats structure as the brand decision instead of a demo to reskin.
- Every build gets its own palette, type system, and copy voice from the interview. There’s no house look being recycled
- The page grammar is chosen to fit the story being told, and the whole page obeys it. A typographic poster never sprouts a film hero
- Each build gets one signature move, a single interaction the page is remembered by, and it’s designed in from the start instead of bolted on
- A design-system floor keeps rhythm, spacing, and contrast in line underneath all the motion
Output and performance budget
The deliverable is a static page whose motion cost is engineered up front instead of discovered later.
- Per-frame motion on fixed layers is transform-only. The field notes encode the wrapper and counter-translate patterns that keep captures fast
- Scrub media is re-encoded to the ceiling that matters: 30fps and dense keyframes. The notes document a real-world drop from 23MB to 7MB
- There’s no framework and no build step. The deliverable is a folder of static files plus the two engine files
- The verification harness reports any capture over five seconds as a page defect, with the act named
How this skill pays off
This exists because scroll is the one interaction every visitor already knows how to perform. And what makes these pages land is uniqueness more than motion.
- The visitor’s own scroll is the play button, so the experience starts without asking for a click
- The grammar system means a second and third build for different clients stay structurally distinct, and the gate proves it instead of hoping
- The output is yours outright: static files, with no platform and nothing to renew
Other information about this skill
A few things worth knowing before you download it.
- This is a maintained fork of scrollcraft by Nate Herk, under the MIT licence with the original notice preserved. The engine is untouched. The fork adds production field notes and two harness patches
- Both reference builds were built from owned assets on zero generation credits: TONNAGE, a variable-font type-specimen press, and THE WORK, a split-stage homepage argument
- AI footage is optional: kie.ai is wired in for photoreal worlds, but a grammar like the typographic poster needs nothing but fonts
- The skill runs in your own Claude Code session: your brand, your footage, and your keys never touch anyone else’s account
Output examples
Both reference builds, captured from the live sites.
