# Peel to Reveal Offer

> A SaaS promotion section with one tactile peelable voucher, a revealed coupon code and a complete copy-to-redemption demonstration.

Canonical: https://gsapvault.com/sections/peel-offer-section
Live demo: https://gsapvault.com/demos/peel-offer-section/index.html

| Property | Value |
|----------|-------|
| Type | section |
| Tier | paid |
| Price | Included only in the Vault |
| Difficulty | advanced |
| Plugins | Core GSAP only |
| Techniques | pointer-interaction, clip-path, keyboard-disclosure, responsive-section, reduced-motion |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

A complete promotional section built around one oversized peelable voucher. The fictional Relay SaaS example pairs a clear product benefit with an introductory discount, visible eligibility terms and a code visitors can copy.

Drag any corner to lift the sticker across a mathematically reflected fold, or use the native Reveal code button. The revealed code leads to an explicitly labelled sample plan demonstration. No real account, subscription or payment is created.

The composition adapts to narrow host columns, supports independent instances and keeps the code and offer accessible without JavaScript or GSAP.

## Features

- One focal peelable voucher with exact fold geometry and reflected underside
- Complete SaaS benefit, introductory offer, eligibility terms and action sequence
- Copyable coupon and working sample-plan redemption demonstration
- Any-corner drag, native button, keyboard and touch operation
- Immediate reduced-motion states and readable no-JavaScript fallback
- Root-scoped brand tokens and semantic content edit points
- Independent instances with mount and teardown hooks
- Container-aware phone and narrow-column composition

## Use Cases

- SaaS introductory promotions
- Membership welcome offers
- Creative software discounts
- Newsletter subscriber rewards

## Vibe-Code Ready Setup

This website section includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

The cover and underside are clipped on opposite sides of the pointer-defined crease. A reflection matrix places a mirrored copy of the sticker across that crease, with a moving highlight and cast shadow. Releasing early restores the curl; passing the threshold reveals the coupon.

Native controls share the same interruptible state machine. Each section owns its GSAP context, media conditions, observer, event handlers and generated fold layers. Teardown restores readable coupon content without affecting the host.

## Documentation

How this website section works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### 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.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This website section is included only in the Vault, for existing and new owners. It is not sold individually. The standard licence covers unlimited personal and commercial projects; bundled assets retain their own licence requirements.

- [Get the Vault](https://gsapvault.com/pricing)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt