CardSpin

CardSpin is the reel a case opening is known for. A strip of tiles races under a marker, slows down, and stops on a card. The winning tile lights up, the rest dim, and the card lifts out of it into the reveal. One press is one spin.

Usage

import { useOpenedCards } from "@react-cards-opening/core";
import { CardSpin } from "@react-cards-opening/ui";

function Spins({ won, catalog }) {
  const { opened, open } = useOpenedCards("spins:42");
  return <CardSpin cards={won} pool={catalog} opened={opened} onOpen={open} />;
}

The spin decides nothing

cards is what was won, decided before anything moves. pool is everything that could have come up, and it only fills the strip. Tiles are drawn from the pool by tier weight with pickCard, so rare cards pass less often and the strip looks like the odds, and the tile under the marker at the end is always the card that was dealt. The strip is built from a seed, so a server and a browser lay out the same tiles.

Props

SpinReel on its own

CardSpin is SpinReel and CardOpening wired to useCardOpening. When the layout is yours, take the reel alone. Its handle has one call: spin plays the reel and hands back what launch on CardOpening takes, so the card waits for the reel and then lifts out of the winning tile.

import { CardOpening, SpinReel, type SpinReelHandle } from "@react-cards-opening/ui";

const reel = useRef<SpinReelHandle>(null);

<SpinReel handle={reel} winner={hunt.current} pool={catalog} spinKey={spins} />
<CardOpening opening={hunt.opening} launch={(card, show) => reel.current?.spin(show) ?? null} />

Parts and variables

Related

• CardOpening
• Rolls and odds
• CardCase
• CardPack
• Effect plans

Last updated 2026-10-11. Read this page as Markdown.