Hero Motion
A strong Hero normally has one primary signature interaction, one or two supporting motions and calm typography. Motion should establish hierarchy or hand content into the page, not prove that every element can animate.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Hero Motion · motion explains one relationship
Purpose
A strong Hero normally has one primary signature interaction, one or two supporting motions and calm typography. Motion should establish hierarchy or hand content into the page, not prove that every element can animate.
Choose one of morph, depth or tactile CTA as the lead. Background drift and text entrance may support it at lower intensity. Avoid independent movement on every word, artwork layer, button and decorative shape.
Keep headings and calls to action readable immediately, flatten depth on mobile and provide a static reduced-motion composition. Measure the Hero as real content: image cost, contrast and layout stability matter more than flourish.
Source: packages/skills/patterns/hero-motion.md