TITLE: Kaleidoscope — every stroke you make, mirrored
PROMPT: Build a single self-contained HTML page (no external assets, no libraries, all CSS in one inline <style>, all JS in one inline <script> at the end of body) called "Kaleidoscope". Concept: a kaleidoscope drawing toy — brush strokes are mirrored live across N radial axes to build symmetric mandalas. Palette: #101418 ink background, #ff6b9d rose, #4ecdc4 teal, #ffe066 gold, #c084fc violet, plus a bone #eef3f2 swatch. Typography: toolbar labels in ui-monospace uppercase 9-10px with 0.16-0.2em tracking, the title in system-ui 700 uppercase with a glowing rose dot. Layout: a full-viewport canvas inside a .rotor wrapper fixed at the viewport centre (width 100vw, height 100dvh, transform-origin 50% 50%, will-change transform, scaled 1.14 so rotation never exposes corners) with a radial-gradient background painted on the canvas element and a fixed vignette overlay above it; a title block top-left; a floating glass toolbar bottom-centre (rgba(18,22,27,.62), 1px rgba(255,255,255,.1) border, 18px radius, backdrop blur 16px) holding five round colour swatches, four symmetry buttons (6/8/12/16), a size range 1-26 and undo / clear / spin actions; a mono readout bottom-right. Drawing: every stroke is stored as {color, size, cumulative length, points[]}, each point carrying its own tapered width computed as size * (0.34 + 0.66 * min(1, length/46)) * (1 - 0.3 * min(1, stepDistance/26)) so lines ramp up from the start and thin out with speed. Rendering mirrors each stroke with a per-segment transform: translate to the canvas centre, rotate by (i/N)*2PI, and scale(-1,1) on odd segments, then translate back, so segment i is a true mirror of segment 0. Each drawn segment is painted twice — a 3.4x wide stroke in 'lighter' composite at 0.055 alpha for the glow, then the crisp stroke in source-over — which builds a soft luminous mandala on the dark ground. A full redraw clears the canvas, paints faint guide spokes (N radial lines plus two concentric circles at 0.6R and 0.24R) and replays every stored stroke. Rotation is visual only: the .rotor element is rotated with a transform while stroke coordinates stay in unrotated canvas space, and pointer input is mapped back through the inverse rotation and scale so drawing stays accurate under any rotation. Interaction: pointerdown starts a stroke (after pushing a snapshot onto a 28-deep undo history), pointermove appends points only when they are at least 1.5px apart and paints just the newest segment, pointerup ends it; the pointer is captured for the duration. Colour swatches, symmetry buttons (which also trigger a 0.48s scale pulse on the canvas element, a transform-only animation), the size slider, undo (restores the previous snapshot, so it also undoes a clear), clear, and a spin toggle all live in the toolbar; space toggles spin and Ctrl/Cmd+Z undoes. When nothing has been drawn for 2.6 seconds the whole mandala drifts into a slow rotation, which stops the moment drawing resumes. At boot eight tapered curves in the palette colours are seeded into the stroke list and drawn, so a frozen-clock render shows a finished six-fold mandala rather than an empty canvas, and the readout shows the stroke count. Resizing re-measures the canvas with devicePixelRatio and setTransform and re-centres every stored point by the centre delta. prefers-reduced-motion removes the pulse animation and the auto-rotation. One IIFE, every null guarded, zero console errors.
DESCRIPTION: A dark, quiet drawing toy where anything you draw is instantly mirrored into a radial mandala. You drag a colour across a near-black canvas and the stroke appears again and again around the centre, each copy reflected, building a glowing flower of tapered lines. The controls are a single floating glass bar at the bottom — five colour dots, a symmetry count, a brush size and undo / clear / spin — and a pair of faint guide circles marks the axis centre. The page opens on a pre-drawn six-fold mandala so the composition is already alive, then hands it over to the visitor.
TECHNIQUES: Canvas mirror transforms (translate to centre, rotate by i/N*2PI, scale(-1,1) on odd segments) applied per stroke; per-point tapered line width from cumulative length and step distance; dual-pass painting with 'lighter' composite for a low-alpha glow under each crisp stroke; inverse-rotation pointer mapping so input stays correct while the canvas is visually rotated; a 28-deep snapshot undo stack that also reverses a clear; visual-only rotation on a wrapper element with will-change transform; 2.6-second idle drift that stops on input; DPR-scaled canvas with setTransform on measure; resize re-centring of all stored points; transform-only pulse keyframe on symmetry change; glass toolbar with backdrop-filter.
INTERACTION: Drag on the canvas to draw — the stroke mirrors live across every axis. Pick one of five colours (rose, teal, gold, violet, bone) from the swatches. Change the symmetry to 6, 8, 12 or 16 axes and the whole mandala redraws with a quick pulse. Slide the size control (1-26) to change brush width. Click undo to step back through your strokes (it also restores a cleared canvas), clear to wipe everything, or spin (or press space) to set the mandala slowly rotating; it also drifts into a slow rotation on its own after 2.6 seconds of inactivity and stops as soon as you draw again. Ctrl/Cmd+Z also undoes. Resizing re-centres the artwork and the guides.