Centered Animated Gradient Border Hero Block for React

The card's frame is a wrapper with p-0.5, overflow-hidden and rounded corners, and the card sits inside it on bg-card, so only a two-pixel ring of the wrapper shows. Behind the card, an aria-hidden square much larger than the frame is painted with a conic-gradient and turned by Tailwind's built-in animate-spin; the frame clips it to the ring. Turning a layer is a transform, which the browser composites without repainting, so the page stays smooth while it spins.

The gradient on the spinning square goes from var(--foreground) through 25% and fully transparent stops, made with color-mix(in oklab, var(--foreground) 25%, transparent), and back. Where it's transparent, the frame's own bg-border shows, so the card keeps a plain border all the way round. Swap var(--foreground) for any token, such as var(--primary), if you want a colored sweep. Use the token as it is: the theme's colors are oklch values, so hsl(var(--primary)) would be an invalid color and draw nothing.

[animation-duration:6s] on the spinning square sets one full turn; 3–4s feels energetic, 8–10s calmer. The frame's padding is the thickness: p-px for a hairline, p-1 for a bolder ring. The card inside rounds its corners to the frame's radius minus the padding, rounded-[max(0px,calc(var(--radius-2xl)-2px))], so change the 2px with it, and the corners follow your theme's radius.

The border stops turning: motion-reduce:animate-none leaves the gradient at rest, a still ring that's darker at the top. The announcement, the card and the fine print fade up once on load through Tailwind's starting: variant, and motion-reduce:transition-none removes that too, so everything renders in place. The block has no state and runs no script.

Yes. The headline is the page's one h1, and the spinning layer is decorative and hidden from assistive technology. The announcement and both calls to action are links named by their text, and the stats are a description list, so each figure is read with its label. Values with units such as <50 ms and 12K+ are isolated with bdi, and the price with dir="ltr", so their signs stay in place in right-to-left languages. On Base UI, each button renders its link with render={<a href="#" />} and nativeButton={false}.

Use it for a launch or a premium product where one moving accent should frame the offer, with no artwork to produce. Keep it to one per page: a second animated border competes with the first. Use a plain centered or gradient-wash hero when the copy should stand on its own, or when the page already has motion elsewhere.