A ticket that turns in 3D. Both sides are the same size, and a shade peaks halfway round.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/card-flipPlayground
Showing the front
Admit oneGA
Vol. 04
Fieldwork Sessions
- Date
- Sat 21 Nov
- Doors
- 19:30
- Venue
- Hall B, Pier 7
- Holder
- Jordan Vale
Scan at entry#004182
- Gate
- C
- Section
- Floor
- Row
- F
- Seat
- 14
Valid for one entry. Re-entry is not permitted.
Front
Showing the front
Admit oneGA
Vol. 04
Fieldwork Sessions
- Date
- Sat 21 Nov
- Doors
- 19:30
- Venue
- Hall B, Pier 7
- Holder
- Jordan Vale
Scan at entry#004182
- Gate
- C
- Section
- Floor
- Row
- F
- Seat
- 14
Valid for one entry. Re-entry is not permitted.
Back
Showing the back
Admit oneGA
Vol. 04
Fieldwork Sessions
- Date
- Sat 21 Nov
- Doors
- 19:30
- Venue
- Hall B, Pier 7
- Holder
- Jordan Vale
Scan at entry#004182
- Gate
- C
- Section
- Floor
- Row
- F
- Seat
- 14
Valid for one entry. Re-entry is not permitted.
Turning
Showing the frontFlipping to the back
Scan at entry#004182
- Gate
- C
- Section
- Floor
- Row
- F
- Seat
- 14
Valid for one entry. Re-entry is not permitted.
Admit oneGA
Vol. 04
Fieldwork Sessions
- Date
- Sat 21 Nov
- Doors
- 19:30
- Venue
- Hall B, Pier 7
- Holder
- Jordan Vale
Side
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/card-flip
Accessibility
- Flip is a real Button, labelled with the side it turns to.
- The hidden side is inert.
- The new side is announced politely.
Motion
- A tap or Flip turns the card 180° in 600 ms on a spring, with perspective 1000.
- A shade peaks at 90°, and a pill says which way it is turning.
- With reduced motion, the sides crossfade in 150 ms.
Responsive behavior
- 288 px by 424 px on Web and 320 px by 432 px on Mobile.
Performance
- The turn is a transform on one element, driven by a motion value, so it does not re-render per frame.
- The shade follows that same value, and the running animation stops on unmount.
- The stand-in QR is built once per ticket number with useMemo.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import CardFlip from @/components/fetaui/card-flip. Without ticket it shows sample data.
- front and back replace the ticket faces and must be the same size.
- The ticket back draws a stand-in QR. Pass back with a real code.
- side="turning" holds the mid flip pose for docs. Reduced motion crossfades, and animated={false} swaps at once. Composes Card, Badge, Button and Separator.
Related
Card StackComponentA fanned stack of prints. Drag the top card to skip, or open it for specs and Add to cart.Boarding PassComponentA flight pass as an inset card over a stub. The Badge stamps a new status and the field that changed sits in a chip.Page FlipComponentA book you leaf through, like a menu or a lookbook: spreads on Web and one page at a time on Mobile.CardComponentThe container most of fetaUI is built on: an inset card on a soft tray, with actions on the tray.Morph PopoverComponentA feedback pill that grows into its own form.