❌

Normal view

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.

GitHub: https://github.com/archisvaze/react-tilt-button

submitted by /u/archeese4 to r/reactjs
[link] [comments]
❌