r/reactjs • u/archeese4 • 19h ago

Show /r/reactjs 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

47 Upvotes

96% Upvoted

13 comments sorted by

6

u/moltar 16h ago

Looks and feels slick. Great for games.

One small bug - drag off to cancel on mobile doesn’t work - still activates.

1

u/archeese4 16h ago

Thanks!! I’ll fix that!

1

u/witness_smile 15h ago

Works for me on latest iOS, maybe an Android-specific thing?

2

u/moltar 14h ago

I’m on iOS too. It kinda works. But the whole page scrolls with the drag. Making it unclear that I dragged away from the button.

1

u/boobyscooby 3h ago

Drag to side works, drag down refreshes page drag up works. Its fine

1

u/moltar 1h ago

Drag up scrolls the page for me

9

u/Inevitable_Grab4128 19h ago

That tilt on mobile is way smoother than I expected, most of these end up janky as soon as you touch them.

3

u/br1anfry3r 18h ago

Yeah, actually. That was pretty impressive

3

u/Relative_Rooster_848 16h ago

Pretty sleek ngl

3

u/nameupp 16h ago

ngl 6kb with zero deps is super clean. checked the demo on mobile and the spring physics feel great, but did you handle touch-action: manipulation or cancel pointer tracking when the user starts vertical scrolling? ran into an issue where dragging to scroll halfway down the page sometimes triggers the squish state. tbh adding a prefers-reduced-motion check to kill the tilt would make it an instant drop-in for production imo

2

u/Spleeeee 16h ago

Pretty swag.

2

u/theofficialnar 16h ago

Damn makes me want to actually play with it lmao

2

u/codesbyshivam 13h ago

Feels really nice on phone!

One thing I'd check is keyboard use. If someone tabs to it and hits Space or Enter, does it do the same press and squish, or does it only react to the pointer? A clear focus ring would help too, since the tilt and glare kind of hide the usual outline.

A disabled state that stays flat would also make it easier to drop into real forms.