Skip to content
react-cards-opening

Components

Five ways to open a card, and the pieces they are built from. All of it below is live, in whatever theme you pick: open the pack, spin the wheel.

Every one is the real component, not a recording.
CardPackA sealed pack. It bursts, deals face down, and each card turns on a press.Props and code
CardWheelA prize wheel that spins under a pointer and lands on your card.Props and code
CardSpinA reel that races under a marker and stops on the card that was dealt.Props and code
CardCaseA case that opens and gives up its cards one after another.Props and code
CardHuntA grid, a scan that hunts it, and the list of finds.Props and code
CardOpeningThe reveal over the page. Six tiers, six shows: open each.Props and code
EffectLayerA place to play any effect, on anything.Props and code
ScanGridThe grid, and the scan that hunts a cell down.Props and code
CardA card standing still, for a collection or a shop.Props and code
PixelGlyphPixel art from nine strings of nine.Props and code
ThemesTen themes, dark and light, and room for your own.Props and code

Install

bash
pnpm add @react-cards-opening/ui @react-cards-opening/core gsap
tsx
import "@react-cards-opening/ui/styles.css";

How they fit

Every opener ends in the same reveal. CardHunt is ScanGrid and CardOpening wired to useCardOpening; CardSpin swaps the grid for a SpinReel, CardWheel for a PrizeWheel, and CardCase for a LootCase. CardPack runs on useCardPack and turns its cards where they lie. When the layout is yours (cards in a shop, a daily reward), use CardOpening on its own and tell it where a card leaves from and where it lands.

What they share

  • `theme`: a CardTheme. moss in the dark when left out.
  • `rarities`: your tiers. The six defaults when left out.
  • Their own ground rules. Each resets only the elements it renders, at one class of specificity, so a page's button or p styles do not reach in and nothing leaks out.
  • Pixels, not rems. A page with a 10 pixel root font gets the same card as one with 16.
  • `effects`: what each tier plays on top of its reveal. Six signature shows by default, from a library of dozens.
  • `classNames`: a class of your own for any part, and a stylesheet where every rule weighs one class, so yours wins. Styling by hand has the Tailwind setup.

Last updated . Read this page as Markdown.