← ClaudeAtlas

scroll-animated-sitelisted

Build award-winning scroll-animated websites end to end. Runs a discovery wizard (person / product / company / event / cause), compiles a Scroll Score blueprint, scaffolds the project, implements GSAP ScrollTrigger motion (optional Lenis smooth scroll), then verifies it in a real browser with Playwright MCP and fixes what it finds. Use when the user wants a scroll animation site, scroll-driven landing page, Apple-style product scroll, awwwards-style site, scrollytelling, parallax or pinned sections, or an image-sequence scroll effect.
hemangjoshi37a/scroll_animated_webpages_skill · ★ 0 · Web & Frontend · score 73
Install: claude install-skill hemangjoshi37a/scroll_animated_webpages_skill
# Scroll-Animated Site Builder Take a topic and a subject from the user and ship a complete, verified, scroll-driven website — without handing the work back mid-way. ## Before you start: is this a new site or a retrofit? Adding motion to a page that already ranks is a **different job** with different risks — the scroll budget must include the existing page height, and a pin is dead scroll distance on a page someone is scanning to make a decision. Default to building at a **separate showcase URL** and linking to it; convert in place only when the page has no traffic to lose and its job is impression rather than reference. Always take a byte-for-byte backup first and hand the user the restore command. Read `references/08-failure-modes.md` §3 before agreeing to a retrofit. ## The pipeline Six phases. Run them in order. Only Phase 1 talks to the user. ``` 1 DISCOVER → wizard, 2–3 rounds of questions [interactive] 2 SCORE → compile scroll-score.json blueprint [autonomous] 3 ASSETS → generate/collect images, frames, video [autonomous] 4 SCAFFOLD → project skeleton + motion runtime [autonomous] 5 BUILD → implement every beat in the Score [autonomous] 6 VERIFY → drive a real browser, fix, repeat [autonomous] ``` **After the wizard closes in Phase 1, stop asking questions.** Phases 2–6 run to completion on your own judgment. Record assumptions in `DECISIONS.md` and report them at the end instead of blocking on them. The user asked for an