scrollcraft-layout

Source: transcript of youtube.com/watch?v=QUI6Ug4cHnE (Nate Herk, "I Built The Ultimate Claude Website Design Skill", Aug 2026). Core idea: the scroll is the story. Every scroll gesture should correlate with something happening on the page, so the visitor is hooked like short-form content and keeps going. Keep the copy and the brand; change how it unfolds.

1. Interview first (2 minutes, not 20)

Answer these before touching code (from the brief or by asking):

• Vibe on two axes: premium/trusted/editorial ↔ energetic/hype, and real assets ↔ generated world. Anton's sites default to premium editorial with real photos/videos.
• The scroll journey: what should the visitor feel at second 0, 5, 20, 60? Which single thing must they remember?
• Real assets available (photos, clips, logos). Generate only fillers that match the palette (Kie/GPT Image via the kie-gemini-omni skill), never photoreal people.
• "One thing this site does that no site you have seen does."

2. Composition rules that read as premium

• Hero must not be bland: depth (layered background planes, grain, a light source), a magazine-cover lockup (name as object, one line of role, one CTA), a subtle scroll-linked zoom or parallax, real photo/video cut-out on its own layer.
• One thing at a time: long sections become pinned sequences where content swaps as you scroll (a "stage" with 3–6 beats), or horizontal scroll rails for series (career eras, products, goals).
• Numbers count up on scroll, images reveal with scroll (mask/clip), lines draw, text arrives staggered. Slow it down: a scroll-linked animation should take ~60–100 vh of scroll to complete, not 20. Fast = invisible.
• Layers: at least three planes moving at different rates (background field, mid content, foreground accents). Use translate3d only.
• Typography and spacing carry taste: display + body pairing (no Inter/Roboto/Arial/system-ui/Space Grotesk), generous whitespace, editorial hierarchy, a data voice for metrics.
• Cards get dynamic hover (tilt/glow following the pointer) but never depend on hover for meaning.
• Cut what is bland or redundant rather than animating it.