# 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.

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/effects/shine/
>
> 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.

## Related

- [Foil border](https://bettertyped.github.io/react-cards-opening/docs/effects/foil-border/)
- [Sparkles](https://bettertyped.github.io/react-cards-opening/docs/effects/sparkles/)
- [Flight](https://bettertyped.github.io/react-cards-opening/docs/effects/flight/)
- [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/shine/