SVG Array Interaction Field

SVG Array Interaction Field

Play with it yourself here*.

*As long as the link is alive.
I came across a post by @verse_ on Twitter and was inspired to riff on his concept a bit.

I hopped into V0 to build. I started by recreating an array with lines that orient towards a mouse. I added a bit of a magnetic pull towards the mouse as well.

I found myself wanting to play with the frequency and characteristics of the lines quite a bit, so I added a control panel on the prototype itself so that I could fine-tune the interaction. This is honestly a trick I've been adding into my design + AI-coding flow a lot because it allows me to play with attributes at the speed I'm used to in other design tools like Figma.

Next, I wanted to add depth to the experience. I exaggerated the magnetic pull + push on press, and added a pulse on click. It's pretty fun to just mess around with the ripples.

I also added a toggle to see how it felt to navigate around the grid without the traditional indicator of a mouse.

Play with it yourself here.