Open sourceA free tool from Hype Stack

Card opening, for React.

Packs, wheels, reels, cases and hunts. Six rarities, each arriving with a show of its own. One stylesheet, no CSS framework.

Get started

Live in the page, not a recording. Hover a card, or open one.

5ways to open a card, all ending in the same reveal
6rarities, each arriving its own way
64effects, one name each, made to be stacked
0CSS frameworks needed, and nothing leaks into your page

Five ways to open a card

The same five cards in each. What was won is decided before anything moves.

5 cards inside. Press the pack.

A sealed pack bursts and deals its cards face down. Turn them in any order.How the pack works

Stack them into a show

Each tile is a handful of effect names played together. Press one to play it again.

The whole gallery

Dragon hoardhaloflashsunburstshakecoinsembers

Frozen lakeconvergefrosthexsnowshardsrim

Arcane circleimplosionsigilstarburstspiralorbit

Thunderheadflickervignettelightningquakerainchroma

Garden partyripplesbloomleavespetalsfireflies

Arcade jackpotnegativering-of-pixelspixelsspeedlinespunchcoins

New yearflashpulsefireworksconfettiglitter

Deep seatintsonaraurorabubblesripples

64 effects, one name each

Particles, light, shockwaves and screen effects. Press a few at once.

The whole library

Vault Dragon

Legendary

Keeps one of every card ever dealt. This one is its own.

Particles

Light

Waves

Screen

pack.tsx

import { useOpenedCards } from "@react-cards-opening/core";
import { CardPack } from "@react-cards-opening/ui";
import "@react-cards-opening/ui/styles.css";

export function Pack({ cards }) {
  const { opened, open } = useOpenedCards("pack:42");
  return <CardPack cards={cards} opened={opened} onOpen={open} />;
}

A pack in eight lines

Three packages, released together under one version. The rules are in one, with React as their only dependency. The effects are in another, and work without cards. The look brings both together.

@react-cards-opening/coreThe rules without a look: the queue, what each press means, rarity tiers, seeded rolls, opened-card storage.
@react-cards-opening/effects64 effects and a layer to play them on. Works on its own: nothing in it knows what a card is.
@react-cards-opening/uiThe look: the pack, the wheel, the reel, the case and the hunt, ten themes, and the effects brought along.

Card opening, for React.

Five ways to open a card

Stack them into a show

64 effects, one name each

A pack in eight lines

It came out of Hype Stack