TiltFx creates a depth-based tilt animation that follows the user's mouse cursor. The effect is driven by rotateX/rotateY transforms and resets on mouse leave. It's designed for hoverable visual elements like images or feature blocks.
Intensity
Control the strength of the tilt effect with the intensity prop. Lower values create a subtle effect, while higher values make it more dramatic.
Performance
TiltFx automatically detects low-end devices and the prefers-reduced-motion system setting. When either is detected, the tilt effect is disabled. You can override this behavior with the reducedMotion prop.See useReducedMotion for details.
API reference
Prop
Type
Default
children
React.ReactNode
—
intensity
How far it tilts.
number
1
reducedMotion
"auto" follows the reader's system setting, which is the right default for anything ambient.
