Overview
Animated Fractal Tree
Recursive branching with presets & leaf shapes
Metaballs (Ray-marched)
Smooth union SDFs with jitter & orbit camera
Cantor Set (k-ary)
Generalized removal with build animation
Droste Zoom
Recursive frames with scale/rotation
Maze (DFS Backtracker)
Growth animation; curvature from square→circular
Hilbert / Peano Curves
Space-filling path; progressive drawing
Feature Set
Unified Toolbar
- Zoom in/out/reset (keyboard shortcuts and wheel/pinch)
- Per-visual Advanced panels (slide-out, tabbed) with JSON config import/export
- PNG/SVG/Video exports
Theme-Aware UI
- Global light/dark toggle (top-right)
- Visual backgrounds & panels adapt to theme automatically
- Consistent tokenized colors/variables
Visual Library
- Animated Fractal Tree (branch presets & leaf shapes)
- Metaballs (ray-marched SDFs with smooth unions & jitter)
- Cantor Set (k-ary splits, build animation)
More Visuals
- Droste Zoom (recursive frames)
- Maze (DFS backtracker; growth animation; curvature)
- Hilbert/Peano curves (progressive drawing)
Instructions
Basics
- Pick a visualization from the top bar selector.
- Use the shared toolbar to zoom/reset and export.
- Click Advanced to open the visual’s slide-out, adjust controls, or edit JSON.
Tips
- Try presets first to see distinct morphologies.
- When exporting video, keep the duration short for smooth capture.
- Use JSON to save/share reproducible looks.
End-to-End Flow
- Select a visual and tweak parameters live.
- Open Advanced for fine controls and JSON import/export.
- Export snapshots as PNG/SVG or short video loops.
Chat Ops
(Optional) Use chat to request parameter changes, generate presets, or apply bulk style changes without hunting for individual toggles.
Parameter Tweaks
- “Increase fractal tree depth to 12; make leaves palmate.”
- “Metaballs: 6 blobs, softer union (k=0.18), hue 0.7.”
Preset Management
- “Save current Cantor settings as ‘Quasi-3’ preset.”
- “Load ‘Neon Spiral’ for Droste Zoom.”
Technical Overview
- React + Vite for UI & hot dev cycle.
- Canvas 2D for tree, Cantor, Droste, maze, Hilbert.
- WebGL (GLSL) ray-marching for Metaballs.
- Theme propagation via CSS custom properties +
data-themeonhtml/body. - Exports: Canvas snapshot to PNG/SVG; MediaRecorder for short video loops.