Flip Reveal
Spring-physics 3D card flip that reveals hidden back content on click — with full front/back design.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| flipAxis | "x" | "y" | "y" | Axis to flip the card on — y for horizontal flip, x for vertical |
| accentColor | string | #f59e0b | Primary accent color for gradients, icons, and the CTA button |
| perspective | number | 1200 | CSS perspective depth in pixels — higher = more subtle 3D effect |
When to Use
Ideal for pricing cards that reveal plan details, team member bios, product feature reveals, and any UI where a secondary state deserves dramatic presentation.
Best Practices
Use flipAxis='y' for the classic card flip feel. Set perspective between 800–1400 — lower values create a more dramatic fish-eye 3D effect. The spring physics (stiffness: 70, damping: 14) gives a natural bounce.
Why This Component Matters
A 3D flip creates a clear mental model of front/back — users understand there's hidden content to discover, making it a powerful interaction for reveals and onboarding.
FAQ
QCan I customize the front and back content?
Yes — edit the JSX inside the FRONT and BACK sections. The flip mechanism is purely the outer motion.div wrapper.
QDoes it work on mobile / touch?
Yes — the onClick handler fires on tap. Touch devices get the full spring flip animation.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.