# Reality split

A selected word splits into letter objects, scatters, is inspected letter by letter at huge scale, and pops back whole. Live at https://design.how/vault#reality-split.

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

```sh
npx skills add https://design.how/vault/reality-split
```

## What it is

A word sits selected on a flat field: white bold grotesque type on a solid box, with four handles on its corners. Then it acts like an editor that has started thinking for itself. At 0.36 seconds seams open between the letters and each becomes its own object with its own handles. At 0.64 they leave the row and scatter, then drift outward. At 1.92 the view dives into the first letter while the rest blur and fade, and from 3.36 the letters take turns sliding through the centre at large scale, like someone stepping through objects in an inspector. Finally everything collapses to a dot and the word pops back whole.

It works on any word. The cells come from prefix advances so the seams land exactly between glyphs, and each letter's box is fitted to its real ink bounds from measureText, so a wide capital never hangs out of its own selection. The scatter puts the first letter at the centre and the rest on a golden-angle spiral from 0.26 to 0.46 of the height, then relaxes overlapping boxes apart over 60 passes. The six measured seam gaps repeat for longer words, and the loop stretches so every letter gets its turn: the inspection never races.

Every move shares one motion language: a lazy wind-up, a violent middle, a long soft landing, and no rotation anywhere. Each phase ships its own measured control points, played through a monotone cubic spline. In the inspection each letter enters from the right on a damped spring that overshoots the centre by 0.02 of the width and rings down, holds at least 0.09 seconds, and leaves to the left. Only the focused object carries handles.

Each pass is a different world: a new word, a new four-colour palette (field, box, handles, ink), a new box shape (rectangle, rounded, ellipse or superellipse, inflated so the glyph stays inside) and a new handle mark. The change happens only at the dot, the one frame where every palette looks alike, with the field crossfading as the next word grows out of it.

## How it works

- Measure the word at FONT_SIZE times the height: cells from prefix advances, letter boxes from each glyph's ink bounds plus FIT_PAD.
- Run one timeline in seconds: split, spread, scatter, drift, dive, inspect, pop, hold. Stretch only the inspection to fit the word.
- Play every move through its own measured control points with a monotone cubic spline; never substitute a closed-form ease.
- Lay the scatter on a golden-angle spiral around the first letter and push overlapping boxes apart, the centre letter pinned.
- In the inspection, slide each letter in from the right on a damped spring, hold it, and slide it out to the left; draw handles on the focused object only.
- Swap word, palette, shape and handle only at the dot, crossfading the field while the next word grows.
- Under reduced motion, draw time 0 once: the first word whole and selected.

## What you can change

- `VARIANTS` (six words, from Animation to Canvas): The passes in order, each a word, a palette, a box shape, a handle mark and a scatter seed.
- `PALETTES` (volt, mint, ultramarine, terminal, press, studio and more): Four flat colours each: field, box, handles and ink. Keep the handles clear of both field and box.
- `FONT_FAMILY` (sans-serif): The family, drawn at 700. Any bold grotesque works; the boxes are measured from it.
- `SCATTER_SPREAD` (0.5): How far the scatter stretches into a wide card. 0 keeps a square constellation.
- `TRAIN_DWELL_MIN` (0.09): Seconds each inspected letter sits still at the centre.
- `SPRING_AMP, SPRING_FREQ, SPRING_DAMP` (0.02, 8.5, 5): The inspection's landing: overshoot, ring and decay.
- `CYCLE_VARIANTS` (true): False plays the first variant forever.

Last updated: 2026-11-02