[ Parable build guide ]

How Quench was built

A one-smith forge, rendered without a forge. The signature is a domain-warped fragment shader that paints pattern-welded Damascus into a clipped blade — no textures, no libraries, ~90 lines of GLSL.

static · no build stepraw WebGLMarcellus / Inter / Space Monolight + darkreduced-motion aware

The idea

Damascus steel sells itself on one thing: the pattern, where no two blades are alike. A hero image would freeze that into a single photo. A shader keeps it alive — the fold drifting slowly, a specular highlight sweeping the bevel — so the promise ("no two leave the shop alike") is something you watch happen, not just read.

The stack

Deliberately plain. One index.html, one styles.css, one main.js. No framework, no bundler, no CDN — even the shader is hand-rolled WebGL so the page has zero runtime dependencies and ships straight to GitHub Pages. Type is Marcellus (a lapidary serif with the right heritage weight), Inter for body, Space Mono for the technical meta that runs through a smith's world (temperatures, steel grades, plate numbers).

Signature technique — the Damascus shader

Pattern-welded steel is layers of two alloys folded over and over. Etched, the softer layer recedes and the fold surfaces as light and dark. We fake exactly that with domain warping: sample fbm noise, use that to distort the coordinates you feed into more fbm, then run the warped field through a hard sin() to snap it into bands — the folds.

// inside the fragment shader
vec2 q = vec2(fbm(p + t*0.03), fbm(p + 5.2));
vec2 r = vec2(fbm(p + 3.4*q + 1.7), fbm(p + 3.4*q + 8.3));
float f = fbm(p + 2.6*r);
float bands = sin((r.x*2.0 + f*3.0) * 22.0);   // the fold, as light & dark
bands = smoothstep(-0.15, 0.15, bands);

The canvas is then clipped to a blade with a CSS clip-path polygon, so the steel lives inside the silhouette instead of a rectangle. A faint warm gradient low-and-right hints at quench heat still in the metal.

Details that matter

Cost, not vanity. The loop runs at ~30fps, device-pixel-ratio is capped at 1.5, and fbm is five octaves — the pattern drifts slowly, so none of that is visible, and the GPU stays cool.
It pauses when unseen. An IntersectionObserver stops the render loop the moment the blade scrolls out of view.
Reduced motion draws one frame. Under prefers-reduced-motion the shader renders a single, fully-etched still and every reveal/counter resolves instantly.
Content is never hidden without JS. The hero rise and scroll reveals are gated behind an .js class set synchronously in <head> — kill JavaScript and the page is fully legible.
The colour-coded forge. Each process step carries a data-heat; JS paints its left rail that temperature, so the section reads like a heat chart, dull-cherry up to welding white.

The commission form is a demo — it validates and confirms in-place but sends nothing. Wire it to your own endpoint (Formspree, a serverless function, an email service) before taking real orders.

Ship it on GitHub Pages

Nothing to build. Push the folder and point Pages at the root.

gh repo create bswxyz/quench --public --source . --push
gh api --method POST /repos/bswxyz/quench/pages -f 'source[branch]=main' -f 'source[path]=/'

Relative paths and a .nojekyll file mean it serves from the project subpath without a single config change. That's the whole point of the Formwork-style static build.

← Back to Quench