Tear Ticket

Ticket whose perforated stub tears off by hand: paper bridges stretch into fibres and snap one by one from the far end, the torn edges are jagged and fit each other, the freed stub dangles and drops, and the body is stamped as used. The artwork tilts in 3D with parallax on hover.

Default

Grab the stub and pull it away from the body. Let go early and it springs back. Use the corner button to bring it back.

Spectrum14 Nov

Admit one Rooftop gallery
Until 30 Nov

No. 284619

Customize

Orientation

Scrim

Width460

Height250

Stub Size150

Radius16

Holes12

Hole Size6

Notch3

Roughness0

Tear Angle30

Stretch30

Resistance0.45

Rotate4

Tilt

Tilt Max9

Tilt Reach260

Parallax6

Perspective1000

Background

Color

Border

Border Width1

RecenterDisabled

API Reference

TearTicket

Prop	Type	Default	Description
`image`	`string`	`''`	Artwork behind the body. It shifts against the tilt for parallax and turns grey once used.
`imageAlt`	`string`	`''`	Alt text for the artwork.
`scrim`	`boolean`	`true`	A fade from the paper colour up over the artwork, so text stays readable on busy images.
`imageRadius`	`number`	`8`	Corner radius of the artwork panel, in px. Set it to the ticket radius minus 8 to stay concentric.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Horizontal puts the stub on the right. Vertical puts the artwork on top and the stub at the bottom.
`torn`	`boolean`	`undefined`	Controlled state, usable with v-model:torn. Set it back to false to restore the stub.
`defaultTorn`	`boolean`	`false`	Start already used.
`width`	`number`	`460`	Ticket width in px. It scales down to fit a narrower parent.
`height`	`number`	`250`	Ticket height in px.
`stubSize`	`number`	`150`	Size of the stub along the ticket, in px: its width when horizontal, its height when vertical.
`radius`	`number`	`16`	Outer corner radius in px.
`holes`	`number`	`12`	Perforation holes along the tear line.
`holeSize`	`number`	`6`	Hole diameter in px.
`notch`	`number`	`3`	Radius of the notches at both ends of the tear line.
`roughness`	`number`	`0`	Optional jitter of the torn line between holes, in px. 0 keeps the edge perfectly straight and symmetrical.
`tearAngle`	`number`	`30`	Degrees of pull at which the last bridge gives way and the stub comes free.
`stretch`	`number`	`30`	How far a paper bridge stretches before it snaps, in px. Bridges far from the hinge reach it first.
`resistance`	`number`	`0.45`	How much the intact fibres hold the stub back, 0 to 1. The pull eases as bridges give way, so the paper fights hardest at the start.
`rotate`	`number`	`4`	A resting tilt of the whole ticket in the page plane, in degrees.
`tilt`	`boolean`	`true`	The ticket leans toward the cursor in 3D.
`tiltMax`	`number`	`9`	Largest tilt angle in degrees.
`tiltReach`	`number`	`260`	How far beyond the ticket the pointer still steers the tilt, in px. The tilt tracks the whole page.
`parallax`	`number`	`6`	How far the artwork travels against the tilt, in px.
`perspective`	`number`	`1000`	Viewing distance in px.
`background`	`string`	`'#27272a'`	Paper colour, also used by the fibres.
`color`	`string`	`'#f5f5f5'`	Text colour.
`border`	`boolean`	`true`	A hairline drawn along the cut edge of each piece, following every hole and notch.
`borderColor`	`string`	`''`	Colour of that hairline. Empty derives a faint tint of the text colour.
`borderWidth`	`number`	`1`	Thickness of the hairline in px.
`stubBackground`	`string`	`''`	Stub paper colour. Empty follows background.
`recenter`	`boolean`	`true`	Once the stub is gone, the remaining ticket glides over to sit centred in its original box.
`disabled`	`boolean`	`false`	Dimmed and inert.
`ariaLabel`	`string`	`'Tear off the stub'`	Accessible name of the stub. Enter or Space tears it.

Event	Description
`tear`	Fires once the stub has come free and gone.
`update:torn`	Same moment as tear, with true.

Slot	Description
`default`	Content of the ticket body.
`stub`	Content of the tear-off stub.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Enter` + `Space`	On the stub, tears it off at once.

The stub is a button. Once it is gone it is hidden from assistive technology and a status region says the ticket is used.
With prefers-reduced-motion a short pull tears the stub off without the paper physics, and the tilt is off.

Swipe Toast Thought Line