# Rays

Rays are what makes a loud tier read as loud from across the room. A wheel of soft wedges in the tier's colour opens behind the card as it turns and keeps turning while the card is face up.

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/effects/rays/
>
> Press the card. After it lands, press it again: in a peek the wheel turns for as long as you look.

## When it plays

Tiers whose `effect` is `loud` or `legendary` get it. Of the four that ship, that is epic and legendary.

## How it is built

The wheel is one element, 90% of the viewport's shorter side across: a repeating conic gradient (8 degrees lit, 16 dark) under a radial mask that fades it out toward the edge.

It fades in and grows from 0.6 to full size in half a second, then turns 60 degrees over 2.6 seconds. In a peek, where the card can stay up for a minute, it loops instead: one full turn every 16 seconds.

## What changes it

- A tier gets rays when its `effect` is `loud` or `legendary`.
- A legendary adds a second, finer wheel turning the other way. See [Flash](https://bettertyped.github.io/react-cards-opening/docs/effects/flash/) for the rest of its show.

## Related

- [Burst](https://bettertyped.github.io/react-cards-opening/docs/effects/burst/)
- [Flash](https://bettertyped.github.io/react-cards-opening/docs/effects/flash/)
- [Sparkles](https://bettertyped.github.io/react-cards-opening/docs/effects/sparkles/)
- [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/rays/