Skip to main content
Your agent already follows HyperFrames’ motion rules: elements land and hold still, moves overlap, cuts happen mid-motion. Use this page when you want to steer it: what to say when the motion feels wrong, and the ideas worth asking for by name.

​
Fix motion you don’t like

Watch the video once, then tell your agent what you see in plain words. These phrasings work: Give a timestamp when you can (“at 4.2 s”). Ask for one change at a time and watch again.

Practice it: Timing

Free 16-minute lesson with a short video, a quiz and a brief to try. A beat is a change on screen with a time: a word appears, a card leaves, a cut lands.

​
Ideas worth asking for

Each idea below has a side-by-side film: the same scene built twice, where the only difference is one line of the prompt. Left is without, right is with.

​
Move only what is live

Once something lands, it holds still. What keeps moving is what is actually changing: a live number, a feed, a progress bar. Don’t ask for “subtle breathing” to make a scene feel alive; it reads as generated.
The panel lands by 1.9 s. After that, only what the feed changes moves: a reading arrives every 300 ms, the last digits change, the sparkline extends one segment, LAST SYNC restamps. Nothing else moves.
Left: the whole panel freezes at 2 s, so it looks like a dead connection. Right: only the readings move, and the rest is still.

​
Move the camera to get somewhere

A camera move earns its place by travelling between things, so the viewer sees they live in one space. A slow creeping push-in for its own sake does not.
Lay the five pipeline stages out 640 px apart, wider than the frame, and move the camera across the whole run. A packet runs the wire and lights each stage as it arrives.
Left: five stages cross-fade in one spot. Right: you travel to each one, and the neighbours stay in view.

​
Overlap, don’t queue

The next element starts while the last is still settling. Stagger things that happen in sequence. Things that already existed show up together.
The rollout spreads outward from us-east-1, reaching each region 0.09 s apart in order of distance. Each region’s 0.5 s ignite is still running when the next three begin.
Left: twelve regions light on one frame, so you can’t tell where it started. Right: it visibly spreads.

​
One idea per move

Combine properties only when they say the same thing. Rising and fading in says “arriving”. Adding a spin and a zoom makes text unreadable mid-flight.
The confirmation sheet rises 470 px over 1.2 s while fading in. Rotation, scale and blur are never touched.
Same travel and timing. Left: “Payment confirmed” is a tilted smear. Right: readable the whole way up.

​
Weight for physical objects only

Overshoot says “this has mass”. Use it on things that have weight, like flaps, cards and characters. Never use it on text, UI or numbers: a counter that flies past 42 and falls back shows a number that was never true.
The split-flap plates swing past their rest position and settle; the housing recoils when they land. The gate number never overshoots 42.

​
Depth: near things move faster

Far layers move slower than the camera and near ones faster. One blurred foreground object passing in front of the content is the strongest depth cue. A second one is clutter.
The horizon row moves at a fifth of the room’s rate, the racks at full rate, and one near column sweeps past at six times, blurred, crossing in front of the headline.

​
Pace to the format

A showreel gives each idea 1–4 seconds; a product demo holds one framing for 7–10 seconds while the UI works. Stretching a 2-second idea to 8 seconds feels slow however well it moves.
Showreel pace: 1.1 s per beat, cutting hard, all three beats delivered by 3.3 s.

​
Handmade, still deterministic

For a stop-motion or hand-animated feel, ask for movement that steps between held positions, with the irregularity coming from a seed. Every render must give the same frame at the same time, so unseeded randomness is not allowed.
Paper-cutout shapes on visible wires, like stop-motion. Seed a random offset per element (same seed every render) and hold each position for exactly two frames, quantized on the frame index.
Rendered from the prompt above, unedited. Two renders came back byte-identical. Say “two frames”, not “0.067 seconds”: a hold measured in seconds drifts into uneven one- and three-frame steps.

​
Between scenes: transitions

A good transition is caused by something on screen: the camera zooms through a button into the next screen, a card grows until it becomes the next scene, the background floods a new colour while the subject stays. Ask for that kind of handoff and the agent builds it. Use 3–5 kinds in a film, each where it fits, and never a dissolve between two unrelated scenes. To pin a specific effect, name a block from the catalog and the seam it goes on:
Six-scene SaaS explainer. Use whip-pan between related points, and one cinematic-zoom into the final pricing reveal. About 0.4 s each.
Rendered from the prompt above, unedited. Shader blocks warp and morph both scenes pixel by pixel; use them when the handoff itself is a moment. CSS blocks are lighter and fit ordinary scene changes. All of them are in the catalog; a name that isn’t there (page-curl) leaves the agent guessing. Don’t ask to fade one scene out and then fade the next one in. It renders as a jump cut with a dip in the middle. The transition is the exit: ask for “cross-warp-morph from scene 1 to scene 2”.

Practice it: Camera and transitions

Free 16-minute lesson with a short video, a quiz and a brief to try. Name the cut: a hard cut is an instant switch, a match cut carries a move across it, a zoom cut pushes in and pulls back.

​
Words for how motion feels

Describe how motion should feel and the agent picks the matching GSAP ease: Timing shorthand: fast (0.2s) = energy, medium (0.4s) = professional, slow (0.6s) = luxury, very slow (1–2s) = cinematic. Each word, rendered — the same move, only the ease changes: