Elastic Hover — React Interaction

Rubber around whatever you wrap: hovering swells it, pressing squashes it wide, and an under-damped spring snaps it back with a wobble.

View source

Starting live preview

Usage

import { ElasticHover } from "@/components/ElasticHover";

export function Button() {
  return <ElasticHover grow={0.05} squash={0.12}
    {...{
      grow: 0.05,
      squash: 0.12
    }}
  ><button type="button">Press me</button></ElasticHover>;
}

Implementation notes & API

Accepts children, grow, squash, stiffness, damping, disabled, className and style. The inner element keeps its own semantics — buttons stay buttons, links stay links — and reduced motion leaves the content perfectly still. Works without WebGPU.

Property	Type	Notes / default
`children`	`ReactNode`	Your own content; the default is a demonstration
`disabled`	`boolean`	false; motion also respects system preferences
`className / style`	`string / CSSProperties`	Applied to the outer container

View source on GitHubFree for commercial projects · MIT