Cuberto Cursor

Interactions

Interactions

A client needed a slider. I could have shipped the usual one but that has never really excited me. I wanted something organic, something that feels alive under your hand. So I combined the tools I had and I went exploring.

A client needed a slider. I could have shipped the usual one but that has never really excited me. I wanted something organic, something that feels alive under your hand. So I combined the tools I had and I went exploring.

Scroll

My first instinct was to hijack the scroll. You roll the wheel and an endless strip of images glides sideways. The hard part was the infinite loop, keeping it seamless with no black gaps when the window resizes. That's where Claude earned its keep: a few back-and-forths and the cards wrapped around perfectly.

Scroll within this windows to see the animation.

Hover

Then I wanted it to breathe on its own. It drifts slowly by itself, like a quiet loop you can leave running. But the second your cursor lands on it, it stops, so you can actually look. Motion that knows when to get out of the way feels far more alive than motion that never quits.

Hover within this windows to stop the animation.

Drag

This one is my favorite to play with. I gave the strip some weight, so you can grab it and throw it, and it keeps gliding before it settles. GSAP's Observer handles the gesture, and a bit of easing does the rest. It stops feeling like a website and starts feeling like an object.

Drag within this windows to see the animation.

Bonus

By now the exploration had spilled past the brief. I let the images go completely: move your cursor and they pop into life, then tumble away. None of this would have happened so fast on my own. GSAP gave the motion, Claude and Cursor let me chase every idea before it went cold.

Move your cursor

Move your cursor

Move your cursor to see this animation.