Build guide · Site 13 of 25

A memory product, wrapped in living aurora.

AETHER is one of 25 sites designed and built by Formwork to demonstrate web design, motion and taste. Here's exactly how this one was made — a real SaaS layout floating over a shader — and how you can rebuild it.

The idea

The brief was a near-black, precise, motion-forward product site in the language of tools like Linear and supermemory.ai. The signature move: a continuously drifting aurora gradient-mesh rendered on a full-page WebGL canvas, with every panel above it built as frosted glass. The blur samples the moving light behind it, so the whole page feels lit from within. Everything else — tight Inter type, a bento grid, a sticky "how it works" — is deliberately restrained so the glow does the talking.

The stack

• Background A hand-written GLSL fragment shader on raw WebGL — no 3D library.
• Motion GSAP + ScrollTrigger for reveals, the sticky step sync, and magnetic buttons.
• UI mockup Pure HTML/SVG/CSS — a faux command bar, knowledge graph and sparkline.
• Type Inter (tight, −0.03em on display) with JetBrains Mono for labels and code.
• Host GitHub Pages, served straight from the repo's main branch.

The signature technique: a gradient-mesh

Instead of noise ribbons, the aurora is built from a handful of soft light sources drifting on slow sine paths. Each is a gaussian blob — exp(-d²·s) — tinted violet or cyan and added over a near-black base. A little domain-warped fBm bends the whole field first, so the blobs melt into one organic mesh rather than reading as separate dots.

vec2 w = vec2(fbm(p*1.4 + t), fbm(p*1.4 - t));
p += (w - 0.5) * 0.30;               // warp the domain first

float blob(vec2 p, vec2 c, float s){ return exp(-dot(p-c,p-c)*s); }

col += violet * 0.90 * blob(p, node1, 3.0);
col += cyan   * 0.85 * blob(p, node2, 3.2); // ...five drifting nodes
col *= 0.55 + 0.45 * vignette;       // keep text legible over the glow

Two details keep it looking expensive: a per-pixel dither that kills colour banding on the dark gradients, and a vignette that dims the edges so headline text always clears 4.5:1 contrast against the field.

Details that matter

• Frosted glass — panels use backdrop-filter: blur() so they refract the shader moving behind them.
• Sticky feature moment — the "how it works" visual is position: sticky and cross-fades through three stages as each step scrolls into view.
• Typing command bar — the hero mockup types and erases real queries; it degrades to static text under reduced-motion.
• Robust intro — the hero reveals via a CSS .loaded class on a double requestAnimationFrame plus a 400ms failsafe, so it never blanks if a CDN stalls.
• Reduced motion — one still shader frame, no drift, all content forced visible.

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-aether --public --source=. --push
gh api --method POST /repos/OWNER/formwork-aether/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's the whole recipe: one shader, glass panels, precise type, and a little scroll motion. The other 24 sites each swap the central technique — particles, raymarching, kinetic type, audio-reactive gradients — but the discipline is the same.