Glow Card React component

Glow Card is a free card with a rainbow glow that circles its inner edge: a conic gradient rotates around a ring that follows the corner radius, blurred into a soft light, with a line of text placed anywhere in a 3 by 3 grid. It uses only CSS (an animated @property angle), so there is no animation library.

colors sets the gradient stops (seven by default, from pink through orange, yellow, green and blue to purple), duration the seconds per rotation (default 6), and glowWidth and glowBlur the size and softness of the ring. A backgroundImage can sit under the glow, darkened by backgroundColor at overlayOpacity; it is decorative with an empty alt. The rotation pauses while the card is scrolled out of view.

Use it for announcement tiles, a highlighted feature or pricing card, AI or launch callouts, and short quotes that need to stand out on a dark page.

For a glow that follows the cursor with a 3D tilt, use Glare Card.