Holo Ticket
A collectible event ticket in CSS 3D with pointer tilt, layered parallax and shifting holographic foil.
Overview
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.
When to use
- Showcase moments: launches, tickets, galleries.
When not to use
- Core workflows where speed matters more than delight.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/holo-ticket.jsonnpx shadcn@latest add https://sundaeui.dev/r/holo-ticket.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/holo-ticket.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/holo-ticket.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy holo-ticket.tsx and holo-ticket.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
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
| Prop | Type | Default |
|---|---|---|
event*Event title. | string | — |
kickerSmall accent line, such as the tour or series name. | string | — |
date*Display date. | string | — |
timeDoors or start time. | string | — |
venue*Venue line. | string | — |
seatSeat details printed on the stub. | { section: string; row: string; seat: string } | — |
holderTicket holder name. | string | — |
serialSerial number. | string | 'Nº 000184' |
tiltMaximum tilt in degrees. | number | 14 |
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.
Customization
- Theme with --holo-bg, --holo-ink and --holo-accent. A cream background with ink text gives a paper-ticket look.
- Keep tilt at or below 18 degrees. Beyond that, text becomes hard to read mid-motion.
FAQ
- Is Holo Ticket free?
- Holo Ticket is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Holo Ticket?
- Run npx shadcn@latest add https://sundaeui.dev/r/holo-ticket.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Holo Ticket support keyboard and screen readers?
- 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.
- Does Holo Ticket respect reduced motion?
- Yes. With prefers-reduced-motion set, decorative motion is removed and state changes are instant.
More like this
All 3d →- Pro
Card Swap
3D · Expressive Before / After
3D · Refined- Pro
Photo Adjust
3D · Refined Ink Field
Backgrounds · Organic- Pro
Split-Flap Display
Motion · Brutalist Decode Text
Motion · Futuristic