A note on the making. This page was written for, with, and by AI: drafted by a language model working inside Walter OS, the system it describes, and shaped at every step by a deliberately designed human-in-the-loop. Nothing here reached you without my direction, reading, correction and approval. The human presence is architectural, not incidental. The content created, as featured in this page, is the same. My position on AI tools is that the productive use of them is building the instruments you work with, rather than solely generating the work itself. Nothing here was produced by prompting a model for video. The graphics were rendered frame by frame by code, and that code was written with sustained AI assistance: the instrument was built across weeks of working sessions with a language model as a coding collaborator (Claude, in this case), with me setting the direction, reviewing the result and throwing out what did not hold. That is where the leverage sat. It let me iterate faster on the tool, explore more of its range than I would otherwise have had time for, and learn the unfamiliar parts of it by making them, which is learning by doing and is how I have always worked and how I teach. Models also run inside the work itself, locally, deriving the word timings, loudness envelope and per-word weighting that drive the animation.
The brief: A Demo Festival submission starting point
Demo Festival's open call is strict, which is why I entered. 1080 × 1920, portrait, exactly ten seconds, 25fps, H.264, under 50MB, no titles, no credits, no audio. One vertical rectangle, 250 frames, silent, max five entries.
I did not set out to make a piece of type animation. I wanted an instrument and a few weeks of using it badly. Four works came out of that and went to the open call in July.
More than reading. More than watching
The premise is that a screen full of type is a field, not a headline. Most kinetic typography moves words through space with an emphasis on timing and readability and the viewer watches. I wanted the opposite: a frame packed edge to edge and layered, from a six-pixel texture tier up to a display tier. Step back and it is pattern. Step in and it is language.
That is a measurement problem before it is an aesthetic one, and it is where I leant on someone else's work. Pretext, by Cheng Lou, is a text measurement and layout library, and I think it is quietly revolutionary. Accurate text handling in a browser has always meant heavyweight layout machinery or the rough approximations that canvas metrics give you. Pretext does proper measurement, per character, at speed, in a few kilobytes, with no Document Object Model (DOM) and no reflow overheads. That combination did not exist before it.
I was keen to bring the responsive Web tech to kinetic type motion graphics. Type animation tends to run on either a design tool's layout engine or on a few crude assumptions about width, and both put a ceiling on how dense a moving field can get before it stops being typography. With exact placement available cheaply, thousands of words can be set and moved every frame and still be correctly set and respond to other elements and forms in its space.
That precision is load-bearing rather than convenient. The texture tiers only work if the tiny type is genuinely the same sentence, correctly set and still legible up close, just too small to read from where you are standing. Approximate placement at six pixels turns the field into grey noise and the premise collapses. Pretext is MIT licensed, very good and fun to play with.
Two systems then argue over the grid. One packs rows and slides them in strict horizontal bands. The other treats each readable word as a particle on a spring anchored to its slot, so a choreography is a curve describing how strongly the field wants to be in formation. Weak and the words scatter. Strong and the field locks. Released and it disperses. Order and disorder are one dial, and every motif is a shape drawn on that dial over ten seconds.
Between concrete poetry and atypography
Two positions sit either side of this work. Concrete poetry puts readable words on a page and lets the arrangement carry as much meaning as the words do. Structure is content, but you can still read it. What I have been calling atypography (adopted term from the emergent practice) in my own design systems makes the opposite move: type that keeps the behaviour of writing, the rhythm, the spacing, the line, while refusing to spell. The mark is present and the word is withheld.
I was aiming somewhere between the two, and I think that is roughly where these landed. The same frame reads as a poem at one distance and as an abstract sign field at another, and the cipher makes that crossing structural rather than metaphorical: the small type is not standing in for language, it is language, set correctly and out of reach.
I did not arrive at that position by planning it. It came out of building the engine and using it, which is the argument for making tools rather than pieces. An instrument like this is a machine for finding positions you would not have thought to occupy, and this one kept handing me frames that were legible and abstract at the same time until I stopped treating that as a problem to solve.
A kinetic type instrument
Each channel treats a property of type as something animated rather than set:
- Typographic choreography. Weight, tracking and leading move over the arc. Leading scales the springs' home positions, so compression and release are physical.
- Voids. The field parts around a hole: a circle, a constellation of geometric shapes, or a letterform, so text is bored through text with the counters still carrying type.
- Beat. A pulse swells one word and thins the field around it. Relief, not highlight.
- A second voice. A contrast face drawn from the design system's own hierarchy, used on charged words, alternate rows, or the display tiers.
- Semantic relief. Every word tagged for part of speech and a charge value, its weight offset from the field's by how much it is carrying.
- Dimension. The field wraps onto a rotating solid, or splits into depth layers the camera flies through, where a void becomes a tunnel.
- A curtain. A mosaic of stretched type behind the field, invisible until the foreground releases.
Not all of that is in these four pieces, which are flat and stay flat. The dimensional layer and the curtain are listed because they are part of what the instrument does and where it is going next, not because you see them here. What is running in the four is the choreography, a circular void, the beat, the second voice, semantic relief and the speech channels below.
Two rules held throughout. No new channel is allowed to change what the engine already made, which was proven each time by re-rendering an old specification against the previous code and comparing frames byte for byte. And the preview is the render: the same code drives the panel and the renderer.
The renderer is the same web page with no window on it. A script opens the page off-screen, steps the piece forward one frame at a time rather than letting it play, screenshots all 250 frames, and hands the stills to ffmpeg to encode as H.264 at exactly ten seconds. Nothing is re-implemented for output, which is why the preview can be trusted. Each render also writes a small sidecar file carrying the full state of the panel, so any experiment can be reloaded later and taken further.
Calling it an instrument rather than an engine is the distinction that mattered most while building it. Everything on the right is live: change a value and the stage on the left redraws, park the transport on a frame and turn knobs against a still image. Saving a preset is not clever, it writes the state of the panel to a file, but it is the difference between reopening a version and rebuilding it by hand. The four works came out of versions ten and eleven.
It runs as one page inside Walter OS, the personal memory architecture I have been building alongside this, which is why it sits in a browser rather than in a design tool. That was not the plan so much as the path of least resistance, but it turned out to matter: the thing that makes the piece is the same thing that files it, previews it, and keeps its versions.
Speech sets the pace
The largest addition was making the engine listen. A spoken track is analysed offline into word-level timings, a loudness envelope and speech onsets. The transcript then becomes the text of the field, so the flood is made of the words being spoken. The current word lights up wherever it occurs, rises as a marker block, and can be routed into the void to appear alone. Loudness moves the weight and tracking of the whole field. Onsets replace the metronome, so the pulse lands on speech rather than on a grid.
What that solved was readability. Pace in kinetic type is normally guesswork, tuned by eye until it feels right, which usually means too slow. Here it is inherited: a word holds long enough to be read because a speaker held it that long. It runs faster than I expected, faster than I would have set it by hand, and I left it alone. Speech is the honest clock, and slowing it down would have been flattery.
Then the festival brief demands the audio is taken away. The motion pieces are driven frame by frame by speech nobody hears, and what survives is its shape: the stresses, the hesitations, the word being motion-graphically said.
The script
The lines came from writing in the voice of children talking about their doubts, plainly and with more optimism than an adult may allow themselves. Doubt gets treated as a good sign rather than a failure. I pushed this as a call to action to viewers to be ok with doubt and to embrace it, and partly because it is my consistent state of mind and a reminder I don't give myself often enough. Sharing with others may brighten their day as they walk the streets and may get an opportunity to decode the message. Two lines from that set were used:
What if doubt is actually the smartest thing your brain can say?
What if doubt is just understanding, taking its time to arrive?
Each was rendered twice, in two cuts that differ in one decision: where the spoken word is allowed to appear. Good Doubt and Good Doubt Decode, then Doubt Good and Doubt Good Decode, the second pair turning the phrase over.
In the plain cut the field holds a circular void and the word arrives alone inside it. The sentence is everywhere as texture, and meaning surfaces one word at a time. In the Decode cut there is no void, and the word surfaces large in place, so the sentence has to be assembled by the eye from wherever it happens to be legible. One is a confession, the other a puzzle.
The key
I made a font for the system. The type is Semaphore, an 'atypography' the pieces are partly set in. Every character is a geometric sign derived by rule from its phonetic class, so a line of text sets as structure rather than spelling. Letters that sound alike look alike, which makes a sentence's rhythm visible before any of its words are:
- Vowels are circles. A filled, E a ring, I a dot, O a ring around a dot, U a bowl. Vowels are the pulse of speech, so the circles beat through a line at any size.
- Plosives are squares, and voicing is fill. P, T and K are solid, the air stopped. B, D and G are the same shapes opened up, the air flowing. T and D stand on a corner, K and G run small.
- Nasals and liquids are one bar at four angles. M horizontal, N vertical, L and R the two diagonals.
- Fricatives are triangles. F points up, V down, S and Z are their hollow counterparts, H points left.
- The remainder are composites. C an arc, J a hook and dot, Q a ring and tick, W twin triangles, X crossed bars, Y a bar and dot. English spells those sounds with borrowed letters, so the cipher builds them from primitives it already has.
The vocabulary is closed at six primitives and their fills: circle, square, bar, triangle, arc, dot. Anything new has to be a combination rather than a seventh shape, which is what keeps a page of it reading as one system. Upper and lower case map to the same signs. The alphabet is generated parametrically, so changing which sound class maps to which family re-renders the whole typeface.
This is the atypography working at full strength, and it is also where I did not get what I wanted. The intention was a genuine cipher and a decoding journey: a viewer meets an abstract field, notices that the same signs recur, works out that the circles are vowels, and arrives at the sentence themselves. Meaning earned rather than delivered.
Ten silent seconds will not carry that. The format asks for immediate communication, a viewer gets one pass with no sound and no title, and an alphabet that has to be learned first hands them nothing at all in the time available. Testing it made that obvious rather than arguable.
So the works run a mix instead. The field stays in signs, and the words carrying the sentence surface in a legible mono, which means the piece communicates on the first pass with fewer blockers while the structure maintains some abstraction. The decode is offered on this page rather than demanded in the work. At the smallest tiers you are still looking at pure signal: you can see that doubt is two circles inside a run of stops without being able to read it. I am not sure the full cipher version is impossible, but it is a different brief, probably a longer form or an installation where the viewer has time to sit with it. This is the compromise, made deliberately, and named as one.
Process
Built through June and July 2026 on a Mac, in JavaScript and Python, rendered headless, meaning the browser runs with no window on screen, at specification. The six motifs and the combined rows, grid and particle engine came first, then the dimensional layer, then time spent making the thing playable rather than merely capable: a transport you can scrub, a seed you can reroll, saved presets, specification sidecars. The cipher typeface and other test DIY fonts next. Then the listening layer took a few sessions to work out what it was good for. The four entries came out of eleven versions but would not have landed without many more versions and sessions leading to them.
Built with
There is no animation framework under this. No Remotion, no GSAP, no After Effects, no timeline. It is plain canvas drawing, a spring solver, and a clock, which is the only way the byte-for-byte rule above is even checkable.
What is not mine:
- Pretext by Cheng Lou, MIT. Text measurement and layout. Described above, and the reason any of this works.
- three.js, MIT, pinned at r160 and served locally rather than from a CDN so renders stay deterministic. It carries the dimensional layer: the rotating solids and the depth stack the camera moves through. Not used in these four pieces, which never load it.
- Playwright driving headless Chromium, and ffmpeg, which together are the renderer described above.
- Whisper, run locally, for the word-level timings, with the loudness envelope and onset detection written on top of it in numpy.
- The typefaces. Barlow Condensed and JetBrains Mono carry the flood and the legible voice, with Bodoni Moda, Big Shoulders Display, Roboto Condensed and Oswald used elsewhere in the instrument, all open licence. Semaphore is mine, and open too.
Some precedents that inspired it: Eugen Gomringer's constellations, for structure as content. Emil Ruder on form under compression. Two more belong to parts of the instrument you cannot see here: Liliane Lijn's rotating text drums sit behind the dimensional layer, and Jurriaan Schrofer's elastic letterforms inside Karl Gerstner's permutation grid sit behind the curtain. Both are built and both are waiting for the right piece.
Nothing here is lit, shaded or decorated beyond layering and a little drop shadow. Everything on screen is the consequence of a rule, and the main event is a phrase trying to be read.