Motion

The kinetic typography presets, cut presentations, and shader stings, plus how each brand moves in its own personality.

Motion in Vawe is a vocabulary, not a set of sliders. You pick a named preset for how text enters, a named presentation for how one beat cuts to the next, and an optional named sting to cover a hard boundary. Each is a pure function of frame time, so it renders the same every time.

The craft rules behind these choices (timing as voice, ease out on entrances, one hero motion per beat) live in the repo at docs/MOTION-CRAFT.md. This page is the catalog.

Kinetic typography

Split a headline into units with split (char, word, or line), then animate each unit with preset. Units enter in reading order, staggered, and settle exactly at rest with a gentle overshoot.

There are 25 presets:

up · down · type · scale · blur · bounce · slide · wave (looping) · flip · fall · elastic · skew · focus · decode (scramble then resolve) · tilt · stretch · gradient (colour sweep) · highlight (marker band) · underline · shadow (poster lift) · riseClip (rise from a baseline clip) · draw (an SVG stroke drawing itself on) · chroma (RGB-split that settles crisp) · swing (pendulum from a pivot) · unfold (a 3D unfold to flat)

{
  "type": "text",
  "text": "Then it holds, deterministic.",
  "split": "word",
  "preset": "riseClip",
  "each": 0.5,
  "stagger": 0.05
}

Per-preset knobs go in presetOpts, for example gradient takes {c1, c2}, highlight and underline take {color}, blur and focus take {px}, tilt takes {deg}, and wave takes {amp, phase}. If a headline wraps past five lines, the engine auto-shrinks it so it never overflows.

Cuts and transitions

A cut is how a layer enters by moving the frame, used at beat boundaries. Set it on the layer:

{ "type": "component", "src": "hero.json", "cut": "whip", "cutTiming": "snappy", "dir": "left" }

There are 25 named presentations (plus none):

fade · slide · whip · punch · wipe · iris · clock · flip · rise · blur · zoom · cube · barn · softwipe · softiris · squeeze · roll · letterbox · drop · jitter · blinds · skewWhip · spin · collapse · riseBlur

Each cut takes a timing (cutTiming, default smooth): linear, smooth, out, snappy, pop, rush, brake, ramp. Directional cuts take dir (left, right, up, down), and iris / softiris take a centre with cx and cy.

Pick a cut you can actually see

A transition the viewer cannot perceive at its real size and duration is not a feature. Fast blinds slats read as a flicker, not blinds. When in doubt use a cut that reads clearly (a wipe, iris, or whip) at the duration you are giving it.

Shader stings

A sting is a brief WebGL effect that covers a cut at a boundary. Set it in the top-level stings array, keyed to a moment t:

{ "stings": [{ "t": 6.0, "fx": "glitch", "dur": 0.5, "seed": 7 }] }

There are 33 effects. Fourteen native: flash · burn · leak · grain · dissolve · ink · glitch · streak · pixel · confetti · ripple · scan · warp · bokeh. Eight shape wipes from gl-transitions: wipe · circle · blinds · squares · pinwheel · doors · polka · swirl. Plus eleven warp and chromatic effects: crossWarp · domainWarp · sdfIris · vortex · ridgedBurn · lens · thermal · whipPan · chromaticSplit · dispersion · gridPixelateWipe (a pixel-block curtain that sweeps the cut).

Each takes dur (0.3 to 3 seconds) and a seed. color tints the effect by luminance, intensity scales its strength, and leak accepts up to four colours in colors. Because a sting is keyed on (progress, seed) only, it is seek-safe and byte-reproducible.

Reach for a sting to cover a hard background jump at an act break, or a flash to punctuate a reveal.

Ambient shaders

Separate from stings, a shader layer paints a continuous WebGL field for the whole beat, pure in local time. There are 14 looks in two roles. Fields behind content (low track, low intensity): flow, aurora, plasma, drift, mist, and matrixDecode (digital rain). Overlay looks on top of content (high track, intensity ~0.6 to 0.9): vhs, crt, filmGrain, lightLeak, plus a distortion-styled set barrel, heatShimmer, ripple, kaleidoscope. Tune with speed, intensity, colors, and seed. Use it as atmosphere, not decoration; do not stack two.

Composite looks

A look is a named cinematic grade applied to any layer or group with filter. Where a sting covers a moment and an ambient shader fills a beat, a look colours the content itself: a stack of colour, glow, texture, and vignette passes resolved to CSS. There are 26: neon · dreamyHaze · halationFilm · angelic · hologram · glitchGlow · vhs · super8 · crt · filmNoir · fadedPolaroid · nostalgia · cyberpunk · nightVision · thermal · lomo · droneCinematic · vintageAnamorphic · impact · timeFreeze · glassWarp · heatWarp · melt · watercolor · dreamSequence · rippleGlass.

{ "type": "group", "filter": "neon", "children": [ /* ... */ ] }

A strength rides on the name ("neon:0.6"), and lookOpts overrides properties (many looks default their colour to the brand accent, so a look reskins per theme). strength works on every look; the other knobs (color, color2, colors, grain, vignette) depend on the passes that look is built from, and one it cannot apply is refused with a message rather than ignored. Reach for one look per beat, on real content, never as decoration on empty space.

Motion personality per theme

The same primitives move differently for different brands, because each theme carries a motion block: easing, bounce, settle, enter, durationScale, and stagger. A punchy brand snaps with a short settle and tight stagger; a calm brand dissolves with a long settle and no bounce. Leaving motion at defaults is shared DNA across brands, so set it.

The motion director can choose cuts and stings for you from a theme's personality:

make direct D=formats/scene/my-video.json          # dry run, prints picks
make direct D=formats/scene/my-video.json WRITE=1  # apply them

It covers hard background jumps with a sting, whips only when the background does not change, and rotates one cut family so a video does not repeat the same move.