How to make a silent hero animation for the top of your website

Last updated 2026-09-22 · 8 min read

What is the short version?

This is not a promo video that happens to sit at the top of a page. It is a moving background with a text-safe zone, no sound at all, and a loop that nobody visiting the site should ever be able to spot repeating.

1. Tell Vizard Agent where the headline and buttons sit.
2. Say it is silent, autoplaying and looping.
3. Ask for a short motion test before the whole thing is built.

What do you need before you start?

The logo, the page layout and a sense of the idea. Vizard Agent can build the concept, but a hero animation usually has one job — turning the brand mark into the thing the company actually does — and knowing that saves several rounds.

• The logo. Vector or high resolution.
• The layout. Which side the text sits on.
• The idea. What the motion should say.
• Reference images. The look you are matching.
• The length. Five to ten seconds, looping.

What do you type into Vizard Agent?

Say what the video is for, not just what it should show. "Hero animation" carries a set of constraints — muted, looping, behind text, on every page load — and naming them up front stops you receiving a perfectly good advert instead.

Prompt

Variants worth knowing:

• "Keep the left third clear." The text-safe zone, stated as a rule.
• "Looping." It changes the first and last frames.
• "Show me a motion test first." Cheap approval on the hard part.

What does Vizard Agent actually do?

Here is the Vizard Agent sequence on a hero animation where a consultancy's logo becomes the infrastructure the firm actually builds. The first deliverable is deliberately a seven-second motion test rather than a finished film, because that is where the idea either works or does not.

1. Reviews the supplied logo, the storyboard and every reference image.
2. Checks the animation tools for a stroke-based transition rather than distorting the whole logo.
3. Builds a clean scene with the routes on the right and a protected text area on the left.
4. Checks the composition for the route layout and the text-safe space.
5. Inspects the original logo before separating its strokes.
6. Matches each stroke to the road, railway and pipeline geometry in the scene.
7. Checks the route curves before animating anything along them.
8. Builds measured stroke paths and a route-alignment preview.
9. Confirms every animated highlight sits exactly on its assigned route.
10. Refines the railway alignment, then renders the seven-second motion test.
11. Reads the render error when the animation setup fails, and reduces its complexity.
12. Reviews the intermediate stroke shapes before rendering again.

Step two is the decision that makes the animation feel designed. Distorting a whole logo into a landscape is one instruction and it always looks like a warp; animating each stroke along a route it was already shaped like looks deliberate, because it is.

Step nine is the difference between an idea and an execution. The concept only works if the highlight travelling along the road is actually on the road — a few pixels off and the viewer sees a glow crossing a field.

Step three builds the constraint into the composition rather than checking it afterwards. The text area is protected from the first render, so nothing has to be moved later to make room for the headline.

What does the result look like?

A short silent loop, 1080p and light enough to sit at the top of a page: the motion on one side, clean space for the headline on the other, the last frame matching the first so the repeat does not jump, and nothing in it that competes with the words in front of it.

When does this not work well?

Some hero ideas do not survive being a background. Anything with fast movement, high contrast or text of its own competes with the headline, and anything that needs sound to make sense will not make sense at all.

• Fast or high-contrast motion. The headline becomes hard to read.
• Ideas that need sound. Hero videos autoplay muted.
• Text inside the video. Two headlines in the same space.
• Heavy files. A hero video has a page-weight budget.
• Mobile layouts. The text-safe zone is a different shape there.

How do you fix a result that came back wrong?

Say what in the animation is competing with the page. Vizard Agent can slow the motion down, reduce its contrast or move the action further away from the text, and each of those is a separate adjustment rather than a reason to start the concept again.

• "It pulls the eye off the headline." The motion is slowed and moved right.
• "The loop jumps." The last frame is matched back to the first.
• "The file is too heavy." It is re-encoded to a page-friendly size.
• "The highlight is off the road." The stroke paths are re-measured against the scene.

How does Vizard Agent compare to doing it yourself?

By hand a hero animation is a motion designer's week, and the constraint everyone forgets is the text-safe zone — the animation is approved on its own, then the headline goes over it and the composition has to be rebuilt.

Common questions

How long should a hero video be? Five to ten seconds. Vizard Agent builds it to loop at that length.

Does it need to be silent? Yes. Browsers autoplay muted, so Vizard Agent designs for no sound.

Can it loop seamlessly? Yes. Ask Vizard Agent to match the last frame back to the first.

What about mobile? Ask Vizard Agent for a second version with the safe area in a different place.

Can it use our brand colours? Yes. Give Vizard Agent the palette and it works within it.

Will the logo be redrawn? No. Vizard Agent separates the strokes of your own file rather than recreating it.

Can I see it before it is finished? That is what the motion test is for, and Vizard Agent renders one first.

How heavy will the file be? Tell Vizard Agent your page-weight budget and it encodes to it.

Can it be a still with light motion? Yes, and for a busy page Vizard Agent will often suggest exactly that.

What if our headline is long? Say so and Vizard Agent widens the protected area accordingly.

Can it include people? Yes, though faces in a background compete with the headline.

Does it work in 4K? Yes, but for a page header Vizard Agent usually recommends 1080p.

Can we use it elsewhere? Yes — Vizard Agent can export a version with sound for social.

What if the concept does not work? The motion test is where you find that out, cheaply.