Kaleido Lab

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a fullscreen interactive browser-based generative drawing toy called “Kaleido Lab.” Use a single full-window HTML canvas as the main play surface, with a dark near-black navy background and a subtle purple radial glow centered on the canvas. The canvas must resize to the viewport, support mouse, stylus, and touch through pointer events, and prevent page scrolling while drawing.

Core interaction: the user presses and drags anywhere on the canvas to paint. Each movement segment is replicated around the exact canvas center using radial kaleidoscope symmetry. Provide a “Mirror slices” slider from 4 to 24, default 12. For every input line segment, draw one normal rotated copy and one vertically mirrored copy for each slice, evenly spaced around 360 degrees; this produces 2x the visible repeated strokes and mandala-like patterns. Keep strokes on the canvas, while continuously applying a very faint translucent background repaint when the user is not drawing so older marks slowly fade according to a “Trail fade” value. Clear should repaint the background without changing the settings.

Make strokes vivid and luminous: use screen/lighten-style compositing, rounded caps and joins, saturated HSL colors, a colored outer stroke with configurable “Brush size” (2–48, default 14), and a smaller bright white inner highlight. Add configurable “Glow” (0–1.2, default 0.70) controlling shadow blur around strokes. Stroke color should be selected from five circular palette swatches: cyan (#8df7ff), pink (#ff7fd1), yellow (#ffd166), green (#8cff98), and violet (#b390ff), with cyan initially selected. Color each symmetry slice with a modest hue offset so adjacent repeated strokes can vary. When pulse is enabled, animate the hue shift over time; pulse is on by default and the UI should say “Pulse On.” Faster pointer movement may slightly increase stroke width/brightness.

Animate the canvas subtly: show extremely faint radial guide rays from the center and a faint breathing circular guide ring, plus three delicate expanding/breathing rings around the center as a center bloom. Include a “Spin Off/On” toggle, off by default; when on, slowly rotate the symmetry angle and guide rays over time, creating drifting mandalas. The center should remain visually identifiable but unobtrusive.

Build a glassmorphism control panel in the upper-left, positioned with safe-area insets, about 320px wide (responsive to mobile). Use a translucent black/purple panel with rounded 16px corners, thin translucent border, blur backdrop, and shadow. Header: title “Kaleido Lab,” a pill badge reading “draw to mirror,” and a Hide button. Body text: “Drag anywhere to paint. The stroke repeats around the center like a live kaleidoscope.” Add labeled range controls with live right-aligned values for Mirror slices, Brush size, Glow, and Trail fade (fade range 0–0.2, default 0.08). Add the five circular palette swatches with a white active outline. Add four buttons: Clear, Pulse On/Off, Spin On/Off, and a prominent gradient “Save PNG” button. Save PNG should download the current canvas as a timestamped PNG. Clear and mode changes should show a small bottom-right transient toast such as “Canvas cleared,” “Pulse colors on/off,” “Spin mode on/off,” or “PNG saved.”

The Hide button collapses the panel body and changes to “Show”; the canvas remains fully interactive beneath it. Support keyboard shortcuts: C clears, P toggles pulse, R toggles spin, H toggles panel visibility, and S saves the PNG. Ensure controls stop pointer events from drawing while the rest of the canvas accepts drawing. Use a clean system sans-serif font, light text, cyan/pink accents, responsive mobile layout, and 100dvh/safe-area sizing. This is an open-ended creative canvas rather than a score-based game: do not add enemies, levels, timers, lives, or scoring.