/scroll-craft

name: scroll-craft
description: >
  Build premium scroll-driven landing pages for service, product, food, and
  drink brands. Plan the visitor journey, page grammar, emotional peak, and
  bespoke signature move. Create dimensional heroes with independent visual
  planes, restrained motion, and separate mobile composition. Use supplied
  photos and footage or generate photoreal assets through kie.ai, write semantic
  HTML, and verify desktop, mobile, and reduced-motion scroll states visually.
  Use for "scrollcraft", "scroll craft", "layered hero", "premium hero",
  "cinematic hero", "scrollytelling", "scroll animation site", "a site where
  scrolling plays a video", "Apple-style landing page", "3D scroll world",
  "interactive landing page", "make my brand a scroll experience", "this looks
  like a template", or requests for a distinctive website that feels like an
  experience rather than a document.
allowed-tools: Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion

scroll-craft

Scroll is the only input every visitor already knows how to use. 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 to find out what the next one does.

**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, generated assets, one real HTML page on a token-driven design floor, and a strip of screenshots proving it holds up at every scroll position.

What this is not

It is not "generate a flythrough and drop text on it." That approach produces one device applied to a whole page, and every site built that way is recognisable at a glance: same claymation diorama, same centred copy, same `01 / 06` counter, same "scroll to explore" nudge. Five sections that behave identically are one section shown five times.

Four rules follow from that, and they are the spine of this skill:

1. **Variety is the product.** A page uses at least four device families and never the same device twice in a row. Read [references/devices.md](references/devices.md). 2. **The world is photographic unless the brand is genuinely illustrated.** Soft matte low-poly clay diorama is banned as a default. Read [references/worlds.md](references/worlds.md). 3. **No continuous chain.** A single unbroken camera flight is the most expensive and most fragile thing you can build, and it exists only to hide cuts between scenes. Vary the device instead and the cut disappears for free, because the visitor is not watching one film. Chain only when the brief is literally "one continuous journey." 4. **A different world is not a different page.** The device kit varies how a page looks. Structure is a separate axis, and it has to be decided deliberately or every build inherits the same skeleton. The first four builds did exactly that. Read [references/uniqueness.md](references/uniqueness.md).

Standing hero preference

**Dimensional layering is a baseline requirement for a premium marketing hero.** Plan independently moving background, subject, foreground, and atmospheric planes before requesting assets. A beautiful single background with text fades does not satisfy this preference. Depth must come from visible separation, occlusion, and controlled differences in movement, while the headline stays readable and the scene tells one clear story.

Read [references/hero-depth.md](references/hero-depth.md) before planning the hero or generating its assets. It covers clean plates, genuine alpha cutouts, shared contact anchors, typography between planes, restrained scroll choreography, mobile art direction, and visual acceptance, with the approved Sonder example. Use the composition that fits the chosen grammar; do not repeat Sonder's scene or impose pinning on a grammar that forbids it. Honor explicit static or simpler directions, and keep depth in the static composition when motion is reduced.

Approved collection standard

Read [references/approved-collection.md](references/approved-collection.md) before planning a premium marketing site. It distills the approved ten-site rebuild: real brand research, layer contracts, meaningful pointer/scroll depth, appropriate photographic or 3D rendering, distinct navigation and endings, useful interactions, mobile art direction, and evidence from the final package. These are execution principles and worked examples, not a reusable page skeleton.

Step 0: The brief and creative authority

**Establish the brief before generating anything.** Reuse answers and assets already provided. When the user explicitly delegates creative direction (for example, "use your judgment" or "I want to get out of your way"), write a `Self-authored under explicit creative delegation` brief and proceed. Cover the eight topics below, distinguish evidence from assumptions, and do not invent user quotations or force another interview/approval checkpoint.

Otherwise, interview for the missing decisions. Ask actual questions, record the answers, and avoid inferring an entire brand from its name.

The skill is a range instrument, not a house style. The human brings intent and whatever assets they own; the interview is where that turns into the right kind of page: one unbroken world, distinct scenes, printed chapters, a live surface. The skill can do any of them. The interview decides which.

Keep it short. Eight questions, asked in one pass:

1. **Vibe in three to five words**, plus up to three references from any medium. A film, an album cover, a shop, a magazine, a game. Not "sites you like": naming sites is how a page ends up looking like an existing site. 2. **The scroll journey, section by section, in their words.** What the visitor should hit first, what comes next, what the last thing is. Their sequence, not a menu you offered. 3. **The energy curve.** Where it s