## Holo Ticket (S—011)

A collectible event ticket in CSS 3D with pointer tilt, layered parallax and shifting holographic foil.

- URL: https://sundaeui.dev/components/holo-ticket
- Category: 3D & creative · Art direction: Futuristic
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/holo-ticket.json`
- Tags: tilt, card, interactive, ticket, 3d, react, parallax

A ticket that feels like an object. It tilts toward the pointer, and the title, details and barcode sit on different translateZ layers, so they parallax against each other as it moves. A specular highlight follows the cursor, and a thin holographic foil band shifts hue with the viewing angle.
The die-cut is real CSS: notches are masked out of both halves, and the stub is separated by a dashed perforation. No images are used, so it stays crisp at any size and recolours with three variables.
Use it for event confirmations, digital passes, membership cards and launch invitations, wherever a purchase should feel like something worth keeping.

### Usage

```tsx
import { HoloTicket } from '@/components/sundae/holo-ticket'

<HoloTicket
  kicker="Night Signal Tour"
  event="Low Orbit Live"
  date="Fri 14 Nov 2026"
  time="19:30"
  venue="Hangar 9 · Rotterdam"
  seat={{ section: 'B', row: '07', seat: '22' }}
  holder="M. Okafor"
/>
```

### Props

- `event` (`string`, required): Event title.
- `kicker` (`string`): Small accent line, such as the tour or series name.
- `date` (`string`, required): Display date.
- `time` (`string`): Doors or start time.
- `venue` (`string`, required): Venue line.
- `seat` (`{ section: string; row: string; seat: string }`): Seat details printed on the stub.
- `holder` (`string`): Ticket holder name.
- `serial` (`string`, default `'Nº 000184'`): Serial number.
- `tilt` (`number`, default `14`): Maximum tilt in degrees.

### Accessibility

- The card is a labelled group, and screen readers hear the event, date and venue in one phrase.
- Details use <dl> term and value pairs. The barcode, foil and glare are aria-hidden.
- Tilt is disabled for prefers-reduced-motion.