WARP Switch Button

Sometimes the smallest interactions can make the biggest difference.

I was using Cloudflare WARP ^[1] one day and noticed how satisfying their connection button felt. It wasn't just a simple toggle - when you pressed it, the button would stretch toward the opposite side, like it was anticipating where it would go. It felt alive, responsive, and somehow more trustworthy.

I wanted to recreate that feeling. So I built this switch that mimics WARP's micro-interactions: when you press it, the thumb stretches from its current position toward the opposite state, giving immediate feedback about which direction it will move. It's a small detail, but it makes the interface feel more direct and intentional.

This component taught me that great micro-interactions aren't about flashy animations - they're about creating a sense of direct manipulation where the interface responds exactly as you expect. The WARP Switch shows how a simple stretch can transform a basic toggle into something that feels genuinely responsive and engaging.