Flip Card

A 3D card flip on hover using preserve-3d and backface-visibility. Disabled entirely when prefers-reduced-motion is on.

Motion

card3dhoverflip

Hover to flip

ShinUI

Design resources, indexed.

Copy the source

Every component ships with the exact file that renders above it.

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

import { FlipCard } from "@/registry/components/flip-card";

export function Example() {
  return <FlipCard />;
}

Install prerequisites

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge

More in Motion

Spotlight Card

A card that lights up under the cursor. The gradient is positioned from pointer coordinates rather than a CSS hover state, so the highlight follows the exact path of the mouse.

Marquee

An infinite scrolling row built from two duplicated tracks, with an edge mask, hover pause and a reduced-motion opt-out. No dependency and no JavaScript loop.