# Foil border

The foil border is what a legendary wears for as long as it is on screen. A gradient of the tier's colour, its lighter tint and white turns slowly behind the card and shows as a 4 pixel edge of moving light.

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/effects/foil-border/
>
> The last card has it standing still too: a `Card` draws the border with CSS alone.

## When it plays

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

## How it is built

The border is a rounded box 4 pixels larger than the card on every side, with its overflow hidden. Inside it, a square twice the card's size carries a conic gradient and rotates: one turn every 2.4 seconds.

The colours come from the theme's legendary colour: it, 35% of it in white, it again, 60% in white, white. A second hue on a green or purple theme clashes, so there is no gold unless the theme's legendary is gold.

In the reveal a GSAP loop turns it. On a `Card` standing still the same markup turns on a CSS animation, so a shelf of legendaries needs no JavaScript to shimmer.

## What changes it

- `theme.rarity.legendary` (or whichever tier has the `legendary` effect) sets the colour.
- `--rco-radius` rounds the card and the border together.

## Related

- [Shockwaves](https://bettertyped.github.io/react-cards-opening/docs/effects/shockwaves/)
- [Shine](https://bettertyped.github.io/react-cards-opening/docs/effects/shine/)
- [Found pulse](https://bettertyped.github.io/react-cards-opening/docs/effects/found-pulse/)
- [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/foil-border/