Build guide · Site 22 of 25

A watch house, rendered in gold dust.

AURUM is one of 25 sites designed and built by Formwork to demonstrate web design, motion, and restraint. Here is exactly how this one was made — and how you can rebuild it.

The idea

The brief was haute horlogerie — dark, hushed, expensive. No photographs of watches; instead the page should feel like gold: a slow drift of light-catching specks, a wordmark that sweeps like polished metal, and one hand-built watch dial as the single object on the page. Everything else — the Didone serif, the wide letter-spacing, the empty space — exists to keep the gold quiet.

The stack

• Hero field A canvas 2D particle system — a few hundred gold motes drifting upward.
• Wordmark An animated metallic gradient clipped to text (background-clip).
• Centerpiece A watch dial in pure CSS + SVG — conic-gradient bezel, a rotating glare.
• Motion GSAP + ScrollTrigger for reveals, card stagger, and the drawing timeline.
• Type Playfair Display (display) paired with Jost (small-caps labels).
• Host GitHub Pages, served straight from the repo's main branch.

The signature: a gold-dust field

Each mote is a tiny radial gradient painted with globalCompositeOperation = 'lighter', so where specks overlap they add up and glow. They drift slowly upward, wrap at the edges, and twinkle — a sine wave on each mote's alpha gives the impression of catching light. Density scales to the viewport but is hard-capped so it stays weightless on any screen.

const flick = 0.55 + 0.45 * Math.sin(m.tw);   // per-mote twinkle
const alpha = m.a * flick;
const g = ctx.createRadialGradient(m.x, m.y, 0, m.x, m.y, glow);
g.addColorStop(0, `rgba(${r},${gg},${b},${alpha})`);
g.addColorStop(1, `rgba(${r},${gg},${b},0)`);
ctx.fillStyle = g;
ctx.arc(m.x, m.y, glow, 0, Math.PI * 2); ctx.fill();

The wordmark uses the same palette a different way: a linear-gradient set to 200% width, clipped to the letters, and slid across on a loop — so light appears to travel over solid gold.

Details that matter

• The dial — a conic-gradient bezel for brushed metal, a second conic layer rotating on top as a moving specular glare, and an SVG face posed at the classic 10:10.
• Robust intro — the hero reveal is a CSS transition keyed to a .loaded class added on a double requestAnimationFrame, with a 400 ms failsafe, so it never freezes.
• Reduced motion — with prefers-reduced-motion the particles stop, the sweep freezes, and every hidden element is forced visible. Static gold, no movement.
• Fails safe — content is only hidden once JavaScript adds a .js class, so a blocked CDN never leaves a blank page.

Ship it on GitHub Pages

Every site here is static, so hosting is three commands:

git init -b main && git add -A && git commit -m "ship"
gh repo create formwork-aurum --public --source=. --push
gh api --method POST /repos/OWNER/formwork-aurum/pages \
  -f 'source[branch]=main' -f 'source[path]=/'

Use relative paths (./main.js, not /main.js) because project Pages live under /repo-name/. Add an empty .nojekyll file so every asset serves verbatim.

That is the whole recipe: one particle field, a clipped gradient, a CSS dial, a little scroll motion, and static hosting. The other 24 sites each swap the central technique — shaders, kinetic type, 3D scenes — but the discipline is the same.