CardWheel

CardWheel is the wheel of a daily spin. Wedges in their tiers' colours turn under a pointer that is knocked aside by each one that passes. The wheel slows, stops on a card, the winning wedge lights up, and the card lifts out of it into the reveal. One press is one spin.

Usage

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

function DailySpin({ won, catalog }) {
  const { opened, open } = useOpenedCards("spin:2026-10-11");
  return <CardWheel cards={won} pool={catalog} opened={opened} onOpen={open} />;
}

The wheel decides nothing

cards is what was won, decided before anything moves: deal it with rollCards on your server. pool is what goes on the wheel. Every card of the pool gets a wedge while there is room, and the wedge under the pointer at the end is always the card that was dealt. What is on the wheel stays the same from spin to spin, and it is laid out from a seed, so a server and a browser draw the same wheel.

Props

PrizeWheel on its own

CardWheel is PrizeWheel and CardOpening wired to useCardOpening. When the layout is yours, take the wheel alone. Its handle has one call: spin plays the wheel and hands back what launch on CardOpening takes. Whatever you put inside it sits in the hub.

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

const wheel = useRef<PrizeWheelHandle>(null);

<PrizeWheel handle={wheel} winner={hunt.current} pool={catalog} segments={10}>
  <button onClick={() => hunt.start()}>Spin</button>
</PrizeWheel>
<CardOpening opening={hunt.opening} launch={(card, show) => wheel.current?.spin(show) ?? null} />

Parts and variables

Related

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

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