Interactive 3D visualization that responds to your movement
A browser-based kaleidoscope built with Three.js that brings the classic optical toy into the digital age. Check it out at kaleidoscope.griffen.codes!
✨ Key Features
Core Experience
- Physics-based animation — Geometric shapes tumble and flow naturally, mimicking real kaleidoscope objects
- Perfect radial symmetry — Authentic mirroring creates classic kaleidoscope patterns
- Mobile accelerometer support — Tilt your phone to control rotation speed and animation flow
- Smooth zoom controls — Mouse wheel and pinch gestures for exploring patterns up close
Customization
- Six color themes — Classic, Sunset, Ocean, Forest, Cosmic, and Fire palettes
- Random color generator — Create unique color combinations on demand
- Adjustable complexity — Control segment count, rotation speed, and layer depth
- Custom background colors — Personalize the viewing experience
Developer Experience
- React Context architecture — Clean state management with hooks
- Component extraction — Modular design with reusable controls
- Vercel Analytics integration — Track user interactions and engagement
- System font stack — Fast loading with native platform fonts
Controls
- Desktop: Mouse wheel to zoom, settings icon to customize
- Mobile: Pinch to zoom, tilt to animate, tap settings to adjust
🔗 Links
- Live Demo: https://kaleidoscope.griffen.codes/
Give it a try if you’re looking for a creative break or want to explore what’s possible with layers and layers on layers within Three.js combined with a little mobile sensor data.
