motion-hover

Wraps any element and applies spring-based motion on hover. Scale, lift, rotate, and skew are all interruptible.

Preview

import 'motion-components/motion-hover'   // just this one
import 'motion-components'               // or the whole library

<motion-hover scale="1.05" y="-4">
  <button>Hover me</button>
</motion-hover>

Add rotate to spring-rotate the element on hover. Great for icons and decorative elements.

⚡

🧩

✦

<motion-hover rotate="15" scale="1.1">
  <div>⚡</div>
</motion-hover>

Use skew for a distortion effect. Works well on text and card elements.

<motion-hover skew="8" scale="1.02">
  <button>Slanted</button>
</motion-hover>

Control the spring's bounciness with bounce, from 0 (no overshoot) to 1 (very springy).

<motion-hover scale="1.15" bounce="0.5" duration="0.5">
  <button>Bouncy</button>
</motion-hover>

All properties compose freely.

<motion-hover scale="1.1" rotate="8" y="-6" bounce="0.4">
  <button>Lift + spin</button>
</motion-hover>

Attribute	Property	Type	Default	Description
scale	scale	number	1.05	Target scale on hover
x	x	number	0	Horizontal offset in px on hover
y	y	number	0	Vertical offset in px on hover
rotate	rotate	number	0	Rotation in degrees on hover
skew	skew	number	0	SkewX in degrees on hover
bounce	bounce	number	0.3	Spring bounciness from 0 (smooth) to 1 (very springy)
duration	duration	number	0.3	Spring duration hint in seconds
disabled	disabled	boolean	false	Ignore pointer input and settle to the rest state

Respects prefers-reduced-motion: when enabled, hover effects are disabled and the element renders at its rest state.