By Mehdi HassanThe hero is the most expensive real estate on your site, and animation there has two jobs that pull against each other: get noticed and get out of the way. The patterns below do both. They're drawn from common patterns on well-known SaaS sites and from how we build heroes, and each comes with implementation notes so the motion doesn't cost you speed. For the bigger picture, see our website animation rulebook.
What kinds of hero section animation work best on SaaS websites?
Hero section animation works best on SaaS sites when it shows what the product does in one short sequence beside a headline that's already readable. The motion is the proof for the headline's claim. If the headline says 'Turn support tickets into answers', the animation shows a ticket becoming an answer.
Pattern | Shows | Best for | Main risk |
|---|---|---|---|
Input to output | Raw data or a request turning into a result | AI, data and automation products | Too many steps to read |
Workflow assembling | Blocks or steps connecting in order | Workflow and integration tools | Looks like a generic diagram |
Before and after | A messy state becoming clean | Productivity and cleanup tools | Reads as a gimmick if exaggerated |
Live UI loop | A simplified product screen in use | Dashboards and collaboration tools | Dense UI unreadable on mobile |
Integration hub | Your product connecting to known tools | Platforms and connectors | Logo soup with no meaning |
Subtle ambient motion | Brand texture behind static content | Brand-led sites | Adds weight without information |
The first four explain. The last two mostly decorate, which is fine in small doses if they're light. When in doubt, pick the pattern that a buyer could describe back to you after watching it once.
How does an input-to-output hero animation work?
An input-to-output hero shows the thing a customer starts with, the product acting on it, and the result, in that order. It's the most direct way to prove a claim, which is why it suits AI and automation products where buyers are skeptical about what 'AI-powered' actually means.
Keep it to three beats. A prompt or file appears, a short processing state plays, and the output resolves and holds. Use real-looking but simplified content, with text large enough to read on a phone. If the result takes longer to read than three seconds, simplify the output rather than speeding up the animation.
A hypothetical example: an invoice automation tool
Hypothetical example: a fintech startup automates invoice processing. The hero headline says invoices get coded and approved without manual entry. Beside it, a simplified invoice card appears, three fields highlight one after another as the product reads them, a category tag and an approver avatar slide into place, and the card settles into an 'Approved' state that holds.
The first frame, a static invoice card, is served as an optimized image so it can be the LCP element. The sequence starts after the page has loaded, and under reduced motion visitors see the final approved card with all fields filled.
When should you use a workflow or integration animation?
Use a workflow animation when your value is the connection between steps or tools, and the order matters. Workflow builders, data pipelines and integration platforms can show blocks linking up, a trigger firing and data flowing to its destination. The animation turns an abstract 'connects your stack' claim into something visible.
The risk is that every workflow animation looks the same: boxes, lines and pulses. Make it specific by using your product's real node styles and the real tools customers connect, and show a concrete example rather than a generic flow. Integration hubs with orbiting logos are the weakest version; a single example connection, labeled, says more.
Do live UI loops work in a hero?
Live UI loops work when the UI is simplified and cropped to the part that matters; full product screenshots in motion usually don't. A real dashboard has navigation, sidebars and dense tables that turn into noise at hero size, especially on mobile. Redraw a focused slice of the interface and animate the one interaction that shows value.
This is where the format decision matters. A coded loop stays sharp and light, while a screen recording is quicker to make but blurrier and heavier. We compare formats in animated product demos, and the choice of whether the hero should show an image, a screenshot or video at all is covered in hero image vs video.
How do you build a hero animation without hurting LCP?
Serve a static first frame as the largest content, render the headline immediately, and start the animation only after the page has loaded. Largest Contentful Paint measures when the biggest visible element appears. If that element is a video that's still buffering or a canvas waiting for JavaScript, LCP suffers, and so does the visitor's first impression.
Render the headline as plain HTML
No entrance animation on the headline or primary button. They should be visible on first paint.
Use a static poster as the first frame
Export the animation's first or final frame as an optimized image, preloaded if it's the LCP element, and show it immediately.
Start motion after load
Begin the animation once the page is interactive, or when the hero is visible, so it never competes with critical resources.
Animate transform and opacity only
Move and fade elements; avoid animating layout properties or large blurs.
Lazy-load heavy assets
Lottie players, video files and 3D libraries load after the initial render, never in the critical path.
Ship the reduced-motion state
Under prefers-reduced-motion, show the final frame as a static image with no autoplay.
Font loading matters too: if your headline font arrives late, the text shifts just as the animation starts, and the whole hero feels unstable. Performance detail for scroll-linked heroes is in scroll animation performance.
Which hero animations should you avoid?
Avoid hero animations that move without meaning: floating abstract 3D shapes, cursor-chasing gradients, scrambling text and long intro sequences. They make a site look busy, cost weight and attention, and tell the buyer nothing about the product. They also tend to date quickly, because they follow visual trends rather than the product.
- Intro loaders and splash animations: every visitor waits, every time.
- Rotating headline words: an unstable message and a delayed read.
- Abstract 3D blobs: heavy, and they say nothing specific. If you want 3D, see when WebGL is worth it.
- Scroll-jacked hero sequences: visitors who try to scroll past get trapped.
The animation is only half the hero. The headline, subhead and call to action do most of the work, which is why we start with the words. Our guide to hero section design covers the copy and layout, and the landing page teardown shows a hero rewritten line by line.
