scrollcraft-layout

# 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. ## 3. Implementation (static sites, no npm) - Prefer **CSS scroll-driven animations** (`animation-timeline: view()` / `scroll()`, `animation-range`) inside `@supports` and `@media (prefers-reduced-motion: no-preference)`; the resting state is the final state so prints/captures/no-JS are complete. - For pinned sequences, horizontal rails and scrubbed image/video sequences use **GSAP 3 + ScrollTrigger from cdnjs** (`cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js` + `ScrollTrigger.min.js`), `scrub: 0.6–1.2`, `pin: true`, `anticipatePin: 1`; smooth scrolling via Lenis only if it stays under 20 KB and is disabled on reduced-motion. - Video: `<video muted playsinline preload="metadata" poster>` with `IntersectionObserver` play/pause; scrubbing a clip by scroll only for short (≤ 6 s) hero loops. - Performance budget: LCP image ≤ 250 KB, total JS ≤ 90 KB, no layout thrash (transform/opacity only), `content-visibility: auto` on below-fold sections. - Accessibility: focus order unchanged by pinning, `prefers-reduced-motion` turns every scroll animation into a static layout, contrast AA, one h1. ## 4. Verify like the video does ("zoom into keyframes") Headless only (Playwright, `PWDEBUG=0`). Scroll the page to 0, 10, 25, 40, 55, 70, 85, 100 % and screenshot each stop at 1440 and 375; read them: is something meaningful happening at every stop, is any text unreadable mid-animation, does any pinned section trap the scroll on mobile, does the sequence read too fast (fewer than two stops show its progress)? Fix, re-shoot, repeat. Also test reduced-motion and a no-JS render. ## 5. Delivery checklist Hero with depth and one hook · 3+ moving layers · at least one pinned or horizontal sequence · counters/reveals tied to scroll and slowed · copy and brand preserved · reduced-motion and no-JS complete · Lighthouse-minded budgets · scroll-stop screenshots in the QA folder.