KQ-1221 · TEAR/PASS

Tear Pass

A boarding pass whose stub tears off along a real perforation: dragging down the stub runs the tear 1:1 with the finger while the torn part peels out about the tear front, and the fibres in each bridge stretch across the gap and snap back as tufts that quiver on the recoil spring. A throw that would finish the tear completes it on the glide spring with the release velocity, the free stub lands a little out and turned on recoil and turns over on glide to show its boarding code, and gate and seat roll to new values in split-flap tiles. The stub is a real button: Enter or Space tears it from the top with the same fibres and sounds, and then turns it over and back.

KQ-1221 · TEAR/PASS

Waylight Air

CBKColdbrook

FRNFernhill

Passenger: Mira Okafor
Flight: WL 214
Date: 07 Oct
Boards: 08:15

Gate

Seat

Zone2

CodeK7Q2MX

gate B12 · seat 14C · tear here to board

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/tear-pass

Props

carrier: string; default —; Who flies it, printed in the pass's header.
flight: string; default —; The flight number, e.g. "WL 214".
passenger: string; default —; The passenger's name.
from: { code: string; city: string }; default —; Where it leaves from: the code printed large and the city under it.
to: { code: string; city: string }; default —; Where it goes.
date: string; default —; The date as printed, e.g. "07 Oct".
boards: string; default —; The boarding time as printed, e.g. "08:15".
gate: string; default —; Printed in split-flap tiles; a new value rolls them and is announced once.
seat: string; default —; Printed in split-flap tiles; a new value rolls them and is announced once.
zone: string; default —; Boarding group, printed under the seat.
code: string; default —; The booking reference, drawn as a seeded two-dimensional code on the stub's back.
torn / defaultTorn: boolean; default false; Whether the stub has been torn off. A host that sets it false gets a whole pass back; one that sets it true gets the same tear, silently.
onTornChange: (torn: boolean) => void; default —; Fires from the drag or key that freed the stub, with true.
perforation: "round" | "slot"; default "round"; Round punched holes or slots along the tear; slots break with a lower snap.
paper: "white" | "sky" | "sand"; default "white"; The card stock and its inks, fixed pigments that read the same in either theme.
flip: boolean; default true; The torn stub turns over in 3D to show its code; off, it cross-fades flat.
sound: boolean; default false; A paper crinkle for each bridge that lets go, a snap when the stub comes free, and a soft paper turn — only for the visitor's own tear and presses.
disabled: boolean; default false; Shows the pass but takes no drag or keys.
className: string; default —; Classes for the root.

Prop	Type	Default	Description
carrier	string	—	Who flies it, printed in the pass's header.
flight	string	—	The flight number, e.g. "WL 214".
passenger	string	—	The passenger's name.
from	{ code: string; city: string }	—	Where it leaves from: the code printed large and the city under it.
to	{ code: string; city: string }	—	Where it goes.
date	string	—	The date as printed, e.g. "07 Oct".
boards	string	—	The boarding time as printed, e.g. "08:15".
gate	string	—	Printed in split-flap tiles; a new value rolls them and is announced once.
seat	string	—	Printed in split-flap tiles; a new value rolls them and is announced once.
zone	string	—	Boarding group, printed under the seat.
code	string	—	The booking reference, drawn as a seeded two-dimensional code on the stub's back.
torn / defaultTorn	boolean	false	Whether the stub has been torn off. A host that sets it false gets a whole pass back; one that sets it true gets the same tear, silently.
onTornChange	(torn: boolean) => void	—	Fires from the drag or key that freed the stub, with true.
perforation	"round" \| "slot"	"round"	Round punched holes or slots along the tear; slots break with a lower snap.
paper	"white" \| "sky" \| "sand"	"white"	The card stock and its inks, fixed pigments that read the same in either theme.
flip	boolean	true	The torn stub turns over in 3D to show its code; off, it cross-fades flat.
sound	boolean	false	A paper crinkle for each bridge that lets go, a snap when the stub comes free, and a soft paper turn — only for the visitor's own tear and presses.
disabled	boolean	false	Shows the pass but takes no drag or keys.
className	string	—	Classes for the root.