AI Website Guides · 2026-10-05 · 5 min read
Animated Hero Section: 8 Patterns, Code and When to Use Each
The hero section is the first thing a visitor sees, so it is where animation earns or wastes its attention. This guide covers eight animated hero section patterns, from a simple headline reveal to a scroll-scrubbed film, with code you can adapt, a rule for choosing between them, and the performance and accessibility checks that keep them fast.
Written by AmJ, founder of Scrollhaus, and edited by the Scrollhaus editorial team. Sources and methodology are documented in the article.
Key takeaways
Disclosure: ScrollHaus publishes this guide and links to its own working examples. Other resources are described from their public pages, read on October 5, 2026.
What makes a good animated hero section?
A good animated hero section does three things in the first two seconds: it states what the page is, it gives one clear action, and it shows motion that supports the message instead of competing with it. A hero that moves constantly can look impressive in a demo and tiring in real use. Treat motion as punctuation, not wallpaper.
The eight patterns
1. Headline reveal
Words or lines rise into place on load. It is cheap, readable and works everywhere.
.hero h1 span{display:inline-block;opacity:0;transform:translateY(40%);
transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1)}
.ready .hero h1 span{opacity:1;transform:none}
.hero h1 span:nth-child(2){transition-delay:.08s}2. Gradient text shift
A slow colour sweep across the headline. Keep contrast high at every point of the gradient.
3. Video background loop
A muted, looping video behind the text. Compress it, give it a poster image, and pause it for people who prefer reduced motion.
4. Animated gradient or shader background
A canvas or CSS gradient that drifts. It is lighter than video but can still cost battery, so cap the frame rate on phones.
5. Parallax layers
Foreground and background move at different speeds as you scroll. Use it with two or three layers, not ten.
6. Cursor-reactive hero
Elements follow or react to the pointer. It does nothing on touch screens, so never hide key content behind it.
7. Pinned scroll hero
The hero stays fixed while content changes as you scroll, which lets one screen tell a short story.
8. Scroll-scrubbed film hero
A sequence of frames is drawn to a canvas according to scroll position, so the film plays forwards and backwards under the wheel. This is the most cinematic pattern and the most demanding one, because it needs sharp frames and careful loading. Working examples are in the ScrollHaus library, for instance the VORTA and MOIRÉ pages, which pair a scrubbed film with captions and counters tied to the scroll.
How to choose a pattern
| You want | Use | Cost |
|---|---|---|
| Fast, safe, readable | Headline reveal | Very low |
| Mood without video weight | Gradient or shader background | Low to medium |
| Product feel | Video background | Medium to high |
| Depth | Parallax layers | Low to medium |
| A story on one screen | Pinned scroll hero | Medium |
| A signature moment | Scroll-scrubbed film | High; needs optimised frames |
Reduced motion and accessibility
@media (prefers-reduced-motion: reduce){
.hero *{animation:none!important;transition-duration:.01ms!important}
.hero video{display:none}
}- Keep text over moving backgrounds at readable contrast.
- Never autoplay audio.
- Do not hide navigation or the main action behind an animation.
- Make sure keyboard users can reach everything the pointer can.
Performance rules
- Animate
transformandopacity; avoid animating layout properties. - Compress video and images, and ship a smaller version for phones where quality allows.
- Load the first frame or poster immediately and the rest in stages.
- Test on a mid-range phone with the cache cleared.
Our scroll animation performance guide covers these in detail.
Where to find animated hero sections
- Component libraries: 21st.dev lists many community animated hero components, and Magic UI, Aceternity UI and React Bits offer hero-style sections and effects. See our comparison of the four.
- Prompt libraries: MotionSites sells hero prompts for AI builders. Our review covers what it offers.
- Complete templates: the best animated website templates guide covers full pages, and the ScrollHaus library lets you scroll each one live first.
Design details that make a hero feel finished
Three small choices separate a polished hero from a demo. First, hierarchy: one headline, one supporting line and one button, with generous space around them. Second, timing: let the headline arrive first, the supporting copy a beat later, and the button last, so the eye follows the order you want. Third, restraint: if the background already moves, keep the foreground still. A creative hero can still be clear; an interactive one should still work when the interaction never happens, such as on a phone or with a keyboard.
Build it with an AI tool
Describe the pattern, not just the look: "full-screen hero, headline words rise on load, one background video, text readable at all times, respect reduced motion, mobile first". Then iterate one change at a time. The step-by-step guide to making an animated website with AI walks through the whole workflow.
Explore animated website templates at Scrollhaus →
Need help with a template, account, or project? Email admin@scrollhaus.ai.