127 Components

Holographic Flip Card

Cards

Dual-sided 3D interactive card combining spring-damped perspective tilt, specular foil glare tracking, and a 180-degree Y-axis kinetic flip.

3D Specular Surface

Hover for coupled 3D perspective tilt & foil sheen. Click or press Enter to flip 180° around the Y-axis.

SPRING_TELEMETRY

stiffness:220 N/m

damping:22 Ns/m

maxTilt:±12°

Click or press Space to return to front

Installation

Install directly into your project using the shadcn CLI or copy the source code manually.

Requires:framer-motionlucide-reactclsxtailwind-merge

$npx shadcn@latest add "https://boseui.site/r/holographic-flip-card.json"

TypeScript props supported by <HolographicFlipCard />.

5 props

Prop	Type	Default	Description
front	`React.ReactNode`	—	Optional custom React node rendered on the front face.
back	`React.ReactNode`	—	Optional custom React node rendered on the back face.
maxTilt	`number`	`12`	Maximum 3D tilt angle in degrees along X and Y axes.
stiffness	`number`	`220`	Hooke's Law spring stiffness for 3D tilt and 180° flip.
damping	`number`	`22`	Spring damping coefficient controlling rotational oscillation.

Couples continuous pointer tilt (±maxTilt degrees) with a 180° Y-axis flip in a single unified spring system.
GPU-composited radial specular foil glare tracked via Framer Motion useMotionTemplate.
True 3D preserve-3d backface culling for crisp front and back surfaces.

Implements role='button' with aria-pressed state and descriptive aria-label announcing current card face.
Supports Enter and Space keys to flip between front and back faces.
Disables continuous 3D tilt rotation when prefers-reduced-motion is active.