Hero Animation
Animated elements in a hero section — floating gradient orbs, particle fields, blob morphing, or motion backgrounds — that create visual energy and establish brand character on first impression.
Plain English
The hero section is the first thing every visitor sees. A static background with a headline and a button communicates content; an animated hero section communicates personality, energy, and craft. Hero animations fall into a few archetypes: gradient orbs that slowly drift and blur into each other (popular in AI/SaaS products), particle fields of floating dots (tech companies), SVG blob shapes that morph between organic forms (agencies), and CSS aurora effects with shifting color bands. The best hero animations run silently in the background — they draw the eye but never compete with the headline or call-to-action. They also respect prefers-reduced-motion, where the animation freezes to a beautiful still frame rather than disappearing entirely.
Technical
Gradient orb animation: render 2–4 `<div>` elements with `border-radius: 50%`, `filter: blur(80px)`, and `opacity: 0.6`. Animate their `transform: translate()` using CSS `@keyframes` with large random-looking values and durations of 8–20s on `infinite alternate ease-in-out`. Wrap in a parent with `overflow: hidden` to contain the bleed. Blob morphing: animate `border-radius` between different multi-value combinations (`60% 40% 30% 70% / 60% 30% 70% 40%` → `30% 60% 70% 40% / 50% 60% 30% 60%`) on a 4–8s infinite cycle. Particle field: Canvas-based — create an array of `{x, y, vx, vy}` particle objects, render dots in `requestAnimationFrame`, connect particles within a distance threshold with low-opacity lines. Aurora/gradient shift: `@keyframes` animating a large `background-position` on a `background: linear-gradient()` with `background-size: 400% 400%`. Performance rules: all hero animations must use `transform`, `opacity`, and `filter` only — never `top/left/width/height`. Use `will-change: transform` sparingly. On reduced motion: freeze the animation at frame 0 with `animation-play-state: paused`.
Live Demo
Hero Animation
Floating gradient orbs + grain overlay create a premium hero feel with pure CSS animations.
UI/UX Design Playbook
Your headline here.
Premium hero animations use subtle motion to suggest depth and energy.
Keep orb motion slow (7–12s cycles) — fast movement becomes noise, not atmosphere.
Usage
✓ Good usage
An AI product hero with three large blurred gradient orbs (purple, blue, teal) drifting slowly at 12s each, contained behind a subtle grain texture overlay — the animation adds depth and warmth without distracting from the headline and demo video.
✗ Bad usage
A particle field of 400 canvas dots all connecting with lines, running at full opacity in front of the headline text — the visual complexity competes with the copy, the performance tanks on mobile, and users cannot read the CTA.
Recommended values
- Orb animation duration: 8–20s, ease-in-out, alternate infinite
- Blur on orbs: filter: blur(60px)–blur(120px)
- Opacity: 0.4–0.7 (subtle, not overwhelming)
- Blob morph speed: 4–8s cycle
- Particle count: 40–80 (beyond 120, performance degrades on mobile)
- prefers-reduced-motion: pause animation, show beautiful static frame
Common mistakes
- Animating layout properties (top, left, width) instead of transform — causes constant layout recalculation and visible jank.
- Running particle canvas animations on a thread-blocking interval instead of requestAnimationFrame — drops frames and makes the page feel sluggish.
- No prefers-reduced-motion handling — hero animations are large-scale motion, exactly what vestibular disorder sufferers need to avoid.
- Forgetting `overflow: hidden` on the hero container — animated orbs bleed into the next section and break the layout.
- Making the animation the focus instead of the content — if the headline is harder to read because of the background motion, the animation has failed its job.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Add an animated gradient orb background to the hero section. Render three absolutely-positioned `<div>` elements inside the hero, each with `border-radius: 50%; filter: blur(80px); opacity: 0.55`. Animate each with a unique `@keyframes` that translates 100–200px in different directions over 10s, 14s, and 18s respectively — all `ease-in-out infinite alternate`. Colors: primary blue, violet, and teal from the design tokens. Wrap the hero in `overflow: hidden`. At `prefers-reduced-motion: reduce`, set `animation-play-state: paused` on all three orbs.