Build guide · Site 05 of 25

Liquid metal, raymarched live.

CHROMA is one of 25 sites built by Formwork. The chrome blob isn't a video or a model — it's a distance field, solved for every pixel, sixty times a second.

The idea

A studio that "melts brands down" should have a homepage made of molten metal. So the hero is a cluster of invisible spheres, fused with a smooth blend and shaded like liquid chrome — it drifts on its own and leans toward your cursor.

The stack

• Render A hand-written GLSL fragment shader on raw WebGL — no 3D library.
• Method Raymarching a signed-distance field (SDF).
• Motion GSAP for scroll reveals; the shader animates itself on a clock uniform.
• Type Syne (display), Space Grotesk (text), JetBrains Mono (labels).
• Host Static files on GitHub Pages.

Signature technique: SDF raymarching

Each metaball is a sphere expressed as a distance function. A smin (smooth minimum) fuses them so they melt into one another instead of intersecting:

float map(vec3 p){
  float d = length(p - c1) - r1;
  d = smin(d, length(p - c2) - r2, 0.6); // 0.6 = blend radius
  d = smin(d, length(p - mouseBall) - r, 0.7);
  return d;
}

A ray is marched from the camera per pixel — step forward by the current distance until it's basically zero (a hit). The surface normal comes from the gradient of the field, and chrome is faked by reflecting the view ray into a procedural iridescent environment plus a Fresnel rim:

vec3 n = normalize(gradient(map, p));
vec3 reflected = reflect(rayDir, n);
vec3 col = env(reflected) * (0.55 + 0.7*fresnel) + specular;

Details that matter

• No bloom pass — the glow is just a sharp specular highlight plus Fresnel.
• Performance — 90 march steps, devicePixelRatio capped at 1.4, one full-screen triangle.
• Legibility — a soft left-to-right scrim keeps the headline readable over the metal.
• Reduced motion / no WebGL — the shader freezes on a still frame, or a CSS gradient stands in.

Ship it on GitHub Pages

git init -b main && git add -A && git commit -m "ship"
gh repo create formwork-chroma --public --source=. --push
gh api --method POST /repos/OWNER/formwork-chroma/pages \
  -f 'source[branch]=main' -f 'source[path]=/'

No textures, no meshes, no video — just a page of math that happens to look like poured metal.