Peel to Reveal Offer

Quick start

Copy index.html and assets/ to a web server. No build step is required. To embed, copy the complete <section data-peel-offer> into your page, link assets/style.css, and load GSAP core followed by assets/script.js using the script tags from the demo. GSAP 3.12+ is supported; the demo uses 3.15.0. No plugins or smooth-scroll library are required. The body margin in the demo head is preview-only.

Make it yours

Edit the brand, heading, benefit, offer terms, sticker text and [data-offer-code] directly in HTML. Keep the visible terms consistent with the sticker amount and code. Change [data-redeem] to your checkout URL and remove the demo-only click listener that opens .rpo__plan; remove that sample plan when using a real destination. It deliberately creates no account and takes no payment. Without JavaScript, the native details panel and coupon remain usable.

The .rpo token block contains ground, ink, muted, accent, sticker ink, paper, rule, display/body font roles, content width, gutter and vertical spacing. Example: rename Relay to a membership product, change the headline to “More time for your next idea”, replace GOODSTART25 and its eligibility terms, then change --accent and --sticker-ink together after checking contrast. Typography uses system fonts; no font files, photos or other media require replacement or licensing. The voucher is live HTML, so editing it does not require image generation or geometry changes.

This design intentionally has one voucher. For multiple independent offers, duplicate the whole section. Use a different code and copy in each. There are no hidden content arrays or item counts. The heading can change from h2 to another level without losing its styling. Named container queries recompose the section in columns narrower than 950px. The section stays in normal flow and does not alter host scrolling.

Behaviour and options

Drag any corner inward. The cover and reflected underside meet at an exact crease. Releasing early restores the curl; passing data-peel-threshold="0.48" completes the reveal. Tap, Enter/Space on the sticker, or the native Reveal code button also reveal it. Restick reverses it. data-peel-duration="0.8" sets transition seconds. New requests interrupt previous transitions and settle to the newest requested state.

Copy code uses the Clipboard API on HTTPS/localhost. If permission is unavailable, the status asks the visitor to select and copy the visible text. The demo redemption opens a sample plan and displays the selected code. Replace this demonstration with your actual integration before publishing a real offer.

Reduced motion uses immediate reveal/reset. JavaScript or GSAP failure leaves the coupon and plan readable. No boot gate is required. The hidden cover is decorative enhancement in those fallbacks.

Lifecycle

window.mountPeelOffers(container) mounts uninitialised roots within a container (or the container itself). Call root.destroyPeelOffer() before removing a root. It removes only that instance's listeners, resize observer, generated fold layers and animations, restores readable content and removes its hook. Mount again with the same API. Each instance gets its own sample-plan ID. GSAP contexts own animations created by later event handlers as well as initial setup.

Dependencies and credits

GSAP core is loaded from jsDelivr; consult GSAP's standard licence for its terms. Fold geometry is adapted from GSAP Vault's Sticker Peel. All voucher content is editable HTML/CSS. This product contains no real discount, evidence claim, third-party photo or customer testimonial.