OonkooUI

Magnet Card

Official

A 3D interactive card with magnetic tilt effect and glare that follows your cursor

Freecard3danimationinteractiveframer-motion
1 downloadsOonkooUI Team

Installation

Run the following command:

npx oonkoo add magnet-card

Props

MagnetCard Props

PropTypeDefault
rotateDepthnumber17.5
translateDepthnumber20
classNamestring-
childrenReact.ReactNode-

Usage

Copy and paste the following code to use this component:

import { MagnetCard } from "@/components/oonkoo/magnet-card"

<MagnetCard>
  {/* Your content */}
</MagnetCard>

Component Info

Typeelement
Categorycards
TierFree
Last updatedDec 24, 2025