# Facets — a photograph set in resin drills

A drop-in engine from [Funeral Thirsty](https://www.funeralthirsty.com/studies/facets.html). Give it a photograph and it draws the picture as square faceted resin drills, the way a diamond painting is made: every cell one drill from a kit-sized palette, every drill lit from wherever the light is. The light follows the pointer, a finger, or the phone's tilt, and drifts on its own when nobody is touching it.

No build step, no dependencies, no framework. One script, 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 `facets` first if you want them contained. Design tools that import the zip directly open that `index.html`, the site, as the entry.

## The one line that installs it

```html
<canvas data-facets="your-photo.jpg"></canvas>
<script src="facets.js"></script>
```

Size the canvas with CSS (it fills whatever box you give it) and 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.

## What is in this folder

| Path | What it is |
|---|---|
| `index.html` | The site: the Facets study page itself, rebuilt from the files in this kit. Open this first. Uses `styles.css` and `facets-page.js`. |
| `facets.js` | The engine. Mounts on every `canvas[data-facets]` on the page. |
| `facets.css` | The few styles the demo uses. Optional. |
| `demo/index.html` | The engine on a sample photograph, and nothing else. The smallest possible page. |
| `OPTIONS.md` | Every `data-` attribute the canvas accepts, and the JavaScript interface. |
| `components/` | Preview pages for design tools: the drills canvas, the colour chart, 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/` | The sample photographs, generated for the studio, released under CC0, and the still the site shows behind the canvas. |
| `assets/fonts/` | IBM Plex Mono, under the SIL Open Font License, with the license text. |
| `LICENSE.md` | MIT for the code, CC0 for the photographs, 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 the zip as you would a Claude Design export: it opens on `index.html`, the site, with every other page listed as a design file. To add Facets as a *system* Open Design renders other work with, unzip and add the folder through the Design System surface's local-folder import instead; that door reads `manifest.json`, `DESIGN.md`, `tokens.css`, `components.html`, `USAGE.md` and the pages under `preview/`.

**Claude Design.** Import the folder or the zip as a design system. Claude Design reads `design-system-spec.json`, the component previews under `components/` (each opens with a `@dsCard` card marker so the tool can group them), `tokens/tokens.json` in the W3C Design Tokens format, and `DESIGN.md`. It opens on `index.html`, the site.

If either import asks for something this kit does not have, tell the studio and the next version will have it.

## Using it in your own site without any tool

Copy `facets.js` next to your page, add the two lines above, and replace the photograph. `OPTIONS.md` covers cell size, palette size, resolution and the still-light mode. `tokens/tokens.css` holds the colours if you want the demo's look around it.

Version 1.0.0.