A card that flips in 3D to reveal its back on hover, focus or click. Crossfades with reduced motion.
npx shadcn@latest add https://hyperblur.dev/r/flip-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/flip-card.tsx.
import { FlipCard } from "@/components/hyperblur/flip-card"
<FlipCard front={<span>Front</span>} back={<span>Back</span>} />| Prop | Type | Default | Description |
|---|---|---|---|
| front | ReactNode | required | Content of the front face. |
| back | ReactNode | required | Content of the back face. |
| trigger | "hover" | "click" | "hover" | Flip on hover and focus, or toggle on click (renders a button with aria-pressed). |
| direction | "horizontal" | "vertical" | "horizontal" | Axis the card rotates around. |
| duration | number | 0.6 | Seconds for the flip. |