Introduction
react-cards-opening is the moment a card is opened, as a library. A card lifts out of wherever it was, flies to the middle of the screen face down, hums, turns over, stays as long as it takes to read, and lands where it belongs. How loud that is depends on how rare the card is.
Six cards, one a tier. Press them left to right.
Three packages
| Package | What it holds |
|---|---|
@react-cards-opening/core | The rules without a look: the queue, what each press means, rarity tiers, seeded rolls, opened-card storage. |
@react-cards-opening/effects | 64 effects and a layer to play them on. Works on its own: nothing in it knows what a card is. |
@react-cards-opening/ui | The look: the pack, the wheel, the reel, the case and the hunt, ten themes, and the effects brought along. |
Most apps install ui and core and render one component; effects comes with ui. The split is there for the other cases: a game with its own art direction keeps core and draws the reveal itself, a server deals cards with the same seeded roll the browser shows, and a page with no cards at all takes effects alone for a shockwave or confetti on anything.
What you get
- The reveal. CardOpening plays it over the page: flight, hum, flip, burst, and for loud tiers rays, a flash, shockwaves, a foil border, a shine and sparkles.
- The hunt. CardHunt hides cards in a grid and scans for them. It is the scan from Hype Stack's Wrapped, cut loose from the calendar it was born on.
- The rules. useCardOpening decides what a press means at each moment, when a card counts as opened, and what stopping does.
- Tiers that are yours. Four tiers ship. Three or seven of your own get the right show from one word each.
- One stylesheet. No CSS framework and no reset needed. Ten themes in dark and light, or one from a single colour.
- Yours to restyle. A
classNamesprop for every part, and rules light enough that a Tailwind utility or a class of your own wins. See Styling by hand.
What it is not
It is not a card game engine and it does not know what your cards do. It opens them. It also has no case-opening reel, no sound and no assets to download: every picture in these docs is drawn from nine strings of nine characters.
Where it comes from
The reveal was built for the year-in-review inside Hype Stack, where it turns achievements into cards. This library is that code with the product taken out. It is free and MIT licensed, and it stays that way.