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
translate3donly. - 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@supportsand@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>withIntersectionObserverplay/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: autoon below-fold sections. - Accessibility: focus order unchanged by pinning,
prefers-reduced-motionturns 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.