motion-hover
Wraps any element and applies spring-based motion on hover. Scale, lift, rotate, skew — all interruptible.
Preview
Import
Usage
Rotate
Add rotate to spring-rotate the element on hover. Great for icons and decorative elements.
Skew
Use skew for a distortion effect. Works well on text and card elements.
Bounce
Control the spring's bounciness with bounce — from 0 (no overshoot) to 1 (very springy).
Combining effects
All properties compose freely.
Properties
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| | | number | 1.05 | Target scale on hover |
| | | number | 0 | Horizontal offset in px on hover |
| | | number | 0 | Vertical offset in px on hover |
| | | number | 0 | Rotation in degrees on hover |
| | | number | 0 | SkewX in degrees on hover |
| | | number | 0.3 | Spring bounciness from 0 (smooth) to 1 (very springy) |
| | | number | 0.3 | Spring duration hint in seconds |
Accessibility
Respects prefers-reduced-motion: when enabled, hover effects are disabled and the element renders at its rest state.