# Resolve — a photograph, one resolution at a time

A drop-in piece from [Funeral Thirsty](https://www.funeralthirsty.com/studies/resolve.html). Give it a tall scroll, a stage and a canvas. It opens on one crop of a photograph, set in type. Scrolling pulls the view back: the characters keep their size while they come to describe more of the picture, until the whole frame is in type. The last stretch of the scroll lets the photograph through. Scrolling back returns to the crop.

On the sample, that crop is the tiger's lit eye. The photograph is read for the type, and drawn itself only at the end.

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 `resolve` 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
<div class="scroll" id="scroll">
  <section class="stage" id="stage">
    <canvas id="art" data-photo="your-photo.jpg"></canvas>
  </section>
</div>
<script src="ascii-glyphs.js"></script>
<script src="resolve.js"></script>
```

`.scroll` is `400svh` and `.stage` is one viewport, pinned, in `resolve.css` and in `styles.css`. The scroll has to be taller than the stage. If it is not, the view stays on the opening crop.

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.

`ascii-glyphs.js` has to load first. It is the sampler Typeset and Resolve share; this kit carries its own copy.

`#readout` and `#hint` are optional. Leave them out and the picture still runs. There is no play button. The scroll is the control. `Resolve.setProgress(0.67)` jumps to the face; `Resolve.setProgress(1)` jumps to the photograph.

## What is in this folder

| Path | What it is |
|---|---|
| `index.html` | The site: the Resolve study page itself, rebuilt from the files in this kit. Open this first. Uses `styles.css`, `ascii-glyphs.js` and `resolve.js`. |
| `resolve.js` | The engine. Reads the photograph, follows the scroll, and exposes `window.Resolve`. |
| `ascii-glyphs.js` | The sampler and the glyph atlas. Load it before `resolve.js`. |
| `resolve.css` | The scroll and the stage, and the few styles the demo and previews use. |
| `demo/index.html` | The scroll, the stage and the canvas. No readout, no hint, no title. |
| `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. |
| `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 `resolve.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 Resolve 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 `--black`, `--ink`, `--ink-soft` and `--amber` in `tokens/tokens.css` (or `tokens.css`) and the page around the picture moves with them. Change `--floor` before `resolve.js` runs and the dim ground under the type moves with it. The engine reads `--floor` once, at startup, and only as a six-digit hex; anything else falls back to `#4f4a43`.

The characters' own colours come from the photograph. Swapping the tokens does not recolour the tiger.

Point `data-photo` at another file to change the picture. The sequence still runs: a crop, then a pull back to the whole frame, then the photograph. The opening crop does not move. It is the constant `EYES` in `resolve.js`, fractions of the frame tuned to this tiger's lit eye (`0.353, 0.323` of the width and height on a wide screen, a tighter `0.14` of the width on a tall one). Another photograph opens on that same region of its own frame, which will not be its subject unless you edit `EYES`.

The beats (`0.08`, `0.60`, `0.70`), the column widths (6px and 4.5px) and the three type weights live in `resolve.js`. The token file records the beats and the column widths. Editing the token does not change the scroll; edit the script.