Rotating Card

A 3D-style rotating card that responds to user hover with smooth perspective shifts. Adds depth and interactivity to feature displays or profile cards.

Live Preview

Perspective

Hover over this card to see the 3D rotation effect. The card follows your mouse movement with smooth, physics-based rotation.

Interactive Element

Installation

CLI

npx @modus-ui/cli add rotating-card

Manual

Copy the code from the component tab.
Create a file at components/ui/rotating-card.tsx.
Paste the code.

Usage

tsx

import { RotatingCard } from "@/components/ui/rotating-card";

export default function Example() {
  return (
    <RotatingCard>
      <div className="flex h-48 items-center justify-center p-8">
        <h3 className="font-serif text-xl">Feature Card</h3>
      </div>
    </RotatingCard>
  );
}

Props

Prop	Type	Default	Description
`children`	`ReactNode`	-	The content inside the card.
`className`	`string`	-	Additional CSS classes for the card.