Scroll Craft
Scroll is the timeline. The page is a story the visitor drives with their hand.
One grammar, one peak, one signature move. Premium means clear composition and
a meaningful interaction, not video, pinning, or effects.
Load when
| Need |
File |
| Journey, feeling curve, peak |
journey.md |
| Eight grammars |
grammars.md |
Devices and --sc-p |
devices.md |
| Signature + fingerprint |
signature-fingerprint.md |
| Optional hero depth |
hero-depth.md |
| Mobile, keyboard, reduced motion |
mobile-accessibility.md |
| Scroll verification |
verification.md |
| Continuous World / media / QA |
handoff.md |
Do not read every reference on every request. Engine:
scrollcraft.js, scrollcraft.css.
The mechanism CSS is safe for an existing design system; the scoped
starter theme is optional. Copy what the project
needs; do not edit the mechanism per page. Drive bespoke behaviour from
--sc-p. Attribution: NOTICE.md.
Hard rules
- One primary specialist. This skill owns the scroll story. Do not auto-load
Impeccable for every build step.
- Ordinary scrollable UI stays Impeccable. Words like
premium, cinematic,
interactive, or layered alone are not enough.
- Continuous camera / fly-through / diorama / 3D world → hand off to
scroll-world after a minimum brief. Do not implement worldflight here.
- Follow the project stack. Do not force a standalone HTML file onto React/Vue.
- Semantic HTML for headings, CTA, nav, and forms. Core content readable with
JS off and with reduced motion.
- No scroll hijacking. No wheel/touch/keyboard traps.
- No KIE, Higgsfield, ffmpeg, Playwright, font CDN, or remote assets on the
core path. Tier 1 is HTML/CSS/transforms/sticky/local assets/light JS.
- Do not invent brand facts, stats, testimonials, or user quotes.
- Live Surface controls must work. Label synthetic demos. Never fake a
successful transaction.
- Design V2 is optional, offline, read-only. Empty bank does not block build.
- Store brief/fingerprint/evidence under
.scratch/scroll-craft/<slug>/ in the
user project. Not in this skill folder. No new global home.
Handoff
| Request |
Owner |
| Scroll-led storytelling / scrollytelling |
this skill |
/scroll-craft plus Continuous World |
this skill enters, then scroll-world |
| Continuous camera, diorama, 3D world (no slash) |
scroll-world |
| Dashboard, ordinary landing, design system |
impeccable |
| Hover/press/easing after the surface exists |
emil-design-eng |
| Standalone photoreal / ads / identity |
visual-studio |
| Deterministic HTML composition rendered to video |
hyperframes |
| Exploratory QA |
browser-act |
| Observed browser cause |
opencode-chromium-cdp then chrome-devtools-axi |
Run
- Read PRODUCT.md, DESIGN.md, tokens, and existing assets. Reuse answers.
- Lock the brief. Interview only missing decisions. Mark assumptions.
- Write the visitor journey and feeling curve. One engineered peak.
- Pick one page grammar. grammars.md.
- Invent one domain-relevant signature interaction with a static fallback.
- Compare fingerprint if history exists; else record
NO_HISTORY. Design V2
retrieval is optional.
- Assign a device per beat, with fallback. No quota of device families.
- Build in the project stack. Copy the engine if the page uses
data-sc-*.
- Verify along the scroll: desktop, mobile portrait, reduced motion, reverse,
anchor jump, keyboard. verification.md.
- Fix, save evidence under
.scratch/scroll-craft/<slug>/, record fingerprint.
/scroll-craft with an explicit Continuous World brief: write the story,
waypoints, and feeling curve, then hand off. Do not take the renderer.
Media
- Tier 1 (default): no generation, no video. Complete experience offline.
- Tier 2: existing local images with clear license. No ffmpeg.
- Tier 3: video only if the brief needs it and native tooling exists.
A finished non-video path is normal, not DEGRADED. Use DEGRADED only when a
requested capability cannot be met. Do not invent tools.
Output
The page (or mount into the existing site), the journey table, grammar and why
the others lost, signature move, fingerprint (NO_HISTORY or diffs), peak,
verification actually performed, and limits (emulation vs device). Do not dump
prompts or claim uniqueness without evidence.
1---2name: scroll-craft3description: Build scroll-led storytelling websites where scroll is the timeline: scrollytelling, signature interaction, pin/pan/reveal, layered hero, cinematic scroll without camera flight. Use when the user runs /scroll-craft, or asks for a site where scrolling tells the product story. Not for ordinary dashboards or landings (impeccable), continuous camera fly-through / diorama / 3D world (scroll-world), chrome motion (emil-design-eng), or photoreal ads (visual-studio).4license: MIT5---67# Scroll Craft89Scroll is the timeline. The page is a story the visitor drives with their hand.10One grammar, one peak, one signature move. Premium means clear composition and11a meaningful interaction, not video, pinning, or effects.1213## Load when1415| Need | File |16|---|---|17| Journey, feeling curve, peak | [journey.md](references/journey.md) |18| Eight grammars | [grammars.md](references/grammars.md) |19| Devices and `--sc-p` | [devices.md](references/devices.md) |20| Signature + fingerprint | [signature-fingerprint.md](references/signature-fingerprint.md) |21| Optional hero depth | [hero-depth.md](references/hero-depth.md) |22| Mobile, keyboard, reduced motion | [mobile-accessibility.md](references/mobile-accessibility.md) |23| Scroll verification | [verification.md](references/verification.md) |24| Continuous World / media / QA | [handoff.md](references/handoff.md) |2526Do not read every reference on every request. Engine:27[scrollcraft.js](engine/scrollcraft.js), [scrollcraft.css](engine/scrollcraft.css).28The mechanism CSS is safe for an existing design system; the scoped29[starter theme](engine/scrollcraft-theme.css) is optional. Copy what the project30needs; do not edit the mechanism per page. Drive bespoke behaviour from31`--sc-p`. Attribution: [NOTICE.md](NOTICE.md).3233## Hard rules3435- One primary specialist. This skill owns the scroll story. Do not auto-load36 Impeccable for every build step.37- Ordinary scrollable UI stays Impeccable. Words like `premium`, `cinematic`,38 `interactive`, or `layered` alone are not enough.39- Continuous camera / fly-through / diorama / 3D world → hand off to40 `scroll-world` after a minimum brief. Do not implement worldflight here.41- Follow the project stack. Do not force a standalone HTML file onto React/Vue.42- Semantic HTML for headings, CTA, nav, and forms. Core content readable with43 JS off and with reduced motion.44- No scroll hijacking. No wheel/touch/keyboard traps.45- No KIE, Higgsfield, ffmpeg, Playwright, font CDN, or remote assets on the46 core path. Tier 1 is HTML/CSS/transforms/sticky/local assets/light JS.47- Do not invent brand facts, stats, testimonials, or user quotes.48- Live Surface controls must work. Label synthetic demos. Never fake a49 successful transaction.50- Design V2 is optional, offline, read-only. Empty bank does not block build.51- Store brief/fingerprint/evidence under `.scratch/scroll-craft/<slug>/` in the52 user project. Not in this skill folder. No new global home.5354## Handoff5556| Request | Owner |57|---|---|58| Scroll-led storytelling / scrollytelling | this skill |59| `/scroll-craft` plus Continuous World | this skill enters, then `scroll-world` |60| Continuous camera, diorama, 3D world (no slash) | `scroll-world` |61| Dashboard, ordinary landing, design system | `impeccable` |62| Hover/press/easing after the surface exists | `emil-design-eng` |63| Standalone photoreal / ads / identity | `visual-studio` |64| Deterministic HTML composition rendered to video | `hyperframes` |65| Exploratory QA | `browser-act` |66| Observed browser cause | `opencode-chromium-cdp` then `chrome-devtools-axi` |6768## Run69701. Read PRODUCT.md, DESIGN.md, tokens, and existing assets. Reuse answers.712. Lock the brief. Interview only missing decisions. Mark assumptions.723. Write the visitor journey and feeling curve. One engineered peak.734. Pick **one** page grammar. [grammars.md](references/grammars.md).745. Invent one domain-relevant signature interaction with a static fallback.756. Compare fingerprint if history exists; else record `NO_HISTORY`. Design V276 retrieval is optional.777. Assign a device per beat, with fallback. No quota of device families.788. Build in the project stack. Copy the engine if the page uses `data-sc-*`.799. Verify along the scroll: desktop, mobile portrait, reduced motion, reverse,80 anchor jump, keyboard. [verification.md](references/verification.md).8110. Fix, save evidence under `.scratch/scroll-craft/<slug>/`, record fingerprint.8283`/scroll-craft` with an explicit Continuous World brief: write the story,84waypoints, and feeling curve, then hand off. Do not take the renderer.8586## Media8788- **Tier 1 (default):** no generation, no video. Complete experience offline.89- **Tier 2:** existing local images with clear license. No ffmpeg.90- **Tier 3:** video only if the brief needs it and native tooling exists.9192A finished non-video path is normal, not `DEGRADED`. Use `DEGRADED` only when a93requested capability cannot be met. Do not invent tools.9495## Output9697The page (or mount into the existing site), the journey table, grammar and why98the others lost, signature move, fingerprint (`NO_HISTORY` or diffs), peak,99verification actually performed, and limits (emulation vs device). Do not dump100prompts or claim uniqueness without evidence.
kuker24