# Shockwaves

Shockwaves give the legendary turn its weight. Two rings in the tier's colour start at the card's centre and roll outward past its edges, the second chasing the first.

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/effects/shockwaves/
>
> Press the card and watch its edges as it turns.

## When it plays

Only tiers whose `effect` is `legendary` get it, and nobody with reduced motion.

## How it is built

Each ring is a circle as wide as the card with no fill, drawn by a 3 pixel box shadow and a 40 pixel glow. It scales from 0.2 to 4.5 and fades over 1.3 seconds on `expo.out`.

The second ring starts 0.2 seconds after the first. Only `transform` and `opacity` move, so the rings cost nothing to lay out.

## What changes it

- They belong to tiers whose `effect` is `legendary`, and are skipped with reduced motion.

## Related

- [Flash](https://bettertyped.github.io/react-cards-opening/docs/effects/flash/)
- [Foil border](https://bettertyped.github.io/react-cards-opening/docs/effects/foil-border/)
- [Crack](https://bettertyped.github.io/react-cards-opening/docs/effects/crack/)
- [Effects](https://bettertyped.github.io/react-cards-opening/docs/effects/)
- [Rarity tiers](https://bettertyped.github.io/react-cards-opening/docs/rarity-tiers/)

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