Ticket Tear

An event ticket whose stub you physically tear off — then an ink stamp slams down.

Zero dependencies
React + Tailwind
Accessible
Reduced-motion aware

Animated · Full motion: idle animation, physics and effects. animated (default)

Grab the stub and pull it down: it hinges on the perforation, and past the tear point it rips away and falls. The ticket shakes, its edge turns jagged and an ink stamp lands with a bounce.

Installation

$ npx shadcn@latest add https://guetix.com/r/ticket-tear.json

Uses the shadcn CLI. It creates components/guetix/ticket-tear.tsx and installs nothing else.

Usage

example.tsx

"use client";

import TicketTear from "@/components/guetix/ticket-tear";

export default function TicketTearDemo({ variant = "animated" }: { variant?: string }) {
  return (
    <TicketTear animated={variant !== "regular"}
      kicker="Admit one"
      event="Build Night '26"
      venue="Hall B"
      date="Sat · 21:00"
      seat="GA-14"
      code="GX-0427"
      stamp="Admitted"
      accent="#f97316"
    />
  );
}

Check-in / RSVP confirmationCouponsOnboarding 'you're in'Gamified rewards

Under the hood

The details that make it feel right, and that a one-line prompt usually misses:

01Notches are radial-gradient masks; after the tear the mask swaps to a conic-gradient zig-zag edge.
02The stub hinges from its top-left, so pulling down rotates it along the perforation.
03The stamp uses `mix-blend-mode: multiply`, so it reads as ink on paper rather than a sticker.

Props

Prop	Type	Default	Description
event	string	—	Title.
kicker	string	"Admit one"	Line above the title.
venue / date / seat	string	—	Detail fields.
code	string	"GX-0427"	Stub code; also seeds the barcode.
stamp	string	"Admitted"	Stamp text.
accent	string	"#f97316"	Accent color.
onTear	() => void	—	Fired once torn.
resettable	boolean	true	Show the reset link.
animated	boolean	true	false = the calm “Regular” version (no idle or ambient motion).

Accessibility

The stub is a button: Enter/Space tears it.
The stamp is announced with `role="status"`.
Reduced motion: no fall or shake.

Ticket Tear

An event ticket whose stub you physically tear off — then an ink stamp slams down.

Zero dependencies
React + Tailwind
Accessible
Reduced-motion aware

Open in v0

Animated · Full motion: idle animation, physics and effects. animated (default)

Grab the stub and pull it down: it hinges on the perforation, and past the tear point it rips away and falls. The ticket shakes, its edge turns jagged and an ink stamp lands with a bounce.

Installation

$ npx shadcn@latest add https://guetix.com/r/ticket-tear.json

Uses the shadcn CLI. It creates components/guetix/ticket-tear.tsx and installs nothing else.

Usage

example.tsx

"use client";

import TicketTear from "@/components/guetix/ticket-tear";

export default function TicketTearDemo({ variant = "animated" }: { variant?: string }) {
  return (
    <TicketTear animated={variant !== "regular"}
      kicker="Admit one"
      event="Build Night '26"
      venue="Hall B"
      date="Sat · 21:00"
      seat="GA-14"
      code="GX-0427"
      stamp="Admitted"
      accent="#f97316"
    />
  );
}

Check-in / RSVP confirmationCouponsOnboarding 'you're in'Gamified rewards

Under the hood

The details that make it feel right, and that a one-line prompt usually misses:

01Notches are radial-gradient masks; after the tear the mask swaps to a conic-gradient zig-zag edge.
02The stub hinges from its top-left, so pulling down rotates it along the perforation.
03The stamp uses `mix-blend-mode: multiply`, so it reads as ink on paper rather than a sticker.

Props

Prop	Type	Default	Description
event	string	—	Title.
kicker	string	"Admit one"	Line above the title.
venue / date / seat	string	—	Detail fields.
code	string	"GX-0427"	Stub code; also seeds the barcode.
stamp	string	"Admitted"	Stamp text.
accent	string	"#f97316"	Accent color.
onTear	() => void	—	Fired once torn.
resettable	boolean	true	Show the reset link.
animated	boolean	true	false = the calm “Regular” version (no idle or ambient motion).

Accessibility

The stub is a button: Enter/Space tears it.
The stamp is announced with `role="status"`.
Reduced motion: no fall or shake.

Ticket Tear

Preview

Ticket Tear

Preview