# 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.

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/
>
> 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](https://bettertyped.github.io/react-cards-opening/docs/core/rolls/) the browser shows, and a page with no cards at all takes `effects` alone for a [shockwave or confetti](https://bettertyped.github.io/react-cards-opening/docs/effects/library/) on anything.

## What you get

- **The reveal.** [CardOpening](https://bettertyped.github.io/react-cards-opening/docs/components/card-opening/) 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](https://bettertyped.github.io/react-cards-opening/docs/components/card-hunt/) 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](https://bettertyped.github.io/react-cards-opening/docs/core/use-card-opening/) 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](https://bettertyped.github.io/react-cards-opening/docs/guides/custom-tiers/) get the right show from one word each.
- **One stylesheet.** No CSS framework and no reset needed. Ten [themes](https://bettertyped.github.io/react-cards-opening/docs/theming/) in dark and light, or one from a single colour.
- **Yours to restyle.** A `classNames` prop for every part, and rules light enough that a Tailwind utility or a class of your own wins. See [Styling by hand](https://bettertyped.github.io/react-cards-opening/docs/guides/styling/).

## 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](https://www.hype-stack.dev/wrapped?utm_source=react-cards-opening&utm_medium=referral&utm_campaign=docs-page), 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.

## Related

- [Installation](https://bettertyped.github.io/react-cards-opening/docs/installation/)
- [Your first opening](https://bettertyped.github.io/react-cards-opening/docs/first-opening/)
- [CardOpening](https://bettertyped.github.io/react-cards-opening/docs/components/card-opening/)
- [Effects](https://bettertyped.github.io/react-cards-opening/docs/effects/)

Source: https://bettertyped.github.io/react-cards-opening/docs/