TITLE: Mondrian Lab — a composition machine you can re-partition by hand
PROMPT: Build a single self-contained HTML page called "Mondrian Lab". Full-viewport fixed frame inset by clamp(14px,3.2vw,54px) on a #e7e4da page, the frame itself #f2f0e8 with a multiply-blended paper grain made from two repeating-linear-gradients plus a white radial highlight. Model the composition as a row/column grid: an array of normalised x positions [0,0.18,0.52,0.74,1] and y positions [0,0.24,0.56,1]. Render each rectangle as an absolutely-positioned div whose left/top/width/height are percentages derived from the animated line positions, and render each interior line as an absolutely-positioned div (vertical lines width clamp(6px,0.8vw,12px) translateX(-50%), horizontal lines matching height) filled #1a1a1a with a transparent ::before hit-strip ~32px wide. Give each line a spring: velocity += (target-current)*0.24, then *0.74 damping, driven by one requestAnimationFrame loop that only runs while something is moving (dirty gate) and re-renders geometry each frame. Dragging uses pointer capture; the raw fraction is clamped between neighbours (min 3/20 gap) and snapped with Math.round(f*20)/20. Handles are round #f2f0e8 knobs with a 2px #1a1a1a border, children of each vertical line positioned at the intersection's y%, revealed with a scale transform on hover/drag. Clicking a rectangle cycles its colour through ['#f2f0e8','#d62828','#1d4ed8','#f6c500'] with a 0.5s background-color transition. Shuffle regenerates 3-5 interior vertical and 2-3 interior horizontal snapped lines plus a mostly-paper colour assignment and rebuilds the DOM (new cells bloom from paper to their colour); Reset restores the home composition. A dark #141414 HUD card bottom-right shows a tweened 0-100 composition score (balance from the coefficient of variation of areas, colour mix from normalised Shannon entropy over four colours, proportion from closeness to 1:1 or 1:1.618 aspect ratios, tension from the largest block's area share) with three mono metric bars, plus Shuffle and Reset buttons. Mark "Mondrian Lab" top-left in mix-blend-mode multiply. Keys S and R. Respect prefers-reduced-motion by snapping instead of springing. No external assets and no external references of any kind.
DESCRIPTION: A tactile re-imagining of a De Stijl grid as an instrument. The page is a single paper-coloured field ruled by thick black lines; grab any line and the whole partition breathes around it, snapping to a 1/20 grid on a spring while the rectangles stretch to follow. Click a field and it cycles through the four Mondrian colours. A dark instrument panel in the corner keeps score, grading the arrangement on balance, colour mix and proportion, so the act of playing becomes the act of composing.
TECHNIQUES: Row/column grid model rendered as absolutely-positioned percentage divs; pointer-capture dragging with neighbour clamping and 1/20 snapping; per-line damped spring integrated in a dirty-gated rAF loop; live geometry re-render from animated line positions; CSS background-color transitions for colour swaps; multiply-blended repeating-gradient paper grain; tweened numeric score with CSS width transitions on metric bars; hand-built balance/entropy/proportion heuristics.
INTERACTION: Drag any black line segment to re-partition the grid (rectangles resize live, the line springs and snaps to the 1/20 grid); click a rectangle to cycle its colour; hover a line to reveal its round intersection handles; press Shuffle to generate a new snapped composition with colours blooming in; press Reset to return to the home Mondrian; keys S and R trigger shuffle and reset. The score number tweens and the three metric bars animate whenever the geometry or colours change.