Magnet Card
OfficialA 3D interactive card with magnetic tilt effect and glare that follows your cursor
Freecard3danimationinteractiveframer-motion
2 downloadsOonkooUI Team
Installation
Run the following command:
npx oonkoo add magnet-cardProps
MagnetCard Props
| Prop | Type | Default |
|---|---|---|
| rotateDepth | number | 17.5 |
| translateDepth | number | 20 |
| className | string | - |
| children | React.ReactNode | - |
Usage
Copy and paste the following code to use this component:
import { MagnetCard } from "@/components/oonkoo/magnet-card";
<MagnetCard rotateDepth={17.5} translateDepth={20}>
<div className="w-64 rounded-2xl bg-neutral-900 p-6">Card content</div>
</MagnetCard>