FORGE. Design guide · Site 11 of 25
How this site was made

Typography with
a melting point.

FORGE is a fictional foundry that still casts type in lead. The page runs hot: embers climb the whole scroll, the crucible reads live temperature, and the specimen letters are — correctly — backwards.

Concept

The best detail in metal type is that every sort is a mirror; the letter only rights itself on paper. The specimen shelf makes that the interaction: lead blocks hold reversed glyphs until hover "prints" them. Everything else obeys foundry physics — real type height (23.317 mm), real alloy ratios, lead's real 327° melting point on the thermometer.

Palette

Coal#131110
Ember#FF7A2F
Molten#FFC258
Iron#57504A
Ash#EFE9E1

Typography

Set in metal.

Alfa Slab One — display. A slab with real tonnage; the closest a webfont gets to something you could drop on your foot.

Files arrive as outlines; they leave as ingots of alphabet.

Bitter — body; a slab-serif book face that keeps the metal theme at reading size. Fira Mono reads the gauges.

Techniques

ElementHow it works
Ember fieldSeventy particles rise on individual sine-wander paths, drawn with lighter compositing so overlapping embers genuinely glow hotter. Two ember temperatures (orange / molten) flicker on offset clocks.
Click sparksEvery pointer-down bursts 22 sparks with gravity and streak tails — velocity-stretched line segments fading by life.
Molten headlineA 220%-wide five-stop gradient clipped to the display text and animated across it — the pour, always mid-flow.
Lead sortsPure CSS metal: layered gradients for the milled face, inset shadows for the bevel, a lower "nick" bar (real sorts have one so compositors feel orientation). Glyphs sit at scaleX(-1) until hover flips them to print orientation and heats them ember-orange.
Crucible gaugeAn interval jitters the melt readout around lead's true 327 °C, comma-decimal like a European dial.
AccessibilityReduced motion: no embers, no sparks, no pour animation, static gauge — the mirrored-sort interaction remains, as it's state not motion.

Interaction map

You doThe page does
Click anywhereThe floor throws sparks with gravity
Hover a sortThe mirrored letter prints itself the right way round, glowing
Watch the crucibleThe melt holds around 327 °C, as lead does
← Back to the floor