Flip Card
Two-sided card that flips in 3D. Pro · 3D and motion › 3D objects and showcases
A card with two faces that turns over in 3D. A press pushes the pressed half away, so the card spins the way it was pushed and keeps spinning that way. The hidden face is inert — its links are out of the tab order and out of the accessibility tree — and the flip button gives keyboard users the same action. Faces of different heights share the taller one's. With reduced motion the faces cross-fade instead of turning.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add flip-cardnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { FlipCard } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
front * | ReactNode | The front face. | |
back * | ReactNode | The back face. | |
flipped | boolean | Whether the back is shown (controlled). | |
defaultFlipped | boolean | false | Whether the back is shown at first (uncontrolled). |
onFlippedChange | (flipped: boolean) => void | Called when the card turns over. | |
trigger | 'click' | 'hover' | 'manual' | 'click' | click — a press on the card (outside its links and buttons) turns it over; hover — it turns over while a mouse is over it, and on a press on touch screens; manual — only flipped and the flip button. |
axis | 'x' | 'y' | 'y' | y — turns around the vertical axis, like a card; x — around the horizontal one, like a calendar page. |
duration | number | 800 | Length of the turn, ms. |
flipButton | boolean | true | Shows the round flip button in the corner — the keyboard's way to turn the card over. |
labels | Partial<FlipCardLabels> | Text for the flip button. |
Related components
- Orbit Showcase — 3D ring of cards: drag with momentum, arrows, keyboard
- Coverflow Carousel — 3D product carousel on native scroll: swipe with momentum, arrows, keyboard
- Word Prism — Words on the faces of a prism that turns to the next one
- Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
- Stagger — Lists, grids and table rows appear in a wave, one after another
- Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
- Layout Group — Jump-free reordering: filter, sort, regrid
- Presence — Enter and exit: an element stays mounted until its exit animation ends
- Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
- Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll
- Stacking Panels — Panels stick on scroll and pile into a stack
- Helix Rail — Cards on a helix that spins with scroll
Previous: Coverflow Carousel · Next: Word Prism · All 3D and motion