Hero section teardown: what actually converts

Every hero has a motion budget

The biggest mistake in hero design is spending the motion budget everywhere. A hero gets ONE budget, and every animation spends it: ambient background drift is cheap (run it forever), headline shimmer is medium (run it, but slowly), CTA flourish is expensive (once, on hover only). Spend the budget three times and the eye has nowhere to land — and eyes that don't land don't click.

Teardown: the aurora SaaS hero

Nebula spends its budget exactly three ways: two blurred orbs drift behind everything (ambient), the headline gradient shimmers on a 5.5s loop (slow enough to read as texture, not animation), and the CTA lifts on hover only. The grid overlay is static. Result: depth without noise.

Teardown: the analytics hero that sells trust

Pulse converts on credibility, so its hero IS the product: live-counting KPIs and a self-drawing chart are the demo. The conversion detail most sites skip: the numbers animate from zero on view — an honest number that visibly updates says "this data is real" better than any testimonial.

Teardown: restraint as positioning

Noir sells taste, so its hero barely moves: letters rise once, a marquee loops, film grain breathes. That restraint IS the message — a studio claiming refinement cannot afford a bouncy hero. Match motion personality to brand personality: aurora for AI/dev, kinetic type for studios, counting numbers for data products.

The one detail most sites skip

The subheadline is not a sentence — it's an objection handler. "Ship websites that feel alive" raises "who is this for and what does it cost?" The sub-line must answer both in one breath, or the CTA click leaks. Audit your hero: does anything between headline and button address hesitation? If not, you're paying for traffic you're losing at the last scroll.