Skip to content
react-cards-opening

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.

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 for the rest of its show.

Last updated . Read this page as Markdown.