Tear-Off Sticker

Grab the corner and drag: the sticker folds back along a true crease, its underside showing, and comes away past the threshold. For reveals, gift cards, 'new' badges and onboarding.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add tear-off

Usage

Example

import { TearOff } from "@/components/galactrex/tear-off";

<TearOff sticker={<Sticker />} onPeel={reveal}>
  <Reward />
</TearOff>

Source

Installs to components/galactrex/tear-off.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	What the sticker hides.
`sticker`	`ReactNode`	—	The sticker's face.
`threshold`	`number`	`0.55`	Share of the diagonal before it comes off.
`onPeel`	`() => void`	—	Called once when peeled off.
`label`	`string`	`"Peel the sticker"`	Name of the peel action.
`className`	`string`	—	Extra classes for the outer element.

Variants

Gift. A code or a message underneath.
Badge. A small sticker on a card that peels to show details.

Accessibility

The sticker is a button: Enter or Space peels it in one go.

Motion and reduced motion

The crease is the perpendicular bisector of corner and pointer; face and flap are clip-path polygons.
Reduced motion: it comes off instantly.