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
width256
The width of the holographic ticket.
height384
The height of the holographic ticket.
topEyebrowAdmit One
Label text at the top of the ticket.
topSerialNo. 0842
Serial number text at the top right.
topSubtitleVIP ACCESS
Pill subheader text in the top ticket section.
bottomTextScan barcode for verified admission
Instructional text in the bottom stub of the ticket.
redeemedTextREDEEMED
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. |