Interactions

Press/tap feedback, haptics, hover, focus rings, disabled/loading states, hit area, and skipping animation on first load. Press feedback and hit area are shared; haptics are mobile-only; hover and focus-visible rings are web-only.

Press / Tap Feedback

A subtle scale-down on press gives a control tactile weight. Always scale(0.96). Never below 0.95 — anything smaller feels exaggerated. Feedback must be interruptible: releasing mid-press should smoothly return. Not every control needs it — expose a static escape hatch to disable it where motion would distract.

Web — active:scale-[0.96] + transition-transform

<button className="transition-transform duration-150 ease-out active:scale-[0.96]">
  Click me
</button>

The active: variant is interruptible for free — releasing mid-press returns smoothly. No motion library needed; this is plain CSS on the compositor.

static prop pattern