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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.