Surprise Box
A wireframe shipping box alone on black that begs to be clicked. Each poke hops the box, rattles its top flaps, and pitches the poke sound up a step; land five pokes inside the combo window and the lid bursts open, firing waves of tumbling 3D cubes on real gravity. A pointer-transparent stencil of the box front is painted over the rising confetti, so cubes read as leaving from inside the box and only jump in front once they start falling. Inspired by workbox.sh.
npx shadcn@latest add https://ui.aryank.space/r/surprise-box.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "aryank.space" | Wordmark printed along the bottom of the front face. |
| specCode / specNote | string | "BLK-STD-01" / "HANDLE WITH CARE" | Stencil lines printed at the top of the front face. |
| brand | string | "Powered by BLANK" | Credit line printed on the right face beside the mark. |
| pokesToOpen | number | 5 | Pokes needed inside the 400ms combo window before the lid bursts open. |
| colors | string[] | 15 hex colors | Confetti palette; each color also yields a 0.7 shade used on alternating cube faces. |
| sound | boolean | true | Whether poke, land, burst, and close cues play. |
| assetBase | string | hosted /assets/surprise-box | Origin serving poke.mp3, box_land.mp3, box_explode.mp3, and box_close.mp3. |
| className / style | string / CSSProperties | undefined | Applied to the root; the box fills whatever box you give it. |
label / specCode / specNote / brandtextPrinted copy on the front and right faces.
pokesToOpentextClicks inside the combo window before the box bursts.
colorscolorConfetti palette. Each entry also produces a 0.7 shade for the cube side faces.
soundtextSet false to run the box silently.