Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Tear-off Coupon, animated React component

A promo code you claim by tearing off the stub. The ticket tilts under your hand and its holographic foil shifts colour as it moves. Pull the stub and it peels up and tears hole by hole, each bridge of paper snapping in turn; once free it swings from your finger in 3D, then drops into the tray and flips to show the code, ready to copy. A Tear off button does it for you.

  • Pro
  • Cards
  • Hover
  • Spring

Paper tearing hole by hole, a tap as the stub lands in the tray and a flick as it flips. Sound is off on this site until you switch it on.

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

A gift for you
Tear off the stub to claim it.
Your code lands here
Lumen
20% off
your first order
Tear to
claim
Lumen
LMN-20X4
20% off
Pull the stub away from the ticket.

Props

PropTypeDefaultWhat it does
codestring"LMN-20X4"The code printed on the back of the stub.
offerstring"20% off"The offer, big.
detailstring"your first order"The line under the offer.
brandstring"Lumen"The brand on the ticket.
validitystring"Valid until 31 Dec"When the offer ends.
colors[string, string]["#0a84ff", "#5e5ce6"]The coupon's colours, top left to bottom right.
onClaim(code: string) => void—Called once the stub is torn off.
onCopy(code: string) => void—Called when the code is copied.
enableSoundbooleantruePaper tearing, the stub landing and the flip. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseTears the stub off by itself until the visitor touches it. Never runs under reduced motion.
classNamestring—Extra classes for the card.

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry with your API key

    Tear-off Coupon is a Pro item, so the CLI has to send your API key. Do this once per project:

    1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
    2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
      NEXUS_API_KEY=nxs_your_key_here
    3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
      "registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}

How Tear-off Coupon works

A promo-code coupon you claim by tearing off its stub. Pull the stub away and it hinges about the bottom of the perforation, the way paper does: every little bridge of paper between the holes stretches by the angle times its distance from the hinge and snaps when it passes its give, so the tear runs down the perforation hole by hole from the top, with a rip for each, each side keeping its half of every hole and a few torn fibres, and the last bridges near...

The source, the install command and the build prompt come with Pro.

Tear-off Coupon questions

Does it make sound, and how do I turn it off?

Paper tearing hole by hole, a tap as the stub lands in the tray and a flick as it flips. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

More cards