useTiltAnimation Hook

A React hook for 3D tilt and zoom hover effects on cards and other elements. Optimized for performance with hardware acceleration, RAF throttling, and reduced motion support.

Installation

$ npx shadcn@latest add @orecus/use-tilt-animation

Dependencies:

motion

Registry:

@orecus/use-reduced-motion@orecus/use-will-change@orecus/animation

Usage

tsx

import { useTiltAnimation } from "@/components/ui/orecus.io/lib/use-tilt-animation";const { motionProps, tiltRef } = useTiltAnimation({  style: "tilt",  tilt: { max: 10 }});return (  <motion.div ref={tiltRef} {...motionProps}>    Card content  </motion.div>);