Motion Web Design

Build the site. This skill takes a complete build prompt (generated by audience-site-brief Phase 10, grounded in visual-identity output) and produces a coded, running landing page with choreographed scroll animations, micro-interactions, and polished visual design.

Stack: Vite + GSAP + ScrollTrigger + Lenis. This is the industry standard used by Locomotive, Active Theory, and the studios that win Awwwards SOTD. It provides full animation control, excellent performance, and no framework overhead for single landing pages.

Distinction: ux-methodology-design determines what design rules apply. visual-identity defines the visual language. This skill implements both into working code.

When to Apply

• After audience-site-brief Phase 10 has produced a build prompt
• After visual-identity has produced a design-system.md
• When you need a coded, running page — not a mockup or spec
• When updating an existing site to add choreographed motion

Workflow

Copy this checklist: