TITLE: Mosaic Portrait — a face assembled from tiles that breathe, scatter and snap back
PROMPT: Build a single self-contained HTML page called "Mosaic Portrait" on a #101014 base with a fixed radial vignette and a warm halo behind the portrait. The portrait is a plate with aspect-ratio .78, clipped to a hand-authored 33-point polygon bust (head, jaw, neck and shoulders in percentage coordinates) defined once as a CSS custom property and mirrored as a JS array for a point-in-polygon test. Inside it, build a grid of absolutely-positioned tiles sized calc(100% / var(--cols)) by calc(100% / var(--rows)); only tiles whose centre falls inside the polygon are created, so the count stays in the hundreds. Colour each tile by a procedural luminance field: distance falloff from a light source at upper-left, a vertical shading term, a Gaussian cheek highlight, a forehead highlight, a jaw shadow and a shoulder shadow, plus a deterministic sine hash dither, then quantise into five zones - #101014, #2b3a67, #e07a5f, #f2b880, #f5f0e6. Each tile is an outer element positioned by transform translate3d(col*100%, row*100%, 0) with an inner element that carries the colour and a 3.6s sub-pixel jitter keyframe (only about 42% of tiles get the class, with random negative delays) so idle shimmer costs no JavaScript. Scatter and snap-back run through a single dirty-gated rAF loop: velocity += (target - x) * 0.17 * dtScale, then * 0.78 damping, per-tile frame waits for stagger. Pointer movement over the grid pushes every tile within 4.4 cells away with a squared falloff force of up to 30px; leaving the grid springs everything home. A Scatter button flings all tiles 22-100px in random directions with staggered returns, the tile-size slider rebuilds the grid between 8 and 48 columns (rows = cols * 1.28), pressing Space re-snaps, and pressing-and-dragging rotates the plate up to 11 degrees with pointer capture, easing back on release. A 9s light sweep crosses the portrait via a skewed gradient. A light caption plate sits bottom-right and a dark control bar at the bottom holds the scatter button, slider and live tile count. Reduced motion disables jitter, sweep and spring easing. No external assets and no external references of any kind.
DESCRIPTION: A procedural mosaic portrait, no photograph anywhere. Hundreds of coloured tiles are placed only where they fall inside a hand-authored bust polygon and coloured by a synthetic lighting field, so a face emerges from arithmetic. The tiles shimmer sub-pixel at rest, shove aside under the pointer and spring back in a stagger; scatter flings the whole assembly apart and it reassembles; dragging tilts the plate in space while a soft light sweep crosses the silhouette.
TECHNIQUES: Hand-authored 33-point clip-path silhouette polygon mirrored into a JS point-in-polygon test so only in-shape tiles are built; procedural luminance field (radial falloff, Gaussian cheek and forehead highlights, jaw and shoulder shadows) with sine-hash dithering quantised into five colour zones; CSS custom properties for grid cell sizing; transform-only tile positioning with chained translate3d percentages and pixel offsets; per-tile damped springs with staggered waits in a dirty-gated rAF loop; squared-falloff pointer repulsion; pointer-capture rotation with easing return; skewed gradient light sweep.
INTERACTION: Move the pointer across the portrait and nearby tiles scatter outward then spring back with a stagger; leave the portrait and everything settles home; press SCATTER to fling all tiles apart with staggered returns; drag the Tile slider to rebuild the mosaic at a different tile size and watch the face re-form; press-and-drag the portrait to tilt it in 3D, and it eases back on release; press Space to re-snap everything instantly and S to scatter again. The light sweep crosses the silhouette on a 9s loop and the tile count updates with each rebuild.