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.
Like what you saw?
There's more where that came from.