Drive this engine live: open the Kinetic Type seat on the Test Bench →

Kinetic Typography

kinetic-typography Light — runs anywhere

The transcript is the face — the word being spoken IS the mouth, stretching with the voice, while older words drift up and fade.

A 2D canvas drawing text and two dots. There is no face geometry to rebuild, which is why it is the cheapest of the four canvas engines.

What it can express

Moods: 25 protocol moods folded into its own bounded emotion carrier plus four mood-family tints that shift the state colour. State stays the primary signal — emotion is a layer over it, never a sixth state.

What it costs a device

measured on this box375×6671440×900
cold mount → first frame564 ms422 ms
rAF fps — idle5960
rAF fps — speaking6058
CPU cores busy — idle0.290.46
CPU cores busy — speaking0.360.49
worst frame gap (p95)16.8 ms16.8 ms
over the wire299 KB299 KB
JS heap10 MB10 MB

The cheapest of the four canvas engines: 0.29 / 0.46 cores against a 0.08 / 0.10-core empty page, 60 fps throughout. It draws text and two dots — there is no face geometry to rebuild.

Why light: It draws glyphs, two dots and a curve. There is no face geometry to rebuild, which makes it the cheapest of the four canvas engines and keeps it at 60 fps at both sizes.

Dials it really exposes today

emphasis colourthe pop colour for an emphasised word#rgb or #rrggbb; default #e9c46a
trailInk colourthe ink of the drifting past-words trail#rgb or #rrggbb; default #8fa0c4
restyle(payload)the package-drop door — re-colours a live face from an untrusted payloadreturns false if nothing applied
style()reads the current two colours back out, so a look round-trips into a package{emphasis, trailInk}
setTranscript(word)the primary input — each word becomes the mouth in turntrimmed and truncated to 24 characters
seal → .alive.jsonexports the look as a portable package through the real seal doorstyle section + a name
live colour pickersthe Universal Stage exposes both colours as pickers plus a name fieldtwo colour inputs, 60-char name

Try it

Universal Stage — Kinetic with live colour pickers and sealopen/alive-site/universal-stage.html A real sealed package (739 B) — the portable formatopen/alive-site/demo/kinetic-hotpink.alive.json

Honest limits

Numbers are software-renderer numbers. Measured 2026-08-04 on the estate box (18 vCPU, load 2.8–5.3 during the run) under chromium_headless_shell-1232 + SwiftShader, 3 runs per cell, median reported. SwiftShader rasterizes on the CPU, so a real phone GPU changes the picture — most of all for 3D. Read the ordering between engines, not the absolute figures. Evidence for every claim: CARD-FACTS.md. Harness: work/measure-engines.mjs.