# Effects

64 effects, and what they look like stacked. Every tile below is the library playing live, on a card of the tier it suits: press one to play it again.

## Six signature shows

What every opener plays when told nothing: one show per tier, each built from different effects. They are a [plan](https://bettertyped.github.io/react-cards-opening/docs/effects/plans/), and a plan can be swapped.

- **common**: slam, dust
- **uncommon**: ripples, leaves, fireflies
- **rare**: converge, frost, hex, shards, rim, glitter
- **epic**: implosion, sigil, diamond, starburst, punch, spiral, orbit
- **legendary**: halo, flash, sunburst, pillar, shake, starburst, coins, beams, embers
- **mythic**: flicker, vignette, converge, implosion, negative, nova, cracks, lightning, quake, chroma, comets, flames, smoke

> Live: see them play at https://bettertyped.github.io/react-cards-opening/docs/effects/

## Combinations

Stacks to take as they are or pull apart. The names under a tile are what to pass to `play`, or to put in a plan.

- **Dragon hoard** (legendary): halo, flash, sunburst, shake, coins, embers
- **Frozen lake** (rare): converge, frost, hex, snow, shards, rim
- **Arcane circle** (epic): implosion, sigil, starburst, spiral, orbit
- **Thunderhead** (mythic): flicker, vignette, lightning, quake, rain, chroma
- **Garden party** (uncommon): ripples, bloom, leaves, petals, fireflies
- **Arcade jackpot** (legendary): negative, ring-of-pixels, pixels, speedlines, punch, coins
- **New year** (epic): flash, pulse, fireworks, confetti, glitter
- **Deep sea** (rare): tint, sonar, aurora, bubbles, ripples
- **Phoenix** (mythic): implosion, nova, heatwave, quake, flames, embers, smoke
- **Supernova** (legendary): converge, flash, nova, starburst, shake, stardust, comets
- **Glitch drop** (epic): flicker, glitch, scanlines, chroma, pixels, echo
- **Spotlight** (common): letterbox, spotlight, slam, dust
- **Northern lights** (uncommon): halo, aurora, stardust, glitter
- **Shattered** (rare): cracks, shockwave, punch, shards, dust
- **Wishing well** (common): ripples, bloom, fountain, coins
- **Comet shower** (epic): focus, flare, speedlines, comets, echo
- **Holy light** (legendary): halo, pillar, rays, beams, sparks
- **Fairy ring** (uncommon): pulse, orbit, fireflies, glitter
- **Blizzard** (rare): vignette, frost, diamond, snow, rim
- **Impact** (mythic): negative, slam, shockwave, cracks, quake, speedlines, dust
- **Rose garden** (epic): halo, bloom, petals, glitter
- **Smoke and mirrors** (common): focus, flare, echo, smoke
- **Sunrise** (legendary): tint, sunburst, rays, flare, embers
- **Storm of sparks** (rare): lightning, pulse, shake, sparks, rim

> Live: see them play at https://bettertyped.github.io/react-cards-opening/docs/effects/

## Every effect

Each on its own, with the name that plays it. The [library page](https://bettertyped.github.io/react-cards-opening/docs/effects/library/) has how to play, stack and write them.

- **Particles**: sparks, confetti, embers, stardust, pixels, shards, fountain, bubbles, snow, petals, comets, spiral, fireflies, rain, orbit, implosion, smoke, coins, fireworks, glitter, ring-of-pixels, dust, leaves, flames
- **Light**: rays, beams, halo, flash, flare, spotlight, aurora, sunburst, bloom, starburst, pillar, lightning, rim, frost, sigil, cracks
- **Waves**: shockwave, ripples, pulse, sonar, hex, diamond, slam, converge, heatwave, echo, nova
- **Screen**: shake, quake, punch, vignette, tint, scanlines, glitch, chroma, letterbox, flicker, speedlines, negative, focus

> Live: see them play at https://bettertyped.github.io/react-cards-opening/docs/effects/

## Go deeper

- [Effects library](https://bettertyped.github.io/react-cards-opening/docs/effects/library/): Play one, stack several, write your own.
- [Effect plans](https://bettertyped.github.io/react-cards-opening/docs/effects/plans/): Which tier gets which of them, on any opener.
- [EffectLayer](https://bettertyped.github.io/react-cards-opening/docs/components/effect-layer/): A place to play them, on anything.

## The card's own effects

Under whatever a plan adds, a reveal has thirteen effects of its own, in a fixed order. Each has a page.

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/effects/
>
> All ten of the card's own effects in one reveal. Press it.

- [Flight](https://bettertyped.github.io/react-cards-opening/docs/effects/flight/): The first move of every reveal: the card lifts out of the element it was found in and flies to the middle of the screen, face down.
- [Hum](https://bettertyped.github.io/react-cards-opening/docs/effects/hum/): The beat a face-down card holds before it turns: its edge lights up in its tier's colour, and it hops or shakes depending on how rare it is.
- [Flip](https://bettertyped.github.io/react-cards-opening/docs/effects/flip/): The turn itself: the card straightens, rotates face up with a little overshoot, and its rows of text rise in one after another.
- [Burst](https://bettertyped.github.io/react-cards-opening/docs/effects/burst/): Twenty two square particles in the tier's colour thrown outward from the card as it turns face up.
- [Rays](https://bettertyped.github.io/react-cards-opening/docs/effects/rays/): A wheel of rays that opens behind a loud card as it turns and slowly rotates while the card is up.
- [Flash](https://bettertyped.github.io/react-cards-opening/docs/effects/flash/): A full-screen flash in the tier's colour the instant a legendary turns, and a softer one over the grid when a loud card is found.
- [Shockwaves](https://bettertyped.github.io/react-cards-opening/docs/effects/shockwaves/): Two glowing rings that expand from a legendary card as it turns, one a fifth of a second behind the other.
- [Foil border](https://bettertyped.github.io/react-cards-opening/docs/effects/foil-border/): A conic gradient that spins behind a legendary card's edge, in the theme's own legendary colour, never a fixed gold.
- [Shine](https://bettertyped.github.io/react-cards-opening/docs/effects/shine/): A band of light that sweeps across a legendary card's face every couple of seconds, blended so it brightens what is under it.
- [Sparkles](https://bettertyped.github.io/react-cards-opening/docs/effects/sparkles/): Sixteen small diamonds around a legendary card that blink on and off in a random order while it is face up.

- [Beam and lock](https://bettertyped.github.io/react-cards-opening/docs/effects/beam-and-lock/): The scan's hunt: a beam sweeps the grid lighting each column, doubles back, and a reticle closes in on the cell that holds a card.
- [Crack](https://bettertyped.github.io/react-cards-opening/docs/effects/crack/): The moment the scan lands: the cell flares in the card's colour, a ring rolls out, sparks fly, and a loud find shakes the whole grid.
- [Found pulse](https://bettertyped.github.io/react-cards-opening/docs/effects/found-pulse/): What a grid looks like after the hunt: found cells breathe in their tier's colour, throw a spark now and then, and open their card on a press.

## The order

| At | What happens | Who gets it |
| --- | --- | --- |
| 0 s | [Beam and lock](https://bettertyped.github.io/react-cards-opening/docs/effects/beam-and-lock/), then the [crack](https://bettertyped.github.io/react-cards-opening/docs/effects/crack/) | the scan |
| +0.15 s | [Flight](https://bettertyped.github.io/react-cards-opening/docs/effects/flight/), 0.75 s | every tier |
| then | [Hum](https://bettertyped.github.io/react-cards-opening/docs/effects/hum/), 0.5 to 0.9 s | every tier |
| then | [Flip](https://bettertyped.github.io/react-cards-opening/docs/effects/flip/), 0.6 s, with the [burst](https://bettertyped.github.io/react-cards-opening/docs/effects/burst/) 0.2 s in | every tier |
| with the flip | [Rays](https://bettertyped.github.io/react-cards-opening/docs/effects/rays/) | loud and legendary |
| with the flip | [Flash](https://bettertyped.github.io/react-cards-opening/docs/effects/flash/), [shockwaves](https://bettertyped.github.io/react-cards-opening/docs/effects/shockwaves/), [foil border](https://bettertyped.github.io/react-cards-opening/docs/effects/foil-border/), [shine](https://bettertyped.github.io/react-cards-opening/docs/effects/shine/), [sparkles](https://bettertyped.github.io/react-cards-opening/docs/effects/sparkles/) | legendary |
| then | The hold: as long as the card takes to read | every tier |
| then | The landing, 0.6 s | every tier |
| after | [Found pulse](https://bettertyped.github.io/react-cards-opening/docs/effects/found-pulse/) | the scan |

## Rules they all follow

- **Nothing is created mid-reveal.** Every particle is in the page from the start, invisible. An effect only moves what is there.
- **Only `transform`, `opacity` and shadows move.** Nothing an effect does changes the page's layout.
- **Tiles never change size.** A cell lights up; it does not grow over its neighbours.
- **Idle effects run only on screen**, on the Web Animations API, so a grid further down the page costs nothing.
- **The colour is the theme's.** No effect names a colour of its own.

## Related

- [Rarity tiers](https://bettertyped.github.io/react-cards-opening/docs/rarity-tiers/)
- [Show plan](https://bettertyped.github.io/react-cards-opening/docs/core/show-plan/)
- [CardOpening](https://bettertyped.github.io/react-cards-opening/docs/components/card-opening/)
- [Reduced motion](https://bettertyped.github.io/react-cards-opening/docs/core/reduced-motion/)

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