The problem this solves
Static heroes ask visitors to imagine the product working, and imagination is a lot to ask of someone four seconds into your homepage. The products that convert well above the fold tend to show the loop itself: the state before, the action, the result, playing out in front of the visitor without a video player or a signup wall. That kind of motion is common on the sites teams admire and rare on their own, because it sits in a skills gap.
The gap is specific: hero animation is front-end craft, and product engineers are the wrong people to pull off roadmap work for marketing polish. Video is the usual workaround and a poor one for this job - heavy to load, awkward to autoplay politely, and visually foreign against a designed page. A CSS animation is native to the page, light, and crisp at every screen size, but somebody has to design and build it, and that somebody has never been available. So the homepage stays still.
How the mission runs
- Find the core loop. Web Research reads your site and product pages to identify the single loop worth animating: the before-state a visitor recognizes, the action your product makes trivial, and the result worth wanting. One loop is the discipline; heroes that animate everything communicate nothing.
- Storyboard the three beats. The agent posts the storyboard in the thread: what the before looks like, what the click moment shows, how the result lands, and the timing of the cycle. You approve the story before any build, because the narrative is the asset and the animation is only its delivery.
- Build the animation. Design builds the approved storyboard as a pure CSS animation in your brand system: your palette and type, product-shaped elements drawn as crisp vectors, motion timed to read clearly on the first viewing and stay tolerable on the twentieth. No video files, no external players, no heavy payloads.
- Publish the live preview. The animation publishes as a self-contained page you can open and judge in the browser - full speed, real rendering, resizable to test phone and desktop behavior. Motion can only be evaluated in motion, so the review happens against the real thing rather than a description of it.
- Deliver the integration notes. The mission closes with notes for dropping the animation into your site: how the piece is structured, where it expects to sit in a hero layout, and what your developer needs to know about its footprint. Integration stays a small, well-documented task for your own team.
The prompt
This is the exact objective the agent receives. Swap the obvious placeholders for your own domain, segment or channel and run it as-is from the console, Slack, or the API.
What comes back
A finished CSS hero animation of your product's core loop - before, click, result - built in your brand system as a self-contained page you can preview live at full speed and test across screen sizes, plus integration notes covering structure, placement, and footprint for your developer. The piece is light, native to the page, and free of video files or external players.
Make it yours
- Animate a comparison instead of a loop: the old way and your way running side by side in one synchronized cycle, for products whose pitch is a replacement.
- Build a reduced-motion variant alongside the full animation, so visitors with motion preferences set get a considered static composition rather than a frozen frame.
- Point it below the fold: three smaller loop animations for a feature section, each cycling one capability in the same motion language.
Frequently asked questions
Why CSS animation instead of a video?
Because the hero is a page element and video behaves like a guest. CSS motion loads light, renders crisply at every size, respects the page's own palette and type, and needs no player chrome or autoplay negotiation. For a repeating product loop, it is the format that belongs to the medium.
How do revisions to motion work?
You react to the live preview - slower cycle, harder emphasis on the result beat, calmer easing - and the agent adjusts the build against the same link. Because the storyboard was approved before construction, revisions are refinements of an agreed story rather than restarts of it.
Will it slow my homepage down?
The piece is built to be light: vector shapes and CSS motion rather than video payloads or animation libraries, with its footprint documented in the integration notes. Your developer can see exactly what it adds before it ships, and the self-contained structure keeps it from touching anything else on the page.