[mracette]

Parks the hero-wordmark exploration on its own branch. Draft, and not intended to merge as-is — the landing page is going back to plain white Satisfy for now. This exists so the work and the pipeline aren't lost.

What it does

Replaces the Satisfy gradient hero with a custom rune wordmark whose sixth letter is a vertical sigil standing in for the second S, inspired by the Horizon Forbidden West cover logo.

The mark ships as painted artwork applied as a CSS mask over currentColor rather than an <img>. The artwork is monochrome, so one channel carries all of it — 97KB instead of 230KB — and the colour stays under CSS control instead of being baked in. A four-stop drop-shadow stack widens the bloom that's baked into the mask's alpha; it works on a masked element because drop-shadow operates on the rendered alpha, which here is the mask.

WordmarkParticles adds a canvas mote field under the mark. Deliberately DOM/canvas rather than WebGL: the wordmark is DOM, so sharing its layout box makes alignment free and responsive, where the three.js route would have had to track the sigil's on-screen box across breakpoints. SIGIL_X is measured off the mask's alpha, not guessed.

Also drops the Satisfy font face and its five font files, and hero-spill.webp — the gradient text that image sat behind is gone.

Verified

tsc --noEmit clean, 106 unit tests pass, production build succeeds with the asset emitted to build/img/. Checked in the browser at 1440px and 390px.

Notes for whoever picks this up

docs/wordmark/README.md has the full pipeline and the gotchas. The two that cost real time:

• mask-image keys on the alpha channel, not luminance — a greyscale image masks in as a solid rectangle.
• Pillow always writes WebP alpha losslessly and ignores alpha_quality, hence the cwebp shell-out.

Reference images are re-encoded to WebP; the originals were 2.3MB each and this is a git history.

build-wordmark.py draws the wordmark procedurally and is kept because it's what controls proportion — an image model won't hit a size ratio on request. Its facets read as procedural beside the painted art, which is why the shipped mark is a render.

https://claude.ai/code/session_01TPAA5L7iH5DJ7KrENyXi2M