Moves

A move is a named piece of motion to copy into a page, with a CSS or Web Animations snippet and a one-second clip.

A move is a named piece of motion that you copy into your page. Each move is one markdown file in prompts/moves/ with a snippet of 10 to 40 lines, a Sound: line and a one-second clip. The library has 130 moves in seven groups.

Why they exist

An agent that writes motion from memory writes the same few moves: a fade up, a scale in, a slide. A move gives the page a proven version. Its curve is an EASE name from core/motion/presets.js, never a hand-fitted cubic-bezier(). Choose a move from its clip, not from its name.

A move is copied, not imported. The page owns the numbers after the copy.

Use a move in a page

Open the gallery at vawe.dev/video-components. Each card plays the clip. Pick the move whose clip shows the job you need.

Read the move file prompts/moves/<move>.md. Its first paragraph starts with “Use when”.

Copy the snippet into the page and keep its numbers. The snippet delays start at 0, so add the start of your beat to each delay. Name each beat time once, for example --beat-2: 1.60s.

Copy the Sound: line too. It names a voice and the second to cue it, or says “none”.

Draft only the seconds you changed. See Draft.

bin/vawe dev films/<name>/page.html --from 2 --to 6

Each clip comes from prompts/moves/demo/<move>.html. The snippets name classes from demo/demo.css: copy the classes that you use.

Two rules the snippets already follow

Keep both when you change a snippet.

An exit keyframe has no from. A from fills backwards over the entrance and hides it.
var() never goes inside the animation shorthand. Write the longhands. Chromium drops the whole declaration otherwise.

The seven groups

prompts/moves/README.md lists every move in seven groups, and a “Pick by job” table.

group	moves	the job
Reveal a title	25	Type enters the frame.
Change between shots	38	The seam between two beats.
Point the eye	7	One word or one UI part gets attention.
Move the camera	16	The camera, focus and exposure of a world.
End a film	10	The last beat.
Product moments	21	A product does one real thing.
Grounds	13	A living ground, plus a few loops and photo effects.

The gallery shows five moves first: marquee-along-path, lens, counter-dive, ticker-takeover and shape-trace-morph. A featured clip has a median blind score of 8 or more from three reviewers.

The moves

Each name links to its clip and notes on the site.

Reveal a title

Type enters the frame: a title, a command, a caption or a changing word.

move	what it does
`mask-rise`	A line rises from under an invisible edge.
`tracking-collapse`	Letters converge from wide spacing while the word sharpens.
`caret-typing`	A command or name is typed, and the caret becomes the next element.
`letter-stagger`	A word lands letter by letter, 45 ms apart.
`scale-punch`	The hero word hits from 1.4x and recoils.
`flap-resolve`	Each letter is a tile that flips through glyphs and locks.
`word-swap-slot`	One word in a held sentence rolls through values and lands.
`blur-word-cascade`	Copy resolves word by word from blur, with no mask.
`text-as-mask`	The type is a window onto a moving picture.
`outline-fill`	A word arrives as an outline, then an accent fills each letter.
`strikethrough-replace`	An old value is struck out and the new value rises beside it.
`grid-stagger-wave`	A title arrives with a wave of tiles around it.
`text-scramble-decode`	A line of wrong glyphs locks, left to right, into the name.
`ticker-takeover`	The real answer crashes in over a cycling line.
`anchor-cycle`	One phrase stays pinned while a tape of words cuts beside it.
`lower-third`	A name plate and a role line for a person on screen.
`liquid-displace`	A title bent by moving water settles to sharp type.
`echo-trail`	One element flies in with five fading copies behind it.
`caption-karaoke`	The spoken word lifts to full ink and a pill glides along.
`caption-editorial`	Key words in an italic serif, with one caption replacing the last.
`variable-weight-wave`	Weight and width of a variable face crest letter by letter.
`text-on-path`	A line of words rides an SVG path.
`vertical-cut-reveal`	Characters, words or lines rise from under hard clip edges.
`letter-swap`	A word rolls letter by letter, forward, back or in random order.
`letter-3d-swap`	Each character is a cube that turns to the next face.

Change between shots

The seam between two beats. Each move names what carries the eye across the cut.

