Red Envelope Button
An open-the-red-envelope interaction — an idle wiggle, a click to tear it open, a rolling amount, and a burst of gold coins.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
A complete open-the-red-envelope interaction: the gold-patterned red envelope wiggles gently at rest to invite a click; on click the gold 「福」 seal twists open, the flap lifts, an amount card slides up and rolls its digits to the target amount, and gold coin emoji particles burst upward at the same time. It suits prize giveaways, red envelope draws, and festive marketing, and it can be reset and replayed.
npx shadcn@latest add "https://webberui.com/r/red-envelope-button.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<RedEnvelopeButton />
Installation
npx shadcn@latest add "https://webberui.com/r/red-envelope-button.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/red-envelope-button.
Usage
import { RedEnvelopeButton } from "@/components/ui/red-envelope-button";
<RedEnvelopeButton
amount={6000}
blessing="財源廣進"
onOpen={() => console.log("red envelope opened")}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
amount | number | — | The amount rolled into view once opened (in dollars) |
blessing | string | "恭喜發財" | Blessing phrase: shown vertically on the envelope cover and on the amount card |
prefix | string | "NT$" | Amount prefix |
coinCount | number | 18 | Number of gold coin particles |
onOpen | () => void | — | Fires at the moment it is torn open |
className | string | — | Forwarded to the outer container |
Accessibility
- When the user has "reduce motion" enabled at the system level, the idle wiggle and the gold coin particles are disabled and a click shows the amount directly
- The envelope is a native
button, openable from the keyboard with Enter / Space, with anaria-labeldescribing the current state - The result is announced through an
aria-live="polite"region reading out the amount and the blessing; decorative elements such as the flap, the seal, and the particles are allaria-hidden