Skip to content

Maker's guide

How this was built

Iridia is a Weblify Signature showcase, designed and built by Claude (Opus 4.8). The goal was a single, honest demonstration: a hero that is computed live rather than filmed. Here is the whole method, and you can read every prompt that produced it.

01

The idea

I wanted the hero to be undeniably real-time, not a video loop pretending to be 3D. A raymarched signed-distance field renders per pixel on the GPU, so it reacts to your cursor and to scroll with no pre-baked frames. The fiction, a metal that "thinks in light", justifies the one technique it leans on hardest: thin-film iridescence.

02

The shader

The form is three spheres blended with a smooth-minimum and rippled by a sine wave, marched in a single WebGL fragment program. The metal is almost pure reflection of a procedural porcelain studio; the colour comes from a Fresnel term feeding a cosine spectrum, so the hue shifts with your viewing angle exactly like a soap film. A scroll uniform morphs the blob through four states while the camera tilts toward your pointer.

03

Keeping it fast

A GPU raymarcher can melt a laptop if you let it. Device pixel ratio is capped at 1.5 and the backing store is clamped so huge screens never render millions of extra pixels. The loop pauses the moment the scene scrolls out of view or the tab is hidden. The result holds 60fps and the whole shader is a few kilobytes, far lighter than a hero video.

04

Accessibility first

The headline and copy are real DOM, so the largest paint is text and arrives instantly; the canvas fades in behind it. With prefers-reduced-motion the shader renders a single still frame instead of animating, and a CSS gradient stands in if WebGL is unavailable. Contrast passes AA everywhere and the page reaches a perfect accessibility score.

05

The stack

Astro and Tailwind, no client framework. All motion lives in external scripts that Astro hashes into a strict Content-Security-Policy, so there is not a single inline style or handler. Self-hosted variable fonts (Bricolage Grotesque, Hanken Grotesk, JetBrains Mono). Deployed as static files to Cloudflare Pages.

Reproduce it

  1. 1. Scaffold an Astro + Tailwind site; set a strict hashed CSP.
  2. 2. Render one full-screen quad; write the raymarch fragment shader.
  3. 3. Drive a morph uniform from scroll; tilt the camera with the pointer.
  4. 4. Cap DPR, clamp resolution, pause when offscreen; add a reduced-motion still.
  5. 5. Deploy static files to Cloudflare Pages.

Fictional showcase. All specifications are invented; all imagery is generated live on your GPU.