move	what it does
`cut-on-motion`	A moving shape carries the eye across a hard cut.
`push-blur`	A panel pushes in with a blur that follows its speed.
`exit-fast`	Arrive fast and land soft; leave faster and shorter.
`chain-beats`	Beats overlap and one element hands off.
`whip-pan`	A fast sideways pan hides the seam in blur.
`match-cut`	One shape crosses the cut and changes meaning.
`iris-wipe`	A circle closes on the mark and uncovers the next world.
`stack-cover`	The next panel slides over the last one.
`split-reveal`	Two halves part like doors onto the next shot.
`slice-shift`	Bands slide off in turn and uncover the next shot.
`type-fill-transition`	A word scales into one letter and its colour becomes the next ground.
`color-block-wipe`	A brand-colour block sweeps across the cut.
`zoom-through`	The camera dives into a UI part and the next shot comes out.
`speed-ramp-freeze`	Story time slows to a near hold before a change.
`speed-ramp`	Both sides of a cut move at the same speed.
`liquid-wipe`	A gooey edge floods the frame onto the next shot.
`grid-tile-flip`	A wall of tiles flips in a wave to the next shot.
`luma-matte-dissolve`	The next shot arrives through its own brightness.
`smear-stretch`	Shot A stretches into streaks and shot B snaps back.
`shape-morph-wipe`	The next shot grows out of a shape on screen.
`spin-transition`	A 90 degree camera roll carries the cut.
`swipe-continues`	A card swipe continues as the next world arrives.
`drop-and-land`	An action in world A lands in world B.
`spin-rotation`	A loading spinner hands over to the loaded screen.
`counter-dive`	The camera enters a title through the hole of an o.
`thumbnail-grid`	The world shrinks into a thumbnail that is the next world.
`light-leak-transition`	Warm light layers swell over the cut.
`type-match-cut`	One word holds its place while the frame cuts around it.
`cursor-spotlight`	A click opens the next screen inside a growing circle.
`toggle-horizon`	A toggle track stretches into the horizon of the next world.
`progress-timeline`	A progress bar stands up into the scrubber of a timeline.
`avatar-world`	A round avatar grows until its art is the next ground.
`glow-record`	An alert badge floods the frame and becomes a live state.
`highlight-sweep`	A highlight grows into the ground of the next panel.
`shadow-handoff`	A card shadow darkens into the ground of the next world.
`word-portal`	A typed word grows and the next world shows through its letters.
`underline-road`	A headline underline bends down and becomes a route on a map.
`caret-door`	The caret grows into a door that turns open on the next screen.

Point the eye

One word or one part of a UI gets the viewer’s attention.

move	what it does
`word-sweep`	The accent runs word by word and stays on the target.
`weight-morph`	One word gets heavier on a real variable-font axis.
`marker-highlight`	A highlighter bar wipes behind one phrase.
`underline-draw`	A line draws under the key word.
`bracket-callout`	Corner brackets snap onto a word or a UI part.
`spotlight-dim`	The frame dims around one target.
`hand-drawn-notes`	Margin notes: a circle, an arrow and an underline, drawn on.

Move the camera

The camera, the focus and the exposure of a whole world.

move	what it does
`ui-focus-zoom`	Zoom onto one part of a captured UI.
`caret-follow`	The camera trails the typing caret on a soft spring.
`pull-back-reveal`	Open tight on a detail and pull back to the whole.
`parallax-dive`	The camera flies forward through layers at real depths.
`exposure-flash`	A cut reads as over-exposure: three white frames.
`lens`	A screen filmed as a real object. See Lens and effects.
`camera-moves`	Push, pull and whip for a whole world as one wrapper.
`depth-resolve`	Far words resolve as the camera arrives.
`scale-through`	Fly into a plain element and its colour is the next world.
`direction-wipe`	A mask edge moves the way the last move went.
`arrival-spring`	A small overshoot on one arrival in three, a big one on the key arrival.
`rack-focus`	Focus moves from one depth layer to another.
`drift-hold`	The line holds still while only the ground drifts.
`gradient-mesh-field`	Four soft colour pools drift behind a title.
`pan-stations`	The camera pans between stations on one wide canvas.
`crash-zoom`	A 0.13 s slam to 2.6x with real zoom blur.

