3D Card Effect
Mouse-tracking 3D tilt card with perspective transforms and layered depth.
Preview
3D Card Effect
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Product cards and featured content showcases.
Why this component matters
The tilt effect creates perceived depth and interactivity, making flat content feel physical.
Usage guidance
Use for featured products or highlighted content. Limit to 3-4 cards per viewport. The 3D effect is most impactful on desktop — provide a hover fallback on mobile.
Installation
bash
npx shadcn@latest add @aceternity/3d-card-effectUsage
example.tsxtsx
import { 3DCardEffect } from "@/components/ui/3d-card-effect";
export default function Example() {
return (
<3DCardEffect>
{/* Your content here */}
</3DCardEffect>
);
}Source
3d-card-effect.tsx
components/ui/3d-card-effect.tsx