Designs marketing-site hero and launch-page motion - scroll-linked scrub sections pinned 100-200vh, one signature mechanic per page, small masked reveals, and hard performance gates - so the page choreographs the story without scroll-jacking, jank, or the animated-template look. Use when someone asks "add a scroll animation to our landing page hero", "pin a section that scrubs as the user scrolls", "is this scroll-jacking or scroll-linked", "our homepage animations feel cheap and janky", or "what should move on our launch page", or when a launch page needs motion that still passes performance budgets. Do NOT use for in-product UI motion systems - use animation-system instead; for the hero's static artwork and composition, use website-hero-artwork; for the headline words themselves, use landing-page-copy; for a rendered video file embedded in the hero, use remotion-compose.
---
name: website-hero-motion
description: Designs marketing-site hero and launch-page motion - scroll-linked scrub sections pinned 100-200vh, one signature mechanic per page, small masked reveals, and hard performance gates - so the page choreographs the story without scroll-jacking, jank, or the animated-template look. Use when someone asks "add a scroll animation to our landing page hero", "pin a section that scrubs as the user scrolls", "is this scroll-jacking or scroll-linked", "our homepage animations feel cheap and janky", or "what should move on our launch page", or when a launch page needs motion that still passes performance budgets. Do NOT use for in-product UI motion systems - use animation-system instead; for the hero's static artwork and composition, use website-hero-artwork; for the headline words themselves, use landing-page-copy; for a rendered video file embedded in the hero, use remotion-compose.
---
# website-hero-motion
Launch pages fail in two directions: a dead static page on one side, a scroll-jacked carnival that traps readers and tanks LCP on the other. Performance is the aesthetic - a stutter reads as cheapness faster than any visual flaw, and a strong page loses on usability long before creativity gets a vote. The line between premium and template is control ownership: the reader keeps the playhead. This skill produces the motion spec that keeps it that way.
## Operating procedure
Run the steps in order: budgets before mechanics before polish. A mechanic that cannot pass the budget is cut at Step 2, before anyone builds it - the most expensive failure is a signature effect discovered to be unshippable after it is built.
### Step 1: Gather the charter and the page inputs
Ask for these before designing anything. If any input is a guess, label it a guess and move on.
1. **Charter**: the client's charter block in the format defined in premium-design-foundations - accent, canvas, ink, CTA geometry, weights, and both motion bands come from it. Paste the charter block if one exists. If the client has a charter but the foundations pack is not installed, elicit the needed values directly and label them provisional. If no charter exists at all, halt and route to premium-design-foundations - never substitute worked-example values.
2. **Claim and context**: the page's one claim and its launch context.
3. **Hero asset**: what exists - a scrub-ready frame sequence, a rendered video, or a still. The strongest scrub sequences are recut from trailer vignettes already built under launch-trailer-director; assets are shared, not remade.
4. **Runtime**: default GSAP plus ScrollTrigger for page choreography; if the team already ships another animation runtime, keep it and record it in the spec.
5. **Devices**: target devices and the worst mid-tier phone the page must hold 60fps on - gates are measured there, never on the designer's laptop.
### Step 2: Set the performance gates as acceptance criteria