scrollcraft skill

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:

device twice in a row. Read references/devices.md.

1. Variety is the product. At least four device families, never the same

Clay/low-poly diorama is banned as a default. Read references/worlds.md.

1. The world is photographic unless the brand is genuinely illustrated.

journey" (then see references/worldflight.md).

1. No continuous chain unless the brief is literally "one continuous

decide it deliberately. Read references/uniqueness.md.

1. A different world is not a different page. Structure is a separate axis;

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:

(film, album cover, shop, magazine, game — not "sites you like").

1. Vibe in three to five words, plus up to three references from any medium

ONE moment they should remember?** Becomes the feeling curve and the peak. See references/feel.md.

1. The scroll journey, section by section, in their words.
2. The energy curve — where calm, where intense.
3. **How should someone feel while scrolling, stage by stage, and what is the

seed of the signature move.

1. One thing this site should do that no site they have seen does — the

references/uniqueness.md §5: brutalist, maximalist, playful, retro, dense, editorial, premium-minimal.

1. How far from premium-minimal? Offer the range in

it is their call.

1. One unbroken world, or distinct scenes? The biggest structural fork, and

kit. "Nothing" is fine and means a fully generated world.

1. What assets do they already have? Footage, photos, product shots, brand

Write the answers verbatim into /builds//BRIEF.md (use writefile) 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: SCROLLCRAFTHOME env var; nearest .scrollcraft.json ({ "workspace": "..." }) walking up from cwd; /scrollcraft. Builds live at /builds//, the fingerprint registry at /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.

saying in the report why the other seven lost. Nav, hero and close follow from the grammar.

• Pick a grammar. Eight, mutually exclusive. Choosing filmic one-shot means

a parameter change to a kit device. Interview question 5 is the seed.

• Invent the signature move. One bespoke interaction coded in the page, not

/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.

• Run the fingerprint gate. The planned build must differ from every row in

references/feel.md). Then assign each beat a device in a written table (beat / device / why).

• Write the feeling curve before the score table (method:

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.

Step 3: Assets

Full pipeline, prompt scaffolds and model notes: references/assets.md.

Hermes-native paths first:

Grade and encode them.

• User-supplied footage and photos — no key, no spend, a first-class route.

in every prompt is what makes six images look like one shoot. Inspect every asset (vision_analyze) before use; rerolling beats shipping a bad frame.

• The imagegenerate tool** for stills: one style preamble reused verbatim

Optional upstream path — kie.ai (vendored verbatim as scripts/kie.mjs): photoreal stills and camera-move clips. Requires the KIEAIAPI_KEY environment variable (export it in your shell; there is no bundled env file in this port). Check balance with node /scripts/kie.mjs probe; a still costs cents, a 5s clip more.

node <skill>/scripts/kie.mjs still "<style preamble>\n\n<scene>" out/01-hero.png --ar 16:9
node <skill>/scripts/kie.mjs shot  "<camera move>" out/01-hero.png out/01.mp4 --dur 5
bash  <skill>/scripts/encode.sh out/01.mp4 assets/01.mp4
bash  <skill>/scripts/encode.sh out/01.mp4 assets/01-m.mp4 mobile

Encode for scrubbing, not playback. encode.sh sets a dense GOP because seeking walks from the previous keyframe; a normal web encode scrubs like mud. It also strips audio.

Step 4: Build the page

Write real HTML — real , real , real reading order. The engine reads data-sc-* attributes off your markup and drives it; it never generates DOM. Start from references/template.html. Device patterns: references/devices.md. Spacing, type, depth, colour: references/taste.md — read it before writing markup. Theme by overriding tokens, six values and two fonts:

:root {
  --sc-canvas: #0A0806;  --sc-surface: #16110E;
  --sc-ink:    #F5EBDD;  --sc-ink-soft: #A2968A;
  --sc-accent: #FF5A3D;  --sc-accent-ink: #15110F;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
}