Motion

Every item is made of named parts, and any part takes any move. The moves combine freely, or the engine choreographs the whole item from a mood and a seed.

volito info lower-third        # lists its parts: scrim, spine, plate, name, role
volito render lower-third \
  --motion name.in=typewriter --motion plate.in=iris --motion "*.ease=bouncy" \
  --motion role.emphasis=pulse@2 --motion spine.idle=pulse --out priya.mov

Settings

Setting	Takes
`in`, `out`	Any of the 36 moves below. An exit plays its move backwards; `out=none` stays to the end.
`ease`	`brand` `linear` `in` `out` `inOut` `smooth` `sine` `expo` `back` `elastic` `bounce` `snappy` `punchy` `bouncy` `calm` `gentle` `wobbly` `stiff` `spring(f,d)` `steps(n)` `cubic(x1,y1,x2,y2)`, or `spring(f,d)`, `steps(n)`, `cubic(x1,y1,x2,y2)`
`from`, `outFrom`	The side a move comes from or leaves to: `left` `right` `up` `down` `top` `bottom` `up-left` `up-right` `down-left` `down-right`
`dur`, `delay`, `at`, `outAt`, `distance`, `intensity`, `origin`, `blur`	Timing, travel, scale, pivot (`center` `left` `right` `top` `bottom` `top-left` `top-right` `bottom-left` `bottom-right`) and motion blur.
`idle`	A loop while the part holds: `none` `float` `bob` `pulse` `breathe` `wiggle` `sway` `drift` `jitter` `spin` `heartbeat` `shimmer`
`emphasis`	Hits at a time, a beat or a spoken word, `"shake@1.2, pop@now"`: `pulse` `pop` `shake` `jump` `wobble` `flash` `spin` `rubber` `tada`
`split`, `order`, `stagger`	Text whole or by `none` `lines` `words` `letters`, in order `forward` `reverse` `center` `edges` `random`
`keys`	Your own keyframes, any path: `[{"t":0,"x":-300,"op":0},{"t":0.8,"x":0,"op":1,"ease":"bouncy"}]`

The moves

Move	What it does
`none`	always there, no entrance
`appear`	cuts in at its time
`fade`	fades in
`rise`	rises into place
`drop`	drops into place
`slide`	slides in from a side (from: left \| right \| up \| down)
`smear`	slides in fast with motion blur
`arc`	swoops in on a curve
`pop`	springs up from half size
`zoom`	zooms up from small
`push`	settles down from big
`grow`	scales up from nothing
`grow-x`	grows across (origin: left \| center \| right)
`grow-y`	grows up (origin: bottom \| center \| top)
`unfold`	unfolds down from the top
`wipe`	wiped on from a side (needs the part's box)
`iris`	revealed by a growing circle
`shutter`	revealed in horizontal slats
`blinds`	revealed in vertical slats
`diagonal`	revealed by a diagonal sweep
`blur`	comes into focus
`flip`	flips down like a card
`turn`	turns in like a page
`spin`	spins in from small
`roll`	rolls in from a side
`swing`	swings down from its top edge
`skew`	skids in, leaning
`stretch`	jelly: stretched wide, springs back
`squash`	falls in squashed, springs back
`bounce`	falls and bounces
`elastic`	snaps in on an elastic
`slam`	slams down from big with a jolt
`tilt`	rises in tilted
`float`	drifts up gently
`glitch`	glitches in: RGB split, sliced, flickering
`flicker`	flickers on
`typewriter`	text typed letter by letter with a caret
`scramble`	letters scramble, then settle

Aliases: fade-in is fade, slide-up is rise, slide-down is drop, zoom-in is zoom, scale is grow, type is typewriter, reveal is wipe, motion-blur is smear, punch is push, jelly is stretch.

Moods and seeds

Or let it choreograph itself. A mood picks moves, timing and eases for every part; a seed gives a new take on the same mood, and the same number always moves the same way.

volito sheet title-card --mood playful --seed 7     # look at it first
volito render title-card --mood cinematic --seed 3 --speed 1.2 --out title.mov

Moods: energetic elegant playful cinematic glitchy minimal retro kinetic.

On the voice

Give a transcript and text lands on the words that say it: --words transcript.json takes [{w, s, e}] or Whisper JSON, and --offset 12.5 when the graphic starts 12.5 s into it. Hits can name a word too: emphasis=pop@launch.

In a program

Programs you write get the same kit. Ask for an animator and draw each element as a part; it then takes every move, mood and seed from the command line too.

function frame(t, $) {
  const M = motion($, t), k = $.k;
  const box = { x: $.W / 2 - 320 * k, y: $.H / 2 - 110 * k, w: 640 * k, h: 220 * k };
  return M.part("card", { at: 0.1, in: "pop", box }, $.card(box.x, box.y, box.w, box.h)) +
    M.text("title", { at: 0.3, in: "rise", split: "letters", ...$.font("display"), size: 80 * k, x: $.W / 2, y: $.H / 2 - 44 * k, anchor: "middle" }, "Hello");
}

M.part(name, options, markup) poses any markup; M.text(name, options, string) draws text that can split by lines, words or letters; M.progress(name, options) gives the eased progress of a part's entrance for things an item draws itself, like a counter or a line's length. volito api prints the whole kit; Write your own has the rest.