TITLE: Cube Gallery — Six Faces, Six Studies
PROMPT: Build a single self-contained HTML page: a full-viewport CSS 3D cube gallery on a near-black stage (#0f1116) with a soft blue ambient glow and a dark elliptical floor shadow. A CSS cube of side clamp(148px,32vmin,300px) sits centered under perspective:1100px at perspective-origin 50% 46%; the cube uses transform-style:preserve-3d with six absolutely positioned faces centered by negative margins and placed with translateZ(half) plus rotateY(±90deg)/rotateY(180deg)/rotateX(±90deg). Each face is a different pure-CSS miniature artwork in one palette colour: 01 ORBIT #ff5c39 with three concentric border rings pulsing scale .28 -> 1.5 while fading; 02 STRIPE #3a86ff with a 45deg repeating-linear-gradient whose background-position travels 0 -> 36.77px for a seamless band march; 03 ECHO #ffd166 with three dots on a slowly spinning orbit (rotate(var(--a)) translateY(calc(var(--s) * -.3))); 04 PULSE #06d6a0 with seven flex bars doing a staggered scaleY waveform; 05 LATTICE #c084fc with a two-axis gradient grid plus a soft-light radial that scales to read as a warp; 06 BLOOM #f72585 with a 320%-sized multi-stop gradient whose background-position animates and a rotating overlay sheen. Every face carries a monospace index and a tracked system-ui 600 name, a diagonal gloss pseudo-element and a dimming overlay pseudo-element. Chrome: an uppercase tracked display title "CUBE GALLERY / six faces / six studies" upper-left, a bottom-centre HUD naming the front face with a 01/06 counter between two gradient hairlines, and a monospace drag hint. JavaScript in one IIFE: pointer drag rotates the cube with inertia and damping, a per-frame front-face solve (rotate the local face normal by Ry then Rx and pick the maximum z) drives the live label, click focuses a face (cube wrapper scales to 1.2, other faces dim to .74) by easing rotation to that face's home angles, arrow keys step rotation by 18 degrees, Escape and double-click reset. prefers-reduced-motion kills all face keyframes and the auto-spin. No external assets, no http substring, system fonts only.
DESCRIPTION: A midnight showroom for six tiny motion studies. A matte cube turns slowly in a pool of blue light; each face is its own little generative vignette in a different saturated colour, and the interface quietly names whichever face has rotated into view. Dragging throws the cube with real inertia, and clicking a face swings it square-on while the rest fall into shadow — the whole piece reads like a curated object on a plinth rather than a web page.
TECHNIQUES: preserve-3d cube with translateZ face placement and backface-visibility; negative-margin face centering so the transform chain stays pure rotation; six independent per-face CSS keyframe systems (ring pulse, gradient band march, orbital rotation, staggered scaleY waveform, soft-light radial warp, oversized gradient pan); per-frame front-face detection by rotating face normals through Ry then Rx and maximising z; pointer drag with velocity capture, inertia and 0.93 damping; eased angle targeting with 360-degree shortest-path unwrapping; pseudo-element gloss and dim layers instead of filters; quantised transform-string dirty gate so idle frames write nothing.
INTERACTION: Drag anywhere to rotate the cube — release and it keeps spinning, decaying to a slow idle auto-spin. Click a face to swing it to the front and scale the cube up 20% while the other five faces dim; click the same face again to release. Arrow keys step the rotation by 18 degrees, Escape or a double-click resets to the home angle. The bottom HUD name and 01/06 counter update live as the front face changes. With prefers-reduced-motion the auto-spin, inertia and all face loops stop, leaving a still, fully visible cube.