# Typeset — a photograph that sets itself in type

A drop-in piece from [Funeral Thirsty](https://www.funeralthirsty.com/studies/typeset.html). Give it a stage, a canvas, and a photograph. Every cell with light in it becomes one character, which flies in from off the edge and locks into place, the brightest first. Move across the picture and the characters scatter, then spring back.

The photograph is read and never shown. What you see is type, drawn live on a canvas, coloured from the picture underneath it.

No build step, no dependencies, no framework. Two scripts, one attribute.

## Unzipping

The zip is flat: its files land in whatever folder you unzip it into, with `index.html` at the top. Make a folder called `typeset` first if you want them contained. Design tools that import the zip open that `index.html`, the site, as the entry.

## The minimum that installs it

```html
<section class="stage" id="stage">
  <canvas id="art" data-photo="your-photo.jpg"></canvas>
</section>
<script src="ascii-glyphs.js"></script>
<script src="typeset.js"></script>
```

Size the stage with CSS. The canvas fills it. Serve the page over a web server: browsers refuse to let a page read a photograph's pixels when it is opened straight from disk. Any server will do, including `python3 -m http.server`.

The photograph must be on the same origin as the page, or served with a permissive `Access-Control-Allow-Origin` header, for the same reason.

`ascii-glyphs.js` has to load first. It is the sampler and the glyph atlas that Typeset and Resolve share; this kit carries its own copy so the folder stands alone.

`#count` and a `button#again` are optional. Leave them out and the picture still runs. The styles for the stage are in `typeset.css`, and in `styles.css` as the site uses them.

## What is in this folder

| Path | What it is |
|---|---|
| `index.html` | The site: the Typeset study page itself, rebuilt from the files in this kit. Open this first. Uses `styles.css`, `ascii-glyphs.js` and `typeset.js`. |
| `typeset.js` | The engine. Reads the photograph, flies the characters in, and exposes `window.Typeset`. |
| `ascii-glyphs.js` | The sampler and the glyph atlas. Load it before `typeset.js`. |
| `typeset.css` | The stage, and the few styles the demo and previews use. |
| `demo/index.html` | The stage and the canvas, and nothing else. No count, no replay button. |
| `OPTIONS.md` | The DOM the engine expects, the one attribute it reads, and the JavaScript interface. |
| `components/` | Preview pages for design tools: the stage, the palette, the type. Each opens in a browser on its own. |
| `tokens/tokens.json` | The kit's colours, type and sizes in the W3C Design Tokens format (2025.10). |
| `tokens/tokens.css` | The same values as CSS custom properties. |
| `DESIGN.md` | The guideline: colour, type, spacing, layout, components, motion, voice, brand, anti-patterns. |
| `design-system-spec.json` | The manifest Claude Design reads. |
| `manifest.json`, `tokens.css`, `design-tokens.json`, `components.html`, `USAGE.md`, `preview/` | The Open Design layer: its manifest, its token contract, its token JSON, a component fixture, a usage guide and preview pages (the site, colors, typography, spacing). |
| `assets/sample/` | One sample photograph, generated for the studio and released under CC0. The page never displays it; the canvas reads it. |
| `assets/fonts/` | IBM Plex Mono, under the SIL Open Font License, with the license text. |
| `LICENSE.md` | MIT for the code, CC0 for the photograph, and what is not licensed. |

## Loading it into a design tool

The kit carries two layers, one for each tool, describing the same system.

**Open Design.** Import `typeset.zip` and it opens on `index.html`, the site, with every other page listed alongside it. Read as a design system, the same archive supplies `manifest.json`, `DESIGN.md`, `tokens.css`, `components.html`, `USAGE.md` and the pages under `preview/`, and Typeset becomes a system other work can be rendered in.

**Claude Design.** Reads `design-system-spec.json`, the component previews under `components/` with their first-line `@dsCard` markers, and `tokens/tokens.json` in the W3C Design Tokens format.

## Making it yours

Change `--deep`, `--ink`, `--ink-soft` and `--glow` in `tokens/tokens.css` (or `tokens.css`) and the page around the picture moves with them: the stage, the type, the labels. Change `--floor` before `typeset.js` runs and the dim ground under a character still in the air moves with it. The engine reads `--floor` once, at startup, and only as a six-digit hex; anything else falls back to `#2b3444`.

The characters' own colours come from the photograph, not from the tokens. Swapping the tokens does not recolour the jellyfish. Point `data-photo` at another file to change the picture.

The flight (1500ms), the spread (2400ms), the pointer's reach (96px) and its push (30px) live in `typeset.js`. The token file records those numbers. Editing the token does not change the flight; edit the script.

Replace the sample photograph with your own. It should have a dark, empty region where the words can sit, the way this one has empty water on the right.