Kaleidoscope Rings: Wonderful Symmetric Mouse Interaction

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Let's explore a trippy visual by having a ring of rings (Lokai Bracelet ?) respond to our mouse position. P5.js makes it easy to create unique and eye-catching interactions quickly!

Watch the Tutorial on YouTube Get the Project Cloneable

Kaleidoscope Rings: Wonderful Symmetric Mouse Interaction

Inside <head> tag

Inside </body> tag