# Sillage

One screen, one bottle, and air you can draw in. A fictional fragrance house; the brand, the
composition and every figure on the page are invented for this study. Nothing is for sale here.

Open `index.html` from any static server — no build step, no dependencies, no CDN.

## What it is

There is no scroll. The whole site is a single fixed frame: a photographed person holding the
fragrance, live air over the top of her, and a rail of six things the air can be asked to draw.

**The air is the site.** A stable-fluid simulation runs over the photograph in WebGL2.
Pressing the bottle fires a widening jet from the nozzle — a hard attack and a fast decay,
not a steady emit. Moving the pointer leaves a faint trace; pressing and dragging draws with
real fragrance, and the air keeps it until the turbulence eats it. A wisp rises from below
every few seconds, so the room is never completely still.

**The six drawings.** The composition, the performance and the object are not sections — they
are shapes the mist resolves into: bergamot halved, an iris in bloom, sandalwood cut across
the grain, an hourglass for the eight hours, a reach diagram for the sillage, and the fifty
millilitre bottle. Each one settles the air first so it can be read, holds for about two
seconds, then dissolves. Choosing one re-tints the page, the words that drift out of the
cloud, and the fragrance itself.

**The ending is earned, not scrolled to.** Once all six have been drawn, the site offers to
sign the air, and the mist writes the wordmark across the screen in the site's own typeface.

**She is alive.** The photograph is still, kept moving by a long sway, a slower breath, a
drifting key light, page-wide film grain, pointer parallax and an inhale when the bottle is
pressed.

## Controls

| | |
| --- | --- |
| Click the bottle, or `Space` | Spray |
| Drag anywhere | Draw with the fragrance |
| The six chips, or `1`–`6` | Ask the air to draw one |
| `C` | Clear the air |
| Sound | Off by default; the spray hiss is synthesised, there is no audio file |

## The files

| | |
| --- | --- |
| `index.html` | The single frame and its copy |
| `style.css` | The frame, the portrait's motion and the responsive composition |
| `app.js` | Interaction, the six subjects and their words, layout of the bottle target |
| `mist.js` | The fluid, the seven drawings, the pointer painting and the Canvas fallback |
| `assets/` | The campaign photograph, two fonts and their licences |

## Adapting it

Everything the site says lives in two places: the copy in `index.html`, and the `SUBJECTS`
array at the top of `app.js` — each entry carries a name, a kind, a line, a measured value, an
accent colour and the words that drift out of its cloud. The drawings themselves are the
`SHAPES` array at the top of `mist.js`, authored as plain Canvas 2D path commands; replacing
one is a matter of drawing into a box and giving it a width and a height. Nothing is traced
and nothing is imported.

The photograph is the one asset you will want to change. It is deliberately composed with an
empty left half for the air to work in, the nozzle pointing into that space; `positionBottle()`
in `app.js` anchors the spray origin to a fraction of the image, so a new photograph needs
those two fractions adjusted and nothing else.

## What it needs

A static server and a browser with WebGL2. Without WebGL2 the air falls back to soft
particles in Canvas 2D and still draws all seven shapes. With `prefers-reduced-motion: reduce`
the air and the drawings are suppressed and the same six readings stay available as text.
Without JavaScript the page states the composition in a sentence.

Licences and credits: [ASSETS.md](ASSETS.md). Keep `assets/OFL-Fraunces.txt` and
`assets/OFL-Geist.txt` with the fonts — the SIL Open Font Licence requires it.