# Datamosh

Columns of saturated colour that fall, snap open through the middle and squeeze shut, like a broken video decode. Live at https://design.how/vault#datamosh.

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

```sh
npx skills add https://design.how/vault/datamosh
```

## What it is

Eleven columns of flat colour fill a wide card. Each column is a stack of fifteen tiles falling down the frame forever, and a tile changes height as it goes: a sliver at the top, about half the card tall as it crosses the centre, a sliver again at the bottom. The columns start a few milliseconds apart from the right, and each one is offset 0.4 of a tile from its neighbour, so the stacks interlock into a zig-zag that rides higher to the right.

One curve does all of it. A tile boundary that has travelled k tiles sits at a sigmoid of k over the tile count, with a sharpness of 8.5. The sigmoid is flat at both ends and steep in the middle, and steepness is height, so the stretch is not animated at all; it is the shape of the curve. The tile count is odd, so one tile owns the whole bulge. Past both ends the curve continues as a shallow line instead of a clamp, so tiles leaving the frame keep tapering instead of stacking on the edge.

The columns never move sideways. Their edges are fixed on a power curve (exponent 1.65), narrow on the left and wide on the right, so the grid reads as receding perspective. Each tile step lasts 0.2 seconds and is sprung, fast in, a hang through the middle, fast out, and the travel is unbounded so there is no seam where a loop would wrap.

Every column reads one shared, rolled strip of 61 colours, offset by its index. A colour therefore spans the card as one leaning band instead of confetti. The strip is rolled from a seed at mount: about a quarter white, about a sixth near-black, the rest hues, never the same colour twice in a row.

## How it works

- Fix the column edges once per resize at width times (i / COLS) ^ POWER; never move them.
- For each column, take elapsed time minus its stagger, divide by CYCLE, add i times COL_PHASE, and spring only the fractional part of the step.
- Place each tile boundary at a sigmoid of (id + flow) / TILES, extended linearly past 0 and 1, and draw the tiles bottom up with a small bleed so they lap.
- Colour each tile by its identity, strip[id - column], never by its position on screen.
- Roll the strip from a seed with a prime length coprime with COLS and TILES, and break up any two equal neighbours.
- Under reduced motion, draw one frame at 0.45 of a step with every column swept in.

## What you can change

- `PALETTE` (white, two near-blacks, eight saturated hues): The colours. Keep white and a dark in it for contrast.
- `COLS, POWER` (11, 1.65): How many columns, and how hard their widths recede.
- `TILES` (15): Tiles per column. Keep it odd; move STRETCH with it.
- `CYCLE` (0.2): Seconds per tile step, so the fall speed.
- `STRETCH` (8.5): How tall the centre tile opens against the shoulders.
- `SPRING_K` (1.6): How long a tile hangs at the middle of its step. Tune against CYCLE.
- `COL_PHASE` (-0.4): Offset between columns, in tiles. Sets the zig-zag.

Last updated: 2026-11-02