Effect plans

Every opener plays a show for each tier, on top of the card's own reveal: a wind-up while the card waits face down, and the hit as it turns. Out of the box that is SIGNATURE_EFFECTS, a different show for each of the six tiers. effects swaps it for one of six ready-made sets, a plan of your own, or nothing.

The signature shows

Each tier is built from different effects, so a card is known by how it arrives and not only by its colour. No two tiers share more than a couple of effects, and the shows get longer as the tiers get rarer.

A tier of your own that is not one of the six gets the show of what it does: a quiet tier a common's, a loud one an epic's, and so on up.

Usage

import { CardPack, EFFECT_SETS } from "@react-cards-opening/ui";

// The signature shows: nothing to pass.
<CardPack cards={cards} opened={opened} onOpen={open} />;

// One of the ready-made sets instead.
<CardPack cards={cards} opened={opened} onOpen={open} effects={EFFECT_SETS.storm} />;

// The card's own reveal and nothing more.
<CardPack cards={cards} opened={opened} onOpen={open} effects={false} />;

CardPack, CardSpin, CardCase, CardHunt and CardOpening all take it. With false, the reveal plays exactly its own thirteen effects.

The six sets

A plan of your own

A key is either a tier's own id or what a tier does (quiet, loud, legendary, mythic, from its effect in your tiers). An id wins when both are there, so one plan fits a game with three tiers or seven, and one tier can still be singled out. A plan with no mythic key gives a mythic its legendary steps.

A step is an effect's name, which plays as the card turns, or a cue that says when: on: "hum" plays while the card waits face down, and delay holds it back by that many seconds.

import { SIGNATURE_EFFECTS, type EffectPlan } from "@react-cards-opening/ui";

const plan: EffectPlan = {
  // Keep the signature shows, and change two tiers.
  ...SIGNATURE_EFFECTS,
  rare: ["shockwave", "sparks", { effect: "glitter", delay: 0.3 }],
  mythic: [
    { effect: "implosion", on: "hum" },
    "negative",
    "nova",
    "quake",
    { effect: "fireworks", delay: 0.2 },
    { effect: "flames", delay: 0.4 },
  ],
};

<CardHunt cards={cards} opened={opened} onOpen={open} levels={levels} effects={plan} />;

A plan can name effects of your own next to the library's. See an effect of your own.

When and where it plays

• In two moments. hum steps start as the card stops in the middle of the screen, face down. turn steps start with the card's own burst, 0.2 seconds into the flip. A card in a pack turns the moment it is pressed, so both play at the press.
• Behind the card, on a layer of its own (.rco-fx-layer, the effects key of classNames), centred on the card and sized to it.
• In the tier's colour, with a lighter tint of it as the second colour for effects that use two.
• Never under reduced motion. The card still turns, and nothing else moves.

Related

• Effects library
• EffectLayer
• Rarity tiers
• CardPack
• Show plan

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