Scrollcraft

scrollcraft

Scroll is the only input every visitor already knows. This skill treats it as a timeline: the wheel is a scrubber, the page is a film with real text on top, and each section behaves differently enough that the visitor keeps going.

What you produce: an interview brief, a page grammar, a customer-journey map, a feeling curve with one engineered peak, a scroll score, one signature move, assets, one real HTML page on a token-driven design floor, and a strip of screenshots proving it holds up at every scroll position.

Use for: "scrollytelling", "scroll animation site", "a site where scrolling plays a video", "Apple-style landing page", "3D scroll world", "make my brand a scroll experience", "this looks like a template", or any request for a site that should feel like an experience rather than a document.

What this is not

It is not "generate a flythrough and drop text on it." That produces one device applied to a whole page, recognisable at a glance. Four spine rules:

1. Variety is the product. At least four device families, never the same device twice in a row. Read references/devices.md.
2. The world is photographic unless the brand is genuinely illustrated. Clay/low-poly diorama is banned as a default. Read references/worlds.md.
3. No continuous chain unless the brief is literally "one continuous journey" (then see references/worldflight.md).
4. A different world is not a different page. Structure is a separate axis; decide it deliberately. Read references/uniqueness.md.

Step 0: The interview

Always ask the user in chat before building anything. Real questions, asked and answered in the conversation, written down — not a brief inferred from the brand name. Eight questions in one pass:

1. Vibe in three to five words, plus up to three references from any medium (film, album cover, shop, magazine, game — not "sites you like").
2. The scroll journey, section by section, in their words.
3. The energy curve — where calm, where intense.
4. How should someone feel while scrolling, stage by stage, and what is the ONE moment they should remember? Becomes the feeling curve and the peak. See references/feel.md.
5. One thing this site should do that no site they have seen does — the seed of the signature move.
6. How far from premium-minimal? Offer the range in references/uniqueness.md §5: brutalist, maximalist, playful, retro, dense, editorial, premium-minimal.
7. One unbroken world, or distinct scenes? The biggest structural fork, and it is their call.
8. What assets do they already have? Footage, photos, product shots, brand kit. "Nothing" is fine and means a fully generated world.

Write the answers verbatim into <workspace>/builds/<name>/BRIEF.md (use write_file) before any act planning. BRIEF.md must contain the eight answers, the feeling curve (one line per act: emotion, then cause), the peak (as the sentence a visitor would say to a friend), the completed "It's the site where ___" sentence, and any authored silence. If the user is genuinely unreachable in a fully autonomous run, self-author BRIEF.md, mark it Self-authored, not interviewed, and say so in the report.

Bootstrap

Run the preflight rather than checking by hand (it catches a stripped ffmpeg that reports missing filters as syntax errors):

node <skill>/scripts/doctor.mjs
node <skill>/scripts/workspace.mjs --ensure   # prints workspace, seeds registry

Workspace resolution order: SCROLLCRAFT_HOME env var; nearest .scrollcraft.json ({ "workspace": "..." }) walking up from cwd; <project root>/scrollcraft. Builds live at <workspace>/builds/<name>/, the fingerprint registry at <workspace>/FINGERPRINTS.md (seeded from templates/FINGERPRINTS.md, starts empty — the gate stops you repeating yourself).

Copy engine/scrollcraft.js and engine/scrollcraft.css into the build folder. Never edit the engine per-project. Theme with tokens; write your own markup. Bespoke behaviour is bespoke JS in the page, driven off --sc-p and your own data-sc-* attributes.

Step 1: The brief, journey first

Ask the subject open, in plain prose. Then ask only what Step 0 did not cover: what is this and who is it for; the one sentence the page installs; the one next action (one label, used everywhere); what they already have; art direction from references/worlds.md. Then write the journey: four to seven beats, each a shift in what the visitor knows or feels. Beats are the spine; a section serving no beat is cut. Confirm the journey with the user before generating assets — assets are the expensive part.

Step 2: Grammar, gate, then score

Full detail in references/uniqueness.md.

• Pick a grammar. Eight, mutually exclusive. Choosing filmic one-shot means saying in the report why the other seven lost. Nav, hero and close follow from the grammar.
• Invent the signature move. One bespoke interaction coded in the page, not a parameter change to a kit device. Interview question 5 is the seed.
• Run the fingerprint gate. The planned build must differ from every row in <workspace>/FINGERPRINTS.md on at least 4 of 6 dimensions: grammar, nav treatment, hero device, act-sequence shape, close pattern, signature move. If it fails, change the plan, not the log.
• Write the feeling curve before the score table (method: references/feel.md). Then assign each beat a device in a written table (beat / device / why).

Checks before building: grammar bans hold; 4+ device families; no device twice in a row; at most two scrub acts; no two adjacent acts with the same feeling; one peak with the largest span; total page length 8–14 viewport-heights.