Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/eclipse.jsonUsage
import { Eclipse } from "@/components/dithercn/eclipse";
export function Hero() {
return (
<section className="relative isolate min-h-[480px]">
<Eclipse className="absolute inset-0 -z-10" />
<h1>Your headline</h1>
</section>
);
}A disc in skyColor sits in front of a light in rimColor. A thin rim hugs the edge and is brightest on the light side, like the crescent of a real eclipse. Around it, a halo fades outwards with slow variations in strength, and the whole glow breathes on a slow ten-second cycle.
Examples
Beside a headline
The disc sits in the top right with a short corona, lit from the lower left, and the text sits in the clear space below it. This layout holds from phone to desktop widths.
Amber on warm black
Explicit colours instead of theme tokens, a smaller disc, a wider corona and the full pulse. The 8×8 matrix gives a finer texture.
Props
| Prop | Type | Default |
|---|---|---|
| center Centre of the disc, as fractions of the box from the top left. | Type: [x: number, y: number] | Default [0.5, 0.5] |
| size Radius of the disc as a share of the box height. | Type: number | Default 0.24 |
| corona How far the halo reaches past the rim, from 0 to 1. | Type: number | Default 0.5 |
| light Where the rim is brightest, in degrees as in CSS: 0 is the top. | Type: number | Default 315 |
| pulse How much the glow breathes, from 0 (steady) to 1. | Type: number | Default 0.5 |
| rimColor Colour of the rim and halo: a palette name such as "orange", a CSS variable name, or any CSS colour. | Type: DitherColor | Default "--dither-ink" |
| skyColor Colour of the sky and the disc. | Type: DitherColor | Default "--dither-paper" |
| matrix The threshold pattern. See Dither engine. | Type: "bayer2" | "bayer4" | "bayer8" | "blue-noise" | Default "bayer4" |
| cell Size of one dither cell in CSS pixels. | Type: number | Default --dither-cell |
| speed How fast the halo shifts and breathes. | Type: number | Default 1 |
| animate false draws one still frame. | Type: boolean | Default true |
| className Size and position. The eclipse fills this box. | Type: string | Default – |
Notes
- The eclipse is decorative and hidden from assistive technology. Put real text on top of it, not inside it.
- With reduced motion turned on, it draws one still frame and stops.
- It pauses when scrolled out of view or when the tab is hidden, and releases its WebGL context when far offscreen. Without WebGL it shows a CSS disc and ring.
- The disc is the sky colour, so on a light theme it reads as a pale disc with a coloured ring. Pass a dark
skyColorfor a dark disc on any theme.