react-tactile

Physics-based form interactions for React — buttons, toggles, sliders, and checkboxes that respond with real spring physics (via Framer Motion) instead of fixed-duration CSS transitions.

Install

npm install react-tactile framer-motion

framer-motion is a dependency of this package and will install automatically, but is listed here since it powers every animation.

Usage

import {
  TactileButton,
  TactileToggle,
  TactileSlider,
  TactileCheckbox,
} from "react-tactile";

function Example() {
  return (
    <div>
      <TactileButton onClick={() => console.log("clicked")}>
        Press me
      </TactileButton>

      <TactileToggle
        defaultChecked={false}
        onChange={(checked) => console.log(checked)}
      />

      <TactileSlider
        min={0}
        max={100}
        defaultValue={40}
        onChange={(value) => console.log(value)}
      />

      <TactileCheckbox
        defaultChecked={false}
        onChange={(checked) => console.log(checked)}
      />
    </div>
  );
}

Components

TactileButton

Squishes on press, springs back on release.

| Prop | Type | Default | Description | | ------------ | -------- | ------- | ------------------------------------ | | stiffness | number | 400 | Spring stiffness — higher = snappier | | damping | number | 15 | Spring damping — higher = less bounce| | pressScale | number | 0.92 | Scale factor while pressed |

All other standard <button> props are supported.

TactileToggle

A switch whose knob overshoots slightly before settling.

| Prop | Type | Default | | --------------- | --------------------------- | ----------- | | checked | boolean | — | | defaultChecked| boolean | false | | onChange | (checked: boolean) => void| — | | stiffness | number | 500 | | damping | number | 30 | | offColor | string | #d1d1d6 | | onColor | string | #34c759 | | disabled | boolean | false |

TactileSlider

Thumb follows drag directly, then overshoots and settles on release.

| Prop | Type | Default | | ------------ | ------------------------ | ------- | | min / max| number | 0 / 100 | | value | number | — | | defaultValue| number | 40 | | onChange | (value: number) => void| — | | stiffness | number | 300 | | damping | number | 20 |

TactileCheckbox

Check mark pops in with a spring overshoot on toggle.

| Prop | Type | Default | | ------------ | --------------------------- | --------- | | checked | boolean | — | | defaultChecked | boolean | false | | onChange | (checked: boolean) => void| — | | stiffness | number | 500 | | damping | number | 15 | | size | number | 26 | | color | string | #007aff |

Development

npm install       # install dependencies
npm run build     # build dist/ with tsup
npm run dev       # build in watch mode

Publishing

npm login
npm publish --access public

License

MIT