Chrome Dreams is a fictional reissue label for club music made between 1999 and 2003 — the era when dance culture believed the future would be reflective. The audience is diggers, DJs and lapsed ravers; the page has one job: make you want to hear CDR‑001. Everything on it is procedural — no raster images anywhere.
Chrome
Ultra-wide geometric black weight that already looks like a Y2K rave flyer. Set in caps at 900 for the hero and manifesto, 700 for section titles, 500 for card titles. Its flat horizontals give the chrome gradient a clean band to cut across.
The hiss is load-bearing.
Technical grotesk with just enough personality in the round terminals. 300 for long copy on dark ground, 500–600 tracked-out caps for eyebrows, labels and the ticker.
The signature element — the liquid-chrome blob — is a three.js IcosahedronGeometry(1, 72) with a custom ShaderMaterial. The vertex shader displaces each vertex along its normal by two octaves of simplex noise, plus a bulge term pow(dot(normal, mouse), 3) so the surface swells toward the cursor; the pointer direction is rotated into object space on the CPU each frame so the bulge stays glued under the mouse while the mesh rotates. Normals are rebuilt in-shader by displacing two tangent neighbours and taking the cross product — without this the chrome reads as flat plastic.
The chrome itself is a procedurally generated matcap: a 512px canvas painted with a vertical silver gradient with a hard dark horizon at 50%, a white specular hit upper-left, pink and UV-blue radial reflections lower-half, and a dark rim ring. The fragment shader samples it with the classic view-space-normal matcap UV, adds a fresnel rim tinted pink-to-blue across the surface, and a faint pink flush where the cursor bulge is. Clicking the blob pulses its noise amplitude. No textures, no HDRI, no external files.
Chrome type is two stacked background-clip:text gradients — the silver band gradient underneath and an animated specular sweep on top, delayed per letter via a --i custom property so the highlight travels across the headline like light across a bumper. The record sleeves are pure CSS: a conic gradient with per-card hue/angle custom properties, plus a conic-rainbow CD (with repeating-conic-gradient spokes and a punched hole) that slides out of the sleeve on hover. Motion is one GSAP intro timeline (masked per-letter rise) and ScrollTrigger reveals; the marquee ticker is a CSS keyframe pausing on hover.
#6B6F84 failed contrast on void at small sizes — brightened to #7C819A (≈4.9:1).-webkit-text-stroke on transparent text with no fallback — wrapped in @supports so unsupporting browsers get solid ink instead of invisible words..sr-only class.THREE.Clock was restarted on every visibility change, snapping the blob back in time when you re-focused the tab — replaced with a clamped getDelta() accumulator.