The full chain

Every prompt

Iridia has no photographs and no AI-generated pictures. Its hero is rendered live on your GPU in a single WebGL fragment shader. What follows is the full chain of prompts and design directives that produced this site, in order, so you can reproduce the method.

Build a showcase website that demonstrates extreme capability in web design, taste and artistic flavour. Lead with a fundamentally distinct technical pillar. Use advanced visual techniques: real-time 3D, otherworldly animation, an exceptional colour palette, novel typography. Total creative freedom. It will be seen by many people and credited to the model, so go all out. Add a /guide route explaining how it was made and a /prompts route storing every prompt. Do three full iteration passes before calling it done.

Pillar: a genuine real-time GPU raymarcher, not a mesh-based 3D scene. Concept: "Iridia", a fictional future-materials lab that has synthesised an impossible alloy, a metal that thinks in light. One continuous scroll experience; a raymarched liquid-metal form with thin-film iridescence is the protagonist and morphs through four states as you scroll. Deliberately a bright, porcelain, gallery world, not dark sci-fi, to avoid the "dark background + one acid accent + glow" cliché. Palette: warm porcelain surface, warm near-black ink, deep indigo for interaction, and a decorative spectrum (indigo, teal, amber, rose) reserved for the shader and hairlines. Type: Bricolage Grotesque (display), Hanken Grotesk (text), JetBrains Mono (data).

Full-screen quad, single fragment shader. Signed distance field: three spheres blended with a smooth-minimum (smin), positions and radii driven by time and a scroll "morph" uniform (0..1). Add a small low-frequency sine ripple for a liquid surface; march conservatively (step * 0.72) to stay stable. Normal by gradient (tetrahedron offsets). Material: near-total specular reflection of a procedural porcelain studio environment, plus thin-film iridescence: a Fresnel term drives an Inigo-Quilez cosine palette so hue depends on view angle. Bright Fresnel rim. Subtle hash grain. Camera tilts with the pointer (small yaw/pitch). Cap devicePixelRatio at 1.5 and clamp the longest backing-store side to 1600px for 60fps on mobile. Reduced-motion: render exactly one still frame. No WebGL or no JS: show a CSS iridescent-gradient fallback. Pause the render loop when the scene is offscreen or the tab is hidden.

Pin the canvas (sticky, full viewport) inside a tall section and pull the text "beats" up over it with a negative top margin. Scroll progress through the section becomes the morph uniform, so the alloy visibly moves through Resonant, Bloom and Settle as the beats pass. Beat cards fade in with CSS scroll-driven animation (animation-timeline: view()), guarded by @supports so they are simply always visible where unsupported. Headline uses a per-letter split reveal. All motion is CSP-clean: external hashed scripts, data attributes, scoped styles, no inline style attributes or handlers.

Iridia is a fictional showcase. It renders its own hero live and ships no photographs. See themaker's guide for the build story.