I turned a simple button into a magnetic liquid-metal interaction. 🧲
Introducing Ferrofluid Spike Button, my latest interactive component for Framer.
Inspired by how ferrofluid reacts to magnetic fields, I wanted to explore how a familiar UI element could feel more physical, expressive, and alive.
The result is a glossy liquid-metal button that responds to cursor movement by growing and bending organic spikes.
What's inside?
✦ Cursor-reactive magnetic spikes
✦ Four customizable spike styles
✦ Spring-based motion and damping
✦ Metallic reflections and animated droplets
✦ Custom cursor and autoplay controls
✦ Framer property controls for easy customization
✦ Reduced-motion and static-rendering support
Designed for creative portfolios, futuristic landing pages, experimental interfaces, and standout calls to action.
It's a small UI element, but an opportunity to make an interaction feel memorable.
Built with 💛 by @Karim Saif
What do you think, would you use a ferrofluid button in a real project?
#Framer #UIDesign #UXDesign #InteractionDesign #CreativeCoding #WebDesign
