Hero Choreography

Hero choreography is the deliberate sequencing of motion events that execute in the hero section the moment a 2026 marketing page loads. It turns the first 800ms into a branded performance that signals speed, taste, and engineering rigor. Linear launches a soft radial gradient that blooms from the center while their Inter Display headline scales into final weight with a crisp spring curve pulled from their product. The accompanying product screenshot rises from below on a separate timeline and picks up a gentle mouse tilt that deactivates after initial engagement. Every element has its own start delay, duration, and easing function. The full sequence is built with Framer Motion for component level control and CSS for the gradient work so it stays buttery on the main thread. This approach only lands when the rest of the stack is tight. Self hosted variable fonts preloaded with font display swap. Next.js partial prerendering on Vercel edge. No third party scripts in the critical path. The choreography is the visible expression of all those invisible decisions.

Hero choreography is not the decorative animation that defined the 2021 marketing site era. It is not Lottie files stacked in every section with identical easing curves copied from a template marketplace. Those versions added load time, ignored reduced motion preferences, and made every brand feel interchangeable. They were there to fill space not to direct attention. The current standard is stricter. Motion must afford understanding or reveal product truth. If it does not it gets removed. Anthropic proves less can be louder. Their hero relies on a restrained type fade and a color shift that lasts 300ms. No parallax. No floating elements. The Söhne font and tight negative space do the work. The absence of flashy moves makes the brand feel confident instead of desperate. Anything that calls attention to itself at the expense of the message fails the choreography test immediately.

The concrete examples set the bar for the entire industry. Linear remains the reference. Their hero gradient uses an OKLCH shift layered with film grain noise that resolves as the bloom completes. The headline assembles at 120ms. Accent chips cascade in at 80ms intervals. The screenshot uses a lightweight transform that tracks mouse position within 12 degrees. All of it stays inside a 35kb budget for the motion assets. Cursor takes a sharper approach. Their custom display font hits with kinetic energy and a deliberate overshoot that echoes their code editing product. The mono font used in labels appears one frame later creating a micro rhythm. The scroll pinned panel directly below the hero begins its update sequence on load so the hero motion flows straight into the body content. There is no gap. Stripe choreographs custom SVG lines that draw themselves behind the headline in perfect sync with reading speed. v0 by Vercel runs a live iframe in the hero showing a real generated page with a moving cursor demonstrating the product in real time. OpenAI does the inverse with a nearly static hero where one faint generative pattern pulses at a frequency that feels atmospheric rather than animated. Notion animates actual product UI elements inside their hero illustrations so the motion is literal instead of metaphorical. Each leader picks one signature move and executes it without distraction. In 2022 the same real estate held generic Lottie blobs that took 2.4 seconds to load. By 2025 the bar moved to motion that ships faster than the competition and still feels engineered.

Use hero choreography when your product interface is strong enough to star in its own movie and your audience cares about craft. Deploy it on sites for design tools, developer platforms, AI products, and premium SaaS where the first impression can make or break signups. The 2026 leaders all choreograph their heroes because they know developers and designers will judge the site with the same eye they judge the product. It works best when paired with one accent color, real screenshots instead of renders, and copy that does not need to scream. Implement it only after the static layout survives the empty page test. Strip the motion. If the type spacing and visual density still read as your brand then the choreography will elevate it. Do not use it when the site is pure brochureware for a service business that just needs to rank locally and collect calls. A coffee shop does not need a gradient bloom. It needs fast load times and clear hours. Skip choreography if your current stack cannot hit sub second paint or if your team lacks the frontend skill to maintain the timings. Committee designed heroes with six different motion requests look exactly like that. Avoid it when you have more than one primary CTA or when the visual system is already noisy. Choreography amplifies whatever is there. Make sure what is there is worth amplifying.

Hero choreography turns the first paint into your brands opening statement.