Interactive web app that generates 2D & 3D kaleidoscope visuals using custom fragment shaders, with audio-reactive effects.
Live Demo:
https://kaleidoscope-pixels.vercel.app/
Tech: Three.js, Ionic / Angular, GLSL
Features: 2D & 3D modes, audio reaction, touch/mouse input, gyroscope controls, live camera mode.
I’m currently working on performance improvements (especially on mobile). Any feedback is welcome.
If anyone is interested in the code, let me know — I can publish the GitHub source. Contributions, feature ideas, or enhancements are very welcome.
2 Likes
This is really clean work. I checked the demo and the shader work is solid, especially how smooth the transitions feel between 2D and 3D modes. The audio-reactive part is nicely tuned too, it doesn’t feel random or overly aggressive like a lot of visualizers do.
Using Three.js with Ionic / Angular is an interesting stack choice. The gyroscope control is a nice touch on mobile, it makes it feel more immersive instead of just being another shader playground.
For performance on mobile, you might want to experiment with lowering fragment shader complexity dynamically based on device pixel ratio, or rendering to a smaller framebuffer and upscaling. Also clamping DPR to something like 1.5 can make a big difference on mid-range phones.
Honestly this is the kind of project that would do well open sourced. Even just seeing how you structured the shader pipeline and audio analysis would be valuable for others working with Three.js and GLSL.
Great work overall. It feels polished and intentional, not just a shader experiment.
1 Like