# Kinetic typography

One heavy letter cut into a grid of tiles, each slipping on its own wave, so the letter ripples like cloth. Live at https://design.how/vault#kinetic-typography.

Install the skill, which carries the template, the brief and a check script:

```sh
npx skills add https://design.how/vault/kinetic-typography
```

## What it is

One lowercase letter in a heavy display serif, set at 86 percent of the card's height, sits in a 16:9 card, ink on near-white paper. The letter never redraws. It ripples because the frame is cut into a grid, 34 tiles across and 19 down by default, and every tile shows a slightly different part of the letter.

The letter is drawn once, white on transparent, into an offscreen mask. Each frame, every tile copies the patch of the mask under it, but from a source shifted by a wave. Horizontally the shift is the sum of two sines, one phased by x times y and one by x plus y at about twice the frequency, so the ripple crosses itself instead of sliding as one sheet. Vertically a third sine moves it 70 percent as far. The largest shift is 26 px, and the spread term (0.025) decides whether the grid moves as one calm sheet or breaks up.

The warped letter is then tinted three times. An accent copy, blue by default, goes down a few pixels to the right and its complement a few to the left, both faint, and the ink copy goes on top at its true position, so the body stays clean and only the moving edges fringe. Tiles that moved further are drawn a little brighter, which gives the warp relief, and a fixed layer of noise and scanlines is overlaid on top.

It stays cheap at any tile count: the warp is plain drawImage copies of the tiles inside the letter's bounding box, and each colour is one whole-frame composite through a source-in tint.

## How it works

- Draw the text once as white on transparent into an offscreen mask, and measure its ink bounding box.
- Each frame, for every tile inside the box, copy the mask patch from a source offset by two summed sines in x and a third in y, phased by the tile's x*y and x+y.
- Draw each tile at an alpha that rises with how far it moved.
- Fill the paper, then composite the warped letter tinted to the accent shifted right, to its complement shifted left, and to the ink at zero offset.
- Overlay a prebuilt grain and scanline canvas, and count frames from real time so the speed holds at any refresh rate.
- Under reduced motion, draw frame 90 once.

## What you can change

- `text` ("a"): The letter, or up to 12 characters, fitted to 90 percent of the width.
- `paper, ink, accent` (#fcfcfc, #1b1b1b, #3b82f6): The ground, the letter and the fringe colour.
- `tiles` (34): Tile columns. Fewer makes big, blocky steps.
- `offset` (26): The largest shift in CSS px.
- `speed, spread` (0.02, 0.025): How fast the waves move, and how turbulent the grid gets.
- `chroma, shade, grain` (0.35, 0.35, 0.7): Fringe strength, depth shading and the grain veil.
- `FONT_VAR` (--visual-serif): The CSS variable holding the font family. Any heavy display serif works.

Last updated: 2026-11-02