Kinetic Typography
kinetic-typography Light — runs anywhereThe 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
- The current word is the mouth — the spoken word is drawn large and centred, stretched vertically by audio energy and widened by the ee vowel — the type itself articulates
- A drifting trail of what was just said — up to seven past words rise and fade over 3.5 seconds, so a listener can catch up on the last sentence at a glance
- Emphasis pops gold — a word ending in "!" or written in CAPS is drawn 35% larger in the emphasis colour
- Eyes that blink and track — two dots above the words follow gaze and flatten into dashes on a blink — the only face geometry it has
- A smile arc that carries sentiment — a single curve under the words bends with emotion and decays back to neutral on its own
- It reads the words it is saying — sentiment is inferred from the text itself — "great/perfect/glad" lifts the smile, "sorry/unfortunately/problem" lowers it, a question mark raises curiosity
- State written in colour — green speaking, blue listening, amber thinking, red interrupted — the state is legible without reading a word
- Honest when there is no transcript — with no words to show it falls back to an audio-reactive pulse rather than inventing text — it never fakes speech
- Legible at any size — everything scales from the canvas width, so it reads on a watch face and on a wall display alike
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 box | 375×667 | 1440×900 |
|---|---|---|
| cold mount → first frame | 564 ms | 422 ms |
| rAF fps — idle | 59 | 60 |
| rAF fps — speaking | 60 | 58 |
| CPU cores busy — idle | 0.29 | 0.46 |
| CPU cores busy — speaking | 0.36 | 0.49 |
| worst frame gap (p95) | 16.8 ms | 16.8 ms |
| over the wire | 299 KB | 299 KB |
| JS heap | 10 MB | 10 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
Try it
/alive-site/universal-stage.html
A real sealed package (739 B) — the portable formatopen/alive-site/demo/kinetic-hotpink.alive.json
Honest limits
- Its entire portable identity is two colours. The shipping sample package is 739 bytes and its whole payload is an emphasis colour and a trail ink — there is no character to carry.
- Without a transcript it is not a face. Give it audio but no words and it degrades to a pulsing dot — honest, but far less than the other five offer in the same situation.
- No brows, no lids, no mouth shape, no head motion — two dots and a curve. It is a typographic instrument, not a character.
- The red "error" colour is unreachable. The adapter only admits the five agent states, so the error entry in its colour table can never be selected.
- Only the last seven words survive, for 3.5 seconds each — it is a rolling window, not a transcript you can read back.
- Keeps animating when scrolled off-screen. Only the SVG engine pauses on offscreen/hidden; the shared frame driver re-arms its rAF loop unconditionally, so a card scrolled out of view still costs what the table says.
- You cannot load this engine alone. The mount contract statically imports every 2D engine, so ASCII, Sketch, SVG and Kinetic each pull the same ~299 KB module graph — measured byte-identical across all four.
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.