---
id: "2113201327295615382"
source: https://x.com/godlydotdesign/status/2113201327295615382
author: "Godly Design (@godlydotdesign)"
media: "video, 1412x1320, 17.0s"
model: claude-opus-5-5
generated: 2026-10-22
---
# Tear-Off Boarding Pass Ticket

## Summary
A white boarding-pass card sits on a soft grey canvas, and its seat stub can be grabbed and peeled away along a perforated edge, bending and tearing with a jagged paper edge before springing back. A tiny, tactile component that turns a flat ticket into something you want to play with.

## Style
- Theme: light
- Mood: playful, tactile, clean, calm
- Tags: ticket, boarding-pass, tear-off, drag-interaction, physics, paper, micro-interaction
- Category: Components

## Palette
| Role | Hex |
|---|---|
| Canvas | #EAEAEC |
| Card | #FEFEFE |
| Soft grey | #D2D2D4 |
| Mid grey | #BCBCBD |
| Label grey | #848485 |
| Ink | #161618 |
| Blur pink | #F2C6D6 |
| Blur blue | #C9D3F0 |

## Typography
- Route (BCN to TYO style): geometric sans, regular, about 6% of card width, tight tracking. Inter Display (400).
- Labels (BOARDING PASS, Flight, Gate, Boards): small uppercase or sentence case, grey, wide tracking for the caps. Inter (400).
- Values and seat number: same sans, medium, black. Inter (500).

## Layout
- Near-square frame (1412x1320); the ticket is centred and about 50% of the frame width, with a blurred interface behind it.
- Ticket: main panel about 72% of its width, seat stub 28%, split by a dotted perforation line.
- Main panel: label top left, large route in the middle, a three-column row of Flight / Gate / Boards at the bottom.
- Stub: SEAT label, large seat number, barcode at the bottom.

## Elements
- Card: pure white, 12px radius, very soft shadow.
- Perforation: vertical row of small grey dots.
- Torn edge: irregular zig-zag cut that appears on both halves as the stub separates.
- Barcode: black vertical bars of varied width.
- Blurred backdrop: out-of-focus app chrome (pill toggle top left, bookmark and sound icons top right, a play button bottom right) to set context.

## Motion
- The cursor grabs the stub; dragging rotates it around the perforation (up to about 20 degrees) and stretches the tear.
- The paper edge tears progressively, with small jagged bites appearing along the line.
- Releasing springs the stub back into place (spring, about 400ms, slight overshoot).
- Repeated drags show different tear depths; nothing ever fully detaches.

## Rebuild it
1. Build the ticket as two absolutely positioned halves with `rounded-xl bg-white shadow-sm`, divided by a `border-l-2 border-dotted border-neutral-300` line.
2. Put the stub in its own element with `transform-origin: left center`; on drag, map pointer distance to `rotate` and a small `translateX` using Motion `useDragControls` or pointer events.
3. Draw the torn edge as an SVG `clipPath` (a jagged polyline) on both halves, revealing more teeth as the drag distance grows.
4. Snap back with a spring (`type: "spring", stiffness: 400, damping: 22`).
5. Use placeholder route, flight and seat values, and an SVG barcode made of random-width rects.

## Generation prompt
A minimal UI animation of a white boarding pass card on a soft light grey background: a cursor grabs the seat stub and pulls it, the stub bends away along a dotted perforation with a jagged torn paper edge, then springs back into place; clean sans-serif route letters, small grey labels, a black barcode, soft shadows, calm and tactile, no real airline branding.