End a film

The last beat: a mark, a name, a call to action.

move	what it does
`logo-sting`	The mark lands, a light band crosses it and the word opens.
`wordmark-cascade`	Letters fall onto a rail and the full stop lands last.
`mark-trace`	A line mark draws itself with a riding tip.
`shape-trace-morph`	An outline draws on, fills and morphs into the brand mark.
`calm-lockup`	Logo and line settle slowly while two lights drift.
`cta-pop`	The call to action pops in under its line.
`thanks-sweep`	A closing line sweeps in on a soft mask edge.
`ui-strip-away`	The UI leaves layer by layer and the brand mark remains.
`logo-wall`	Three lanes of logo cells slide in as proof.
`cta-morph-press`	One plate becomes a button and a cursor presses it.

Product moments

A product doing one real thing: a click, a chart, an agent, a diff.

move	what it does
`clip-expand`	A panel grows out of one point.
`cursor-click`	A cursor travels to a control and presses it.
`count-up`	Digit wheels roll to a number, then a delta chip and a sparkline.
`card-assemble`	A UI card builds part by part.
`notification-pop`	A banner drops in, holds and leaves faster.
`chart-build`	Gridlines draw, bars rise and the newest bar turns accent.
`before-after-wipe`	One card in two states with a scan line between them.
`skeleton-reveal`	Grey blocks shimmer, then resolve into real content.
`ai-stream-response`	A prompt is sent and the answer streams in chunks.
`overwhelm-collapse`	A flood of cards collapses into one fix.
`success-check`	A button resolves into a drawn check.
`integration-hub`	Tool logos land on a ring around the product mark.
`device-tilt-stage`	The UI on a CSS 3D laptop that rises and settles.
`command-palette-summon`	A Cmd+K palette drops in, a query types and Enter runs.
`gooey-filter`	Shapes that touch merge into one soft outline.
`agent-progress`	An agent works through steps that flip to checks.
`panel-live-sync`	An edit in a panel and its result in one frame.
`terminal-run`	A coding agent works in a terminal that steps, never eases.
`approval-gate`	The agent asks before it acts.
`model-picker`	A pointer opens a model menu and picks one.
`diff-card`	A pull request diff builds and the badge becomes Merged.

Grounds

A living ground for a held frame. The group also holds a few loops and photo effects.

move	what it does
`aurora-drift`	Three soft bands of light fold slowly in one shader.
`grain-field`	A tonal ground with film grain seeded from the seek time.
`halftone-field`	A 45 degree dot screen whose dot size waves.
`ink-warp`	Marbled ink flows behind short, large copy.
`dot-grid-wave`	A plain SVG dot grid with one travelling wave.
`light-pool`	One soft pool of light wanders on a seeded path, in plain CSS.
`marquee-along-path`	Tiles ride one SVG path at an even gap.
`simple-marquee`	Three rows of tiles slide for a whole beat.
`circling-elements`	Eight tiles orbit one point.
`css-box`	A cube of type turns to another face on a stiff spring.
`pixelate-svg-filter`	A photo breaks into blocks and clears again.
`photo-particles`	A photo is sampled into lit points that gather.
`media-between-text`	A picture grows inside a line of type and the words part.

From a move to a film

A move is one second. A recipe joins moves into a short film. prompts/moves/RECIPES.md has fifteen recipes. See Recipes.

Render a clip again

The web copy of each clip is site/public/moves/<move>.mp4. The masters are not in git. To render the master of one move, run this command in a vawe checkout.

bin/vawe moves --only weight-morph

The verb renders the clip to prompts/moves/<move>.mp4 at 1280 px and 60 fps, and writes a 12-frame contact sheet to out/moves/<move>-sheet.png. Without --only, it renders the clips whose demo, demo/demo.css or imported core/ files changed. --all renders every clip.

Limits

A move does not check your page. The checks of dev do that.
Some moves are “once per film”: logo-sting, wordmark-cascade, mark-trace, shape-trace-morph, calm-lockup, thanks-sweep, chain-beats, rack-focus and skeleton-reveal. Each move file says so.