Coupon Tear Reveal

A tear-open coupon with a falling stub and copy confirmation, with configurable promo code, labels, colors, and fonts.

Why this one

The code starts hidden. A resistant drag develops a seeded, irregular tear from top to bottom, then releases the stub into a gravity-driven fall with ten paper confetti pieces. Staggered code printing and a spring-loaded confirmation make both reveal and copy easy to recognize. The demo applies the savings to three rolling product prices.

How it works

1. onLayout measures the container. The coupon defaults to 86% of that width and a height of 42% of its width, with a 96-point minimum height.
2. A single tear shared value drives the paper edge, fibers, dotted seam, and stub rotation around the bottom of the seam. Geometry uses fixed sine-based offsets, so reversing a drag does not regenerate the paper.
3. Gesture Handler arbitrates the drag and tap alternative. Below 60%, release returns with an explicit-mass spring. Crossing 60% finishes the tear automatically, then runs a 1.1-second gravity fall.
4. Ten deterministic confetti pieces share the fall clock. Each code character prints with a 30 ms offset and a 6-point drop.
5. The host's onCopy(code) performs clipboard work. Confirmation waits for it to resolve; a rejected promise leaves the action retryable. The phase spring drives the stamp, two-point shake, and button width. Pressure has separate shared values.
6. reset() cancels motion and invalidates pending copy confirmations. Unmount also cancels animation work. The demo stops its autoplay timers on touch.

Install

npx expo install @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-worklets

Place the component beneath a GestureHandlerRootView. Configure Reanimated and Worklets for your Expo SDK. On web, initialize CanvasKit before importing the component, using Skia's web loading boundary. All geometry and icons are local; no images or network requests are needed. Lucide icon paths use the ISC license.

Usage

import { CouponTearReveal } from './coupon-tear-reveal';

// Supply your application's actual clipboard implementation.
<CouponTearReveal onCopy={copyToClipboard} />;

A different campaign, with external control:

import { useRef } from 'react';
import {
  CouponTearReveal,
  type CouponTearRevealRef,
} from './coupon-tear-reveal';

function SummerOffer() {
  const coupon = useRef<CouponTearRevealRef>(null);
  return (
    <CouponTearReveal
      ref={coupon}
      code="SUMMER25"
      headline="−25%"
      subline="YOUR NEXT ORDER"
      terms="One use. Select items only."
      colors={{ accent: '#85D6FF', border: '#477A91' }}
      labels={{ tear: 'PULL', copy: 'Use code' }}
      onCopy={copyToClipboard}
      onReveal={trackReveal}
      width={300}
      fontFamily="YourSans"
      headlineFontFamily="YourDisplay"
      monoFontFamily="YourMono"
    />
  );
}

copyToClipboard and trackReveal above are host functions. The ref exposes tearOff(), reset(), and asynchronous copyCode().

Clipboard contract

This component does not install or import a clipboard package. Supply onCopy(code) to copy through your existing integration, such as Clipboard.setStringAsync if your application already uses expo-clipboard. Do not resolve until copying succeeds. Throw or reject on failure. Copy controls remain disabled without a handler. onReveal fires once per completed tear, and reset() starts a new cycle.

The bundled demo's handler applies the discount to the displayed prices; it does not write to the operating system clipboard.

Props

Theme defaults: paper #161618, volt #E8FF47, urgency #FF4D2E, success #3DDC97, text #F5F5F2, muted rgba(245,245,242,0.6), border rgba(232,255,71,0.35), fibers #C9C7B9, button ink #0A0A0B.

Compatibility

Targets Expo SDK 58, React Native 0.88.0, Reanimated 4.7.1, Worklets 0.13.0, Gesture Handler 3.3, and Skia 2.14.0. Uses modules bundled with this SDK's Expo Go. Supports iOS, Android, and web. No clipboard dependency is needed by the component.

Accessibility

The stub is a labeled button with a tap and accessibility-activate alternative to dragging. Revealing announces the code. Copy controls are at least 48 points high and expose disabled/busy states. The stub leaves the accessibility tree once revealed. Customize all accessible labels through labels. Reduced motion replaces tearing/falling with 200 ms fades, removes confetti and shake, and prints characters without translation. The code remains accessible after the reveal; the stamp is decorative.