Gift Box Reveal

Pick a box, get a prize drawn from your real weighted odds. The pick is theater; the draw is honest.

Copied 0 times.

Pick a box, win a prize

Try it: pick a box. The prize is drawn by weight before it opens.

Members only

This design needs a membership.
Today's price: $1/month, locked forever once you join.

Get it for $1/month Log in

Build a gift-box-reveal promo game for my website. Match my existing design system, colors, and fonts.

STRUCTURE
- A headline inviting the visitor to pick a box, a row of identical gift boxes (SVG or styled divs with a lid, ribbon, subtle shadow), and a short line stating the rules in one sentence.
- Three boxes in a row (stacked with smaller boxes on very narrow screens).
- The game lives behind a button placed on the page ("Try your luck"): clicking it expands the game inline in a reserved space (no layout shift, the space is allocated from first paint).

ODDS AND HONESTY (non-negotiable)
- Prizes live in one config array: { label, prize code or value, weight }. When the visitor picks a box, the prize is drawn by WEIGHT from this array at that moment: every box is identical and the choice is pure theater, which is fine as long as the DRAW is honest. Never pre-assign a "good" box, never show other boxes containing better prizes they "missed" (that is a rigged near-miss display; forbid it in a comment), and never display an outcome different from the draw.
- Empty config or zero total weight = the game does not render. A clearly marked TODO tells me to define real prizes, weights, and redemption, and to check prize-promotion legality in my market.
- One play per visitor: localStorage flag set on pick; returning visitors see their result state, not a fresh game.

REVEAL
- The chosen box shakes briefly, the lid opens (400-600ms), and the prize label rises out with a small burst of brand-colored particles. Respect prefers-reduced-motion: skip the shake and particles, fade the result in.
- Unchosen boxes fade to a muted state WITHOUT revealing any contents. The result line states the prize and exactly how to redeem it, announced via aria-live="polite".

QUALITY
- Each box is a real button with an aria-label ("Gift box 2 of 3"); keyboard operable with visible focus rings; disabled after the pick.
- Fixed dimensions for the game area from first paint: no layout shift, boxes at least 44px tap targets with comfortable spacing.

QUESTIONS
- Before you build, find or ask for: my real prizes with their weights and how each is redeemed. Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.

Members only

What it does

Pick a box, any box. The gift box reveal is the promo game built on that little thrill: a row of identical boxes, one tap, a shake, and a prize rising out of the lid. Try a pick in the preview.

The boxes really are identical; the prize is drawn from your own odds the moment someone picks.
The choosing is theater; the drawing is pure math, every single time.
Unpicked boxes fade out without revealing a thing; fake almost-wins are banned as rigged.
The winner sees the prize and exactly how to claim it.
One play per visitor, and coming back shows the result, not a fresh game.

How it works

1Pick 3 or 4 boxes, and choose how the game appears: sitting on the page behind a button, or popping up after 20 seconds.
2Copy the prompt, the game's full recipe for your AI, into whichever AI you use.
3Fill in your real prizes, their odds, and how winners claim them; a note reminds you to check prize rules in your country.
4Play once to test: the shake, the lid opening, and the prize should all follow a draw that happened before the animation even started.
5Reload the page after playing: you should see your result again, not a new round, because everyone gets exactly one pick.
6Check the other boxes too, because the ones nobody picked should fade out without revealing a thing.

What you can customize

How many boxes: three is the classic pick; four stretches the suspense and folds into a neat square on phones.
How it appears: on the page keeps it as a Try your luck button that unfolds in place; the popup version invites visitors after 20 seconds, once ever.
Boxes, colors, and wording adapt to your brand automatically, because your AI builds the game right inside your own design.