scroll-craft

The saved excerpt is a snapshot from when this skill was listed. The external source remains the complete and most current version.

---
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 k