Palette
Everything is argued from the shop floor: the room is dark, the metal is hot, and nothing else competes.
- Iron
- #1C1D21 — page ground; the unlit foundry hall
- Steel
- #3A3E46 — plate panels; cold rolled stock
- Ember
- #FF5A1F — the only saturated hue; molten accents
- Spark
- #FFD9A0 — white-gold; the hottest point of a spark
Ember is rationed to labels, catalogue numbers on hover, and the spark system itself, so the temperature of the page stays believable. Body text is a cool #C6CAD2 — steel under fluorescent light — holding 4.5:1+ against both grounds.
Type
Stamped steel
IBM Plex Sans carries the catalogue copy — an engineer's face, drawn for IBM's hardware heritage, with tabular figures for the spec rows.
Archivo at 125% width and 900 weight reads like letters struck into plate — the hero sets it at up to 20rem with a machined vertical gradient clipped into the glyphs and a hard 3px drop shadow, so GJUTA looks milled rather than typed. The typographic bravery is that single word owning the full viewport width.
Techniques
- Canvas 2D spark fountain — the signature element (implementation below).
- CSS riveted plates — panels are layered linear-gradients with four non-repeating radial-gradient rivets pinned to the corners of a
::before; no images anywhere. - Procedural SVG catalogue plates — each casting gets a hand-drawn line diagram (bollard, bell, volute, ingots, ladle) in steel strokes with one ember detail.
- GSAP + ScrollTrigger — one hero stamp-in timeline, scrubbed hero parallax, and plate reveals on scroll; everything on
expo/powereases, nothing on defaults. - Letterpress craft — background-clip gradients plus hard offset shadows stand in for stamped and milled metal throughout.
The signature: a continuous molten pour rendered as a particle system. Stream particles fall from a tap point under gravity, and on hitting the floor line each one dies into a burst of sparks with randomised ejection angles, drag, one allowed bounce, and a heat value that maps life onto a white-gold-to-ember colour ramp, drawn as velocity-stretched streaks in lighter composite mode. The pour breathes on a slow sine, an occasional heavy gout lands with a 22-spark burst and a floor flash, and the pointer is a repulsor: sparks within 130px are shoved away and briefly reheated, so dragging your hand through the fountain scatters and brightens it. Brushing the hero letters strikes sparks off each glyph.
Iteration log
Pass 1 — Craft
- Small labels on the steel plates failed contrast (#8B909B on #34373F ≈ 3.6:1); lightened plate-context labels to #A6ABB6 (≈ 5:1).
- Moved the machined text gradient from the h1 to its letter spans — background-clip on a parent with transformed children can drop the clip mid-animation in some engines.
- Fixed heading hierarchy: the works lede became the section's h2, the commission h3 was promoted, and duplicate inline margins on section titles moved into the stylesheet.
- Footer carried the guide link twice; collapsed to colophon + Index. Added a skip link.
Pass 2 — Depth
- The pour was metronomic; gave it a slow sine "breath" that varies spawn rate, stream width and spark size.
- Added the gout: every 4–9 seconds a heavy blob falls and lands with a 22-spark burst and a decaying floor flash.
- Second-read details: the furnace readout drifts ±5 °C on a timer, and hovering the hero letters strikes sparks off each glyph at its canvas position.
- Micro-interaction: hovering a catalogue plate makes its SVG ember lines glow (drop-shadow transition) alongside the number turning ember. Added a scrubbed parallax fade on the hero as you scroll away.
Pass 3 — Hardening
- Ticker loop gapped on monitors wider than ~1300px — two copies weren't enough; extended the phrase and repeated it six times so the −50% loop never shows a seam.
- Added a 100vh fallback ahead of 100svh; verified the 375px stack (catalogue plates and process grid collapse to one column, the SVG caps at 150px).
- Reduced motion: the canvas draws one static pour frame instead of looping, GSAP never registers, the ticker and pulse stop, and the temperature drift is skipped. Canvas caps DPR at 2, pauses on tab-hide and when the hero scrolls out via IntersectionObserver.
- Chanel rule: removed the second glow halo at the tap point — the stream already announces itself — and the hero title's second soft drop-shadow. Final copy read: tightened the hero standfirst ("one hundred and twenty-eight years" was doing the eyebrow's job).