---
name: invite-code-flow
description: Build an invitation-code reveal where a covering sheet peels from right to left, exposing a fixed code beneath, with copying, re-covering, and Chinese or English UI.
---

# Peel to Reveal an Invite Code

Use this component in a teammate invitation, early-access invitation, or member referral screen. A sheet of paper covers a stationary invitation code. Clicking the paper or dragging it left peels it back from the right edge, exposing the code. The user can copy the code, then cover it again to reset. It does not verify codes, register accounts, or send invitations.

Keep the code fixed beneath the paper: the interaction is a progressive paper peel, not an expanding container or a text swap. The folded edge and its shadow should follow the reveal progress. Retain a click and keyboard path alongside dragging.

```sh
python3 scripts/generate.py -o index.html
python3 scripts/generate.py -o index.html --title "Invite your team" --accent "#4c8661"
```

Use `--params config.json` to configure `title`, `subtitle` (1–180 characters), `accent`, `bg` (3- or 6-digit hex colors), and `code`. The code must be 3–32 ASCII letters, digits, underscores, or hyphens and begin with a letter or digit. It is displayed and copied exactly as provided.

The generated page defaults to Chinese. Add `?lang=en` for English or `?lang=zh` for Chinese. Explicitly configured titles and subtitles remain unchanged in either language; other interface text follows the query parameter. The static HTML starts with `lang="en"`, which the runtime updates to the displayed language.

Read [references/design.md](references/design.md) before embedding or connecting to a product. Embedded previews can use an optional parent-page copy bridge; without a successful host response they select the code and explain manual copying. A standalone page uses native clipboard access with a synchronous legacy fallback. Only confirmed copy success displays a success message.