Eclipse Background for React

A total eclipse as a frame: the moon is wider than the box's shorter side, so only its rim shows, ringed by a thin line of light and a soft corona whose streamers fan out along the longer sides and sway, while a diamond of sunlight glides along the rim and sparkles. The moon is your page's own background, so a headline sits inside the ring and reads as it does anywhere else, in either colour scheme: white gold on black in the dark, warm gold on paper in the light. The corona is CSS gradients painted once; two layers of seeded streamers sway with transforms and blend onto the sky, and the diamond rides a rotating wrapper, so the browser repaints nothing.

Centre a short headline inside the ring. For a giant sun rising from the top edge instead, use Corona; for the glowing remnant of an exploded star, Supernova; for stage lights sweeping down from above, Spotlight.

Installation

Usage

import { Eclipse } from "@/components/ui/eclipse";

<Eclipse className="flex min-h-[460px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Totality</h1>
</Eclipse>

Eclipse is a container: whatever you put inside sits on top of the scene, in normal flow, and a centred headline lands inside the ring. The moon's radius is 66% of the container's shorter side, capped at 42% of the longer one, so the rim and its corona show along the longer sides; on a tall box the whole frame turns a quarter, so the streamers fan up and down and the diamond rides the top. The component paints your background colour behind the corona. For the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

Size

size is the moon's radius as a share of the container's shorter side (0.66 by default). At size={0.5} the whole ring fits in the card, with intensity="strong" for a brighter corona.

Blood sun

colors takes three colours: the rim and the diamond, the streamers, and the outer glow. moonColor paints the disc in any colour. The container's dark class and bg-background keep this scene dark in both colour schemes.

Accessibility

The eclipse is decorative: it's hidden from screen readers and never takes the pointer, and your content stays on top in normal flow. With reduced motion the streamers stop swaying and the diamond stops where it is, so a still eclipse stays. Nothing flashes; the diamond's sparkle swells and settles over three seconds.

Text inside the ring keeps the contrast your theme gives it, since the moon is your background colour: use your foreground colour (text-foreground). The rim, the diamond and the corona just outside it are the brightest parts of the scene, so keep text off them.

FAQ

API Reference