Motion that explains, not decorates
Most hero animations exist to look busy. Here are the three questions I ask before anything on a page moves, with the Agentic hero as a worked example.
When Agentic asked me for a new hero, the brief was a single line: show how we work. The studio shapes brand identities and ships them as Webflow sites, and their old hero was a static screenshot of a finished project. It was pretty, and it said nothing about the process that got them there.
The easy answer would have been a showreel: thirty seconds of logos flying past. I've made those before, and I've watched the analytics afterwards. People wait for the loop to end, then scroll past without remembering the studio's name.
Start with the sentence, not the motion
Before I open a timeline, I write down the one sentence the animation has to say. For Agentic it was: an identity and a website, made in the same place. Every frame of the final hero exists to make that sentence true. The canvas fills in, a layer panel appears, a comment lands on a headline, and the logo settles into a live page. If a beat didn't serve the sentence, it was cut.
Three questions before anything moves
- What changes? Motion is a change of state. If I can't name the before and the after, there is nothing to animate yet.
- What should the visitor understand afterwards? A reveal that only says "this paragraph exists" can usually be a simple fade, or nothing at all.
- Would it still work as a still frame? Plenty of people never see the animation: reduced motion, slow phones, a quick scroll. The resting state has to carry the message on its own.
If an animation can be removed without losing any information, it was decoration. Decoration is allowed, but it should be cheap, quiet and short.
Timing is part of the copy
I treat durations the way I treat words. The hero sequence runs for just under four seconds, and the most important beat, the logo landing on the page, gets the longest pause. Everything after the first screen is faster: reveals at 0.8 seconds, hovers at 0.3. The page speeds up as the visitor commits to it.
The whole sequence is built from real markup, not a video. That was the decision the Agentic team cared about most: when a project changes, they edit a frame in Webflow instead of asking me to export a new file. Motion that explains is also motion someone else can maintain.
Since then I run the same three questions on every project, even the small ones. Most of the time they remove animation rather than add it, and the pages feel calmer and faster for it. The few things that do still move tend to be the ones people mention afterwards.
