Ticket Card
Premium holographic ticket component with 3D pointer-tracking reflection, dynamic CSS clipping, and elastic tearing physics.
Component Showcase
Interactive Playground
Adjust sliders and values to preview changes in real-time
width
The width of the holographic ticket.
height
The height of the holographic ticket.
topEyebrow
Label text at the top of the ticket.
topSerial
Serial number text at the top right.
topSubtitle
Pill subheader text in the top ticket section.
bottomText
Instructional text in the bottom stub of the ticket.
redeemedText
Watermark text overlayed when the ticket is torn/redeemed.
API Reference (Props)
Component properties and type specifications
| Prop | Type | Default | Description |
|---|---|---|---|
| width | string | number | 256 | The width of the holographic ticket. |
| height | string | number | 384 | The height of the holographic ticket. |
| topEyebrow | string | "Admit One" | Label text at the top of the ticket. |
| topSerial | string | "No. 0842" | Serial number text at the top right. |
| topSubtitle | string | "VIP ACCESS" | Pill subheader text in the top ticket section. |
| bottomText | string | "Scan barcode for verified admission" | Instructional text in the bottom stub of the ticket. |
| redeemedText | string | "REDEEMED" | Watermark text overlayed when the ticket is torn/redeemed. |