# Tint — an eye made of the page's own words

A drop-in piece from [Funeral Thirsty](https://www.funeralthirsty.com/studies/tint.html). Give it three elements and it draws an eye out of your own text: every character is the next letter of what the page says, set lighter or darker where the light falls, with the letters under the iris coloured through. It follows the pointer, blinks, and changes colour when you click it.

Nothing in the picture is an image file. Select it and you are selecting prose; copy it and you paste the paragraph back.

No build step, no dependencies, no framework. One script, three elements.

## 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 `tint` first if you want them contained. Design tools that import the zip open that `index.html`, the site, as the entry.

## The three elements that install it

```html
<pre class="field" id="field" data-words="Whatever you want the eye to be made of."></pre>
<pre class="iris" id="iris" aria-hidden="true"></pre>
<canvas class="tone" id="tone" aria-hidden="true"></canvas>
<script src="tint.js"></script>
```

The three elements are fixed and fill the viewport; put your page over them at a higher `z-index`, with `pointer-events: none` on the page and `auto` on the blocks that need clicks, so the eye stays clickable through the gaps. The styles for all three are in `tint.css`, and in `styles.css` as the site uses them.

Leave `data-words` off and the eye reads the page instead: `#lede`, `#range-copy`, and every `dd` inside `#facts`. If it finds none of those, it falls back to a sentence of its own.

Unlike a photograph, this needs no web server and no same-origin rule. Opening `index.html` straight from disk works.

## What is in this folder

| Path | What it is |
|---|---|
| `index.html` | The site: the Tint study page itself, rebuilt from the files in this kit. Open this first. Uses `styles.css` and `tint.js`. |
| `tint.js` | The engine. Draws the eye, runs the range, and exposes `window.Tint`. |
| `tint.css` | The eye's styles, plus the few the demo and previews use. |
| `demo/index.html` | The eye on its own, and nothing else. The smallest possible page. |
| `OPTIONS.md` | The DOM the engine expects, the one attribute it reads, and the JavaScript interface. |
| `components/` | Preview pages for design tools: the eye, the range of lenses, 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/fonts/` | IBM Plex Mono, under the SIL Open Font License, with the license text. |
| `LICENSE.md` | MIT for the code, and what is not licensed. There are no photographs in this kit. |

## Loading it into a design tool

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

**Open Design.** Import `tint.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 Tint 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 `--paper`, `--ink` and `--mark` in `tokens/tokens.css` (or `tokens.css`) and the whole system moves with them — including the eye, whose pupil reads `--ink` at load. Change the six entries in `COLOURS` at the top of `tint.js` to set your own range; each needs an `id`, a `name`, a `hex`, a darker `ring` and a one-line `note`.

The eye is a light-on-paper system by design. If you invert it to ink-on-black, set `--paper` dark and `--ink` light and reload — the engine takes its pupil colour from `--ink` at startup, not from a constant.