Components
Card
Interactive Zoom Image An image component that smoothly zooms in on the cursor's position on hover. It leverages framer-motion for fluid animations and is fully customizable through props.
import { ZoomImage } from '@/components/ui/card-1'; // Adjust the import path as needed
export default function ZoomImageDemo() {
return (
<div className="flex items-center justify-center p-4 md:p-8 bg-background">
<div className="w-full max-w-md">
<ZoomImage
src="https://images.unsplash.com/photo-1542193810-9007c21cd37e?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTcxfHxwcm9kdWN0fGVufDB8fDB8fHww"
alt="A stylish white and wooden desk chair"
zoomScale={3.5}
transitionDuration={0.5}
borderRadius={24}
className="shadow-lg"
/>
</div>
</div>
);
}