9 Animated Hero Section Examples You Can Copy (With Prompts)
The hero is the first thing anyone sees — and motion is what makes it stop the scroll. Here are nine animated hero sections worth stealing, and the prompts that rebuild them in minutes.
The hero section is the single most important block on any landing page. It is the first thing a visitor sees, and it decides — in about a second — whether they keep scrolling or leave. Static heroes still work, but motion is what stops the scroll. A drifting gradient, a looping product shot, a 3D object that reacts to the cursor: these are the details that make a page feel expensive.
Below are nine animated hero patterns worth copying, grouped by the kind of motion they use. Each one links to a live, paste-able version in the Butter archive — copy the prompt, drop it into your AI builder, and change the words.
Motion-background heroes
The most reliable way to add life to a hero is a full-bleed looping video or animated gradient behind your headline. It works for almost any industry because the text stays readable while the background carries the energy.
- Vesper — a dark, cinematic hero where the headline floats over a slow-moving field of light. This is the template to reach for when you want "premium AI product" in one glance.
- Auren — a warmer take, with an organic gradient that breathes behind clean type. Great for clean-energy, wellness and sustainability brands.
The rule with motion backgrounds: keep the motion slow. Fast movement behind text fights the reader. Slow movement feels like atmosphere.
3D and depth
If you want the hero itself to be the product, put a three-dimensional object at the center and let it rotate or respond to scroll.
- Vektis Lab — a lab-grade hero with a rotating centerpiece and precise, technical type. Perfect for hardware, science and developer tools.
Depth reads as craft. Even a subtle parallax — foreground moving faster than background — makes a flat page feel built rather than assembled.
Scroll-reveal heroes for SaaS
Software landing pages have a different job: they need to explain a product fast. The best SaaS heroes animate on scroll, revealing the interface or a value proposition as the visitor moves down.
- Synapse — a dark SaaS hero where the dashboard assembles itself as you scroll.
- Taskora — a brighter product hero that leads with the app UI and a single, confident call to action.
- Lead Funnel — a conversion-first hero built to move visitors straight into a signup.
How to actually build one
You do not need to hand-code any of this. Every design above exists as a prompt:
- Open the design and copy its full prompt.
- Paste it into Claude, Cursor, Lovable, Bolt or v0.
- Swap the headline, colors and images for your brand.
The motion, layout and assets come pre-built and self-hosted, so the result is fast and yours. Browse the full library of animated designs to find the exact hero that fits your product.
Frequently asked
An animated hero uses motion — a looping video background, a 3D object, a scroll-triggered reveal, or drifting gradients — instead of a flat image. The movement draws the eye and signals that the product is modern and alive.
Only if built carelessly. The trick the best sites use is to load motion lazily and let just the visible section play, so the page stays fast. Every Butter prompt ships with the assets self-hosted and sized for the web.
Copy the prompt for the design you like, paste it into Claude, Cursor, Lovable, Bolt or v0, and change the copy and colors. The structure, motion and assets come out of the box.
Build it in minutes, not weeks
Every design on Butter is a copy-paste prompt with the motion and assets built in. Browse the archive and ship your next hero today.
Browse the archive