Skip to content
react-cards-opening

Shine

The shine is the foil on the face itself. A narrow band of light crosses the card from one side to the other, rests out of sight, and crosses again, for as long as the card is up.

Press the card and leave it up. The band crosses, waits 1.2 seconds, and crosses again.

When it plays

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

How it is built

The band is a layer over the face with a linear gradient three times the card's width: transparent, the tier's colour, near-white, the tier's colour, transparent. mix-blend-mode: screen makes it lighten the face instead of covering it.

It moves by its background position, from 115% to -15% in 0.9 seconds. Both ends put the band wholly off the card. Run it any further and the gradient's next copy slides back on and sits there, lit, through the pause.

background-repeat: no-repeat matters for the same reason: one band, one pass.

What changes it

  • It belongs to tiers whose effect is legendary. A Card standing still plays it with CSS.

Last updated . Read this page as Markdown.