What a hero animation is actually for
A hero animation has three jobs, in order: hold attention for the fraction of a second before the headline is read, establish the visual temperament of the product, and signal that the page is alive and finished loading. Nothing else. It is not a place to explain a feature, and it is not a place to put a narrative — narrative belongs further down the page where the visitor has already chosen to stay.
That ordering has a practical consequence. The animation must never delay the headline. If your motion sequence holds the H1 at zero opacity for 800ms while a gradient blooms behind it, you have traded the fastest content on the page for decoration. The safest structure is a backdrop that animates continuously and independently, with the text arriving in a single short entrance of 200–400ms.
The five pattern families
Fluid Wave. A soft, slow vertical or diagonal displacement of stacked shapes or image tiles. Continuous, loops without a seam, and reads as ambience rather than event. Best when the hero contains a lot of text, because the motion never competes for the reading line.
Morphing Gradient. Two or three large radial gradients drifting across each other, often with a slow hue rotation. Extremely cheap if you animate position and opacity on composited layers, and expensive if you animate the gradient definition itself, which forces a repaint on every frame.
Floating Layers. Three to five foreground elements drifting at different amplitudes and phases, producing depth without scroll input. Works well with product screenshots and cards. The risk is the "aquarium" effect — if everything moves, nothing is stable enough to read.
Liquid Reveal. A mask or clip-path sweeps the hero into view once on load. Strong first impression, single-use, no ongoing cost. Because it is a one-shot animation, it must finish quickly and must not gate the text.
Parallax Drift. Depth tied to pointer position or a very small scroll offset. Effective for landing pages with a single fold; less effective on touch devices, where there is no pointer to drive it and the effect silently disappears.
Comparison
| Pattern | Runtime cost | Best for | Main pitfall |
|---|---|---|---|
| Fluid Wave | Low — transform only | Text-heavy heroes | Too slow reads as broken |
| Morphing Gradient | Low to medium | Brand-led landing pages | Repaint if gradients animate |
| Floating Layers | Medium — many layers | Product imagery | Visual noise, unstable focus |
| Liquid Reveal | One-shot, negligible | Campaign and launch pages | Delays the headline |
| Parallax Drift | Medium — input-linked | Single-fold desktop pages | No effect on touch input |
Timing and easing specifications
Continuous ambient loops sit comfortably between 6 and 14 seconds per cycle with a symmetrical ease-in-out. Anything faster starts to feel like a notification; anything slower stops registering as motion at all and simply costs battery. One-shot entrances belong in the 200–500ms range with a decelerating curve — a cubic-bezier(0.16, 1, 0.3, 1) style ease-out lands with weight without overshoot. Reserve springy or elastic curves for interactions the user initiated; on an uninvited hero they read as unserious.
Stagger is the control most often set wrong. For a group of three to five hero elements, 60–90ms between siblings is enough to imply sequence. At 200ms the last item arrives noticeably late and the page feels sluggish even though each individual animation is fast.
Pros and cons of animating the hero at all
In favour
- Signals craft in the first second, before any copy is read.
- Gradient and transform-based backdrops weigh far less than hero video.
- A short entrance gives the eye a path to the primary call to action.
Against
- Continuous motion above the fold competes with reading for as long as the visitor stays.
- On low-end devices, an ambient loop can hold a core busy during the exact moment scripts are still parsing.
- It is the hardest animation to remove later, because stakeholders become attached to it.
Implementation notes
Prefer CSS keyframes for anything that loops: the browser can run them off the main thread and they keep working while JavaScript is busy. Use the Web Animations API when you need to interrupt, reverse or sequence based on state — for example cancelling a hero entrance because the visitor scrolled within the first 200ms. Reach for canvas or WebGL only when the effect genuinely cannot be expressed with layers, and then load it lazily after the text has painted.
Always declare the reduced-motion branch in the same file as the animation, not in a separate override sheet, so the two cannot drift apart. In that branch, keep the final visual state and drop the movement; do not hide the element. The MDN documentation for prefers-reduced-motion covers the query semantics, and the W3C Web Accessibility Initiative publishes the underlying guidance on motion triggered without user request.