A hero section has one job: tell the visitor what you do and why they should care. Motion is a supporting actor, not the headline.

Prototype in layers

I build the hero in three passes: layout, typography, and motion. This keeps decisions clean and prevents over-animating.

Make the first 600ms count

A single staggered reveal feels premium. Use ease-in-out curves and keep travel distances short for a tight feel.

const hero = {
  hidden: { opacity: 0, y: 18 },
  show: { opacity: 1, y: 0, transition: { duration: 0.5 } },
};