# Card Flip

A ticket that turns in 3D. Both sides are the same size, and a shade peaks halfway round.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/card-flip
```

## Usage

```tsx
import { CardFlip } from '@/components/fetaui/card-flip'

export function Example() {
  return <CardFlip ticket={ticket} onSideChange={track} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| side | front, back, turning |  |
| defaultSide | front, back | front |
| onSideChange | (side) => void |  |
| ticket | Ticket |  |
| front | ReactNode |  |
| back | ReactNode |  |
| animated | boolean | true |

## When to use

- For an object with a real back, like a ticket, a loyalty card or a badge.

## When not to use

- To hide content people need to compare: show it side by side.
- For sides of different sizes.

## 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.