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.
Paper Duck
Common
Floats. Does not do much else, and is at peace with that.
Window Plant
Uncommon
Grows toward whatever you were about to do next.
Lantern Fox
Rare
Knows a shortcut. Will not say where it comes out.
Storm Bolt
Epic
Strikes the same place twice, on purpose.
Vault Dragon
Legendary
Keeps one of every card ever dealt. This one is its own.
Ash Phoenix
Mythic
Burns down once a century and starts again from the first line.
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 thelegendaryeffect) sets the colour.--rco-radiusrounds the card and the border together.