Corona Background for React

A sunrise from the top of the box: a giant sun sits mostly above the edge, only its glowing limb showing, and pours soft rays and a warm haze down into a sky that cools away from it, with faint coronal loops shimmering along the limb. Two layers of seeded rays sway slowly out of step, so the light keeps shifting like beams through haze. The sun, haze and loops are CSS gradients painted once; the rays move with transforms and blend onto the sky, so the browser repaints nothing. On a dark page it's amber light over deep navy; on a light page, cream and gold on paper.

It suits launch pages and calm, atmospheric heroes, with the copy in the middle or lower down. For a dark moon framed by its corona, use Eclipse; for the glowing remnant of an exploded star, Supernova; for light under water, Underwater; for light split into a fan, Prism.

Installation

Usage

import { Corona } from "@/components/ui/corona";

<Corona className="flex min-h-[420px] flex-col items-center justify-center">
  <h1 className="text-4xl font-semibold">Launch day is almost here</h1>
</Corona>

Corona is a container: what you put inside renders on top, in normal flow. The sun's radius is 42% of the container's width, and its centre sits above the box, a little past the middle on the end side, so only a sliver of its limb shows at the top and the rays reach every corner. It paints its own sky: your background with a warm wash in light mode, deep navy in dark mode. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

Red giant

colors takes up to three CSS colours: the sun and its rim, the haze, and the rays. Here a peach sun with deep red haze and coral rays; the container's dark class keeps the night sky in both colour schemes.

In a card

intensity="subtle" softens the rays and the haze, and stars={false} leaves out the stars. The sun scales with the box, so the light works at card size too.

Accessibility

The sun 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 rays stop swaying and the loops stop shimmering, so a still sunrise stays. Nothing flashes; the loops fade in and out over eight seconds or more.

Put copy in your foreground colour (text-foreground) in the middle or lower half of the box: the rays fade with distance from the sun, so there it reads in both colour schemes. The limb and the haze right under it are the brightest part, so keep text off the top edge.

FAQ

API Reference