Build guide · Site 01 of 25

A fragrance house, rendered as living light.

AURELIS 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 — and how you can do the same.

The idea

The brief was "fragrance as light." Rather than photograph flowers, the hero is a continuously evolving aurora — a fluid field of indigo, magenta and gold that never repeats. Everything else (type, spacing, restraint) exists to let that field breathe.

The stack

• Hero visual A hand-written GLSL fragment shader running on raw WebGL — no 3D library.
• Motion GSAP + ScrollTrigger for reveals, the masked title, and the composition line.
• Type Cormorant Garamond (display) paired with Space Grotesk (interface).
• Build Plain HTML/CSS/JS — no bundler, no framework. It just runs.
• Host GitHub Pages, served straight from the repo's main branch.

The hero: a fluid-noise shader

The aurora is a single full-screen triangle with a fragment shader run for every pixel. The motion comes from domain-warped fractal noise (fBm): noise is sampled, used to distort the coordinates, sampled again, and again — so the field folds into itself like smoke. The result is mapped through a three-stop palette and shaped into ribbons.

vec2 q = vec2(fbm(p + t), fbm(p - t));
vec2 r = vec2(fbm(p + 1.7*q + 1.7), fbm(p + 1.7*q + 8.3));
float f = fbm(p + 2.2*r);          // twice-warped field
vec3 col = mix(indigo, magenta, f);
col = mix(col, gold, f*1.1 + uv.y); // gold blooms upward

Two details keep it looking expensive: a tiny dither added per pixel to kill colour banding, and a device-pixel-ratio cap so it stays smooth on high-density screens.

Details that matter

• Masked title reveal — each line sits in an overflow:hidden box and slides up on load.
• Custom cursor — a ring that lerps toward the pointer and swells over interactive elements, using mix-blend-mode: difference.
• Reduced motion — with prefers-reduced-motion the shader renders one still frame and all animation is disabled.
• Grain — an animated SVG-noise overlay at 5% opacity adds analog texture.

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-aurelis --public --source=. --push
gh api --method POST /repos/OWNER/formwork-aurelis/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, a little motion, strong type, and static hosting. The other 24 sites each swap the central technique — particles, raymarching, isometric 3D, audio-reactive gradients — but the discipline is the same.