Made a React button that tilts, squishes and actually feels pressable
Hi!! I've been working on a small React component that makes buttons feel physical, like you're actually pushing something down.
Live demo: https://react-tilt-button.vercel.app/
What it does:
- Tilts toward your cursor (and follows your finger on mobile)
- Sinks and squishes when you press, then springs back
- Has real depth, with a side wall that holds up at any radius, even pills
- Clamps your props so it never visually breaks, whatever values you throw at it
- Optional glare that moves with your pointer
No dependencies, about 6KB gzipped with the CSS. There are a few style variants and spring presets (bouncy, jelly, snappy, stiff) if you don't want to tune everything yourself.
It was inspired by react-awesome-button, which I really liked, but I wanted something smaller that felt more physical, so I built this one from scratch. It tilts toward wherever your pointer actually is, the press runs on springs, and it's just the button with nothing else bundled in.
npm install react-tilt-button
It's still a work in progress and I'm sure there are edge cases. It's open source, so issues and PRs are very welcome 🙂
Would really love feedback, especially on how it feels on mobile and whether the props make sense.
[link] [comments]