Quick summary
Scroll Craft builds scroll-driven interactive landing pages for any business: a service company, a physical product, a food or drink brand, 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 is a method, not a template: every build starts from an interview and commits to one of eight mutually exclusive page grammars, from filmic one-shot to typographic poster to split stage.
What keeps the output honest 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, 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 precisely for this
- Developers who want the whole discipline — scrub engine, act cues, verification harness — as a rerunnable method rather than 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, a fade — the eight-grammar system plus the fingerprint gate makes that convergence impossible
- Scroll effects that were never verified ship broken: dead scroll ranges, clips that freeze, 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 — 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, verify
- The scrollcraft engine — scrub, pin, cues, 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 — the production gotchas this fork adds: transform-only motion on fixed layers, the cue contract, mobile zone-crossing budgets, 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 | Real semantic HTML on a design-system floor |
| Verify | The page proves itself before it ships |
Design & branding system
The skill treats structure as the brand decision, not a demo to reskin.
- Every build gets its own palette, type system and copy voice from the interview — there is 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
- One signature move per build — a single interaction the page is remembered by — is designed in, not bolted on
- A design-system floor keeps rhythm, spacing and contrast honest underneath all the motion
Output & performance budget
The deliverable is a static page whose motion cost is engineered, not discovered.
- 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, dense keyframes, a real-world 23MB→7MB result documented in the notes
- 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 because uniqueness, not motion, is what makes these pages land.
- 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 — the gate proves it instead of hoping
- The output is yours outright — static files, no platform, 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 — TONNAGE, a variable-font type-specimen press, and THE WORK, a split-stage homepage argument — were built from owned assets on zero generation credits
- 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
Real builds from this skill, captured from the live sites — not mock-ups.
