Admit one
MGN-0508-A17
Blue Hour
Guest
Saunak Ghosh
Seat
A-17
17 / access pass03 collectables
Mugen Ticket Morph
A collectible access-pass deck built around a real selection handoff. The selected pass rises into a readable event face; a check-in scan is a contained confirmation, not ambient decoration.
Dependencies
Interaction Types
Select a pass — it comes forward without changing its object identity
Open the detail face — event, guest, seat, and barcode remain attached to the same ticket
Browse with left and right arrows — keyboard selection is instant, without decorative movement
Check in — a one-time scan beam confirms the state without replaying in the background
How to use
'use client';
import { MugenTicketMorph } from "@/components/mugen-ticket-morph";
const passes = [{
id: "blue-hour",
title: "Blue Hour",
venue: "Hall A · Mugen Studio",
date: "05 AUG 2026",
time: "19:30 IST",
attendee: "Saunak Ghosh",
seat: "A-17",
tone: "sky",
}];
export default function Demo() {
return <MugenTicketMorph passes={passes} defaultExpanded />;
}Component Props
| Prop | Type | Default | Description |
|---|---|---|---|
| passes | MugenTicketPass[] | — | Pass metadata, event details, attendee, seat, code, and visual tone |
| value | string | — | Controlled selected pass id |
| defaultValue | string | first pass | Initial uncontrolled selected pass |
| expanded | boolean | — | Controlled detail-face state |
| defaultExpanded | boolean | false | Initial expanded detail state |
| compact | boolean | false | Condensed ticket face for catalog tiles and narrow layouts |
| onValueChange | (id, pass) => void | — | Called after the active pass changes |
| onCheckIn | (pass) => void | — | Called once when the active pass is checked in |
| disabled | boolean | false | Prevents pass selection and check-in |
| onExpandedChange | (expanded: boolean) => void | — | Called when the ticket expands or collapses |