Components
Parallax Card
Parallax Tilt Card A visually engaging card that uses framer-motion to create a 3D parallax tilt effect based on the user's mouse position. Inner elements move at different rates to enhance the sense of depth.
// demo.tsx
import { ParallaxTiltCard } from "@/components/ui/parallax-card";
export default function ParallaxTiltCardDemo() {
return (
<div className="flex min-h-[500px] w-full flex-col items-center justify-center gap-8 bg-background p-8">
<ParallaxTiltCard
title="Treasure Map"
description="Get instant, personalized treasure map insights and recommendations."
imageUrl="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-YPr7im1ndABBcrdS1hCqCMvIBtvHSY.png&w=320&q=75"
/>
</div>
);
}