# Burst

The burst is the one effect every tier shares. As the card turns, 22 small squares in its tier's colour fly out from its centre in a ring and fade, so even a common card lands with something.

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/effects/burst/
>
> Press the card. The burst fires 0.2 seconds into the turn.

## When it plays

Every card gets it, whatever its tier.

## How it is built

The particles are 22 elements that already sit in the card, invisible. Nothing is created when it fires.

Each flies along its own angle to a distance set by its index, so the ring is uneven on purpose: `width * 0.7` plus up to 90 pixels across, `height * 0.55` plus up to 70 down. They scale from 0.6 to 1 and fade over 1.1 seconds on `expo.out`.

The tween sets `immediateRender: false` in its to-vars. Without it the sparks would be drawn at the card the moment the reveal is built, before the card has even left.

## What changes it

- The colour is the tier's, from `theme.rarity`.
- The burst plays with reduced motion too: it is light, not movement of the page.

## Related

- [Flip](https://bettertyped.github.io/react-cards-opening/docs/effects/flip/)
- [Rays](https://bettertyped.github.io/react-cards-opening/docs/effects/rays/)
- [Shine](https://bettertyped.github.io/react-cards-opening/docs/effects/shine/)
- [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/burst/