# 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.

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/effects/plans/
>
> The six signature shows. Open them left to right.

## 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.

| Tier | While it waits face down | As it turns over |
| --- | --- | --- |
| Common | nothing | `slam`, `dust` |
| Uncommon | nothing | `ripples`, `leaves`, `fireflies` +0.25s |
| Rare | `converge` | `frost`, `hex`, `shards`, `rim` +0.1s, `glitter` +0.35s |
| Epic | `implosion` | `sigil`, `diamond`, `starburst`, `punch`, `spiral` +0.1s, `orbit` +0.5s |
| Legendary | `halo` | `flash`, `sunburst`, `pillar`, `shake`, `starburst` +0.12s, `coins` +0.1s, `beams` +0.25s, `embers` +0.4s |
| Mythic | `flicker`, `vignette` +0.1s, `converge` +0.15s, `implosion` +0.3s | `negative`, `nova`, `cracks`, `lightning`, `quake`, `chroma`, `comets` +0.05s, `flames` +0.15s, `lightning` +0.5s, `smoke` +0.7s |

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

```tsx
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](https://bettertyped.github.io/react-cards-opening/docs/effects/).

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/effects/plans/
>
> The same pack under each ready-made set.

## The six sets

| Set | Quiet tiers | Loud tiers | Legendary |
| --- | --- | --- | --- |
| `radiant` | `sparks` | `shockwave`, `halo`, `sparks` | `flash`, `nova`, `pillar`, `stardust`, `embers`, `quake` |
| `arcade` | `pixels` | `ring-of-pixels`, `pixels`, `punch` | `negative`, `ring-of-pixels`, `pixels`, `coins`, `speedlines`, `shake` |
| `festive` | `glitter` | `pulse`, `confetti` | `flash`, `starburst`, `fireworks`, `confetti`, `punch` |
| `storm` | `ripples` | `lightning`, `shockwave`, `shake` | `flicker`, `lightning`, `heatwave`, `comets`, `rain`, `quake` |
| `frost` | `glitter` | `hex`, `shards`, `halo` | `flash`, `hex`, `shards`, `aurora`, `snow`, `rim` |
| `cinema` | `rim` | `flare`, `echo`, `focus` | `letterbox`, `flare`, `bloom`, `beams`, `stardust`, `echo` |

## 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](https://bettertyped.github.io/react-cards-opening/docs/rarity-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.

```tsx
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](https://bettertyped.github.io/react-cards-opening/docs/effects/library/).

## 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](https://bettertyped.github.io/react-cards-opening/docs/effects/library/)
- [EffectLayer](https://bettertyped.github.io/react-cards-opening/docs/components/effect-layer/)
- [Rarity tiers](https://bettertyped.github.io/react-cards-opening/docs/rarity-tiers/)
- [CardPack](https://bettertyped.github.io/react-cards-opening/docs/components/card-pack/)
- [Show plan](https://bettertyped.github.io/react-cards-opening/docs/core/show-plan/)

Source: https://bettertyped.github.io/react-cards-opening/docs/effects/plans/