Scrollcraft Layout

---
name: scrollcraft-layout
description: Turn a static site into a premium, multi-layered, scroll-driven experience (the "ScrollCraft" approach from Nate Herk's Claude design-skill video, adapted to Anton's no-npm static sites). Use when Anton asks for "multi-layered layout", "layers when you scroll", "interactive scrolling", "make it gorgeous / premium", "scroll animations", "not AI slop", or to apply the ScrollCraft approach to antonabyzov.com, football.antonabyzov.com, EasyChamp or any landing page. Pairs with the frontend-design skill (aesthetics) and the webapp-testing skill (headless verification).
metadata:
  version: "1.0.0"
  author: Anton Abyzov
  tags: scroll, gsap, scrolltrigger, landing-page, parallax, web-design
---

# 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.