An event pass with a holographic foil pattern, a rainbow seal and engraved lines that catch the light as the card tilts toward the pointer. Click or press Enter to flip it to a scannable back.
Maya Lindqvist
npx shadcn@latest add https://hyperblur.dev/r/card-foil-pass.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/card-foil-pass.tsx.
import { CardFoilPass } from "@/components/hyperblur/card-foil-pass"
<CardFoilPass name="Jordan Avery" detail="Attendee" access="Day pass" />| Prop | Type | Default | Description |
|---|---|---|---|
| event | string | "Northwind Summit" | Event name. |
| edition | string | "Lisbon / 14-16 May 2027" | Place and dates under the name. |
| name | string | "Maya Lindqvist" | Holder name. |
| detail | string | "Speaker, Hall B" | Role or seat under the name. |
| access | string | "All access" | Access level badge. |
| code | string | "NWS-0427-118" | Pass number. |
| maxTilt | number | 14 | Largest tilt in degrees. |
| idle | boolean | true | Sways gently while the pointer is away so the foil keeps moving. |
| flippable | boolean | true | Click, Enter or Space flips the card. |
| onFlip | (flipped: boolean) => void | undefined | Called after a flip. |
| accent | string | "#2f7bff" | Accent color for focus rings, indicators and highlights. |
| className | string | undefined | Extra classes on the root element. |