archisvaze/react-tilt-button

A tactile 3D button for React that tilts on hover and squishes on press. Modern and dependency-free

Summary

react-tilt-button is a dependency-free React component that gives buttons a tactile 3D interaction: it tilts toward the pointer, squishes when pressed, and springs back on release. It supports style and spring presets, configurable geometry, touch behavior, and reduced-motion handling for interfaces where physical feedback is more appropriate than a flat hover effect.

What it is useful for

Engineers can use it for prominent calls to action, demo controls, launch buttons, or other controls that should feel responsive and physical. The default interaction already follows the pointer on desktop and the finger on touch, while dragging off the button before release cancels the click.

Visual presets include solid, outline, arcade, carbon, and warning. Individual colors and borders can still be overridden, so a team can begin with a preset and adapt it to an existing design. For example, a solid button can use a custom green surface while retaining the component’s motion and depth behavior.

The animation model is also configurable. Presets such as bouncy, jelly, snappy, and stiff cover different response times, while squish controls how much the body deforms during a press. Engineers can instead supply a spring object containing stiffness, damping, and mass, or use motion={0} to disable animation.

Geometry is adjusted through props such as width, height, elevation, pressInset, tilt, and radius. The README documents automatic constraints: elevation cannot exceed half the height, press inset cannot exceed elevation, tilt cannot exceed elevation divided by nine, and radius is capped at half the face. These constraints are intended to keep the animated face from visually breaking.

The component also supports an optional pointer-following glare, forwards its ref to the underlying button in React 19, passes additional props to the native <button>, and respects prefers-reduced-motion. It is explicitly described as a physical UI primitive rather than a flat semantic button, so it is best suited to deliberately interactive controls.

How engineers can use it

The README documents installation for React 18 and 19:

npm install react-tilt-button

Import the component and provide an action:

import { TiltButton } from 'react-tilt-button';

<TiltButton onClick={() => alert('Clicked!')}>Click me</TiltButton>;

A more customized instance can combine a preset, spring, dimensions, and press behavior:

<TiltButton
  variant="arcade"
  width={400}
  height={120}
  elevation={20}
  tilt={4}
  spring="bouncy"
  squish={0.5}
>
  My Button
</TiltButton>

Colors, borders, and glare are controlled with props, while the remaining visual system uses CSS variables. The README notes that geometry-related variables should be changed through props because the visible side wall is calculated from those values.