Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/horizon.jsonUsage
import { Horizon } from "@/components/dithercn/horizon";
export function Hero() {
return (
<section className="relative isolate min-h-[480px]">
<Horizon className="absolute inset-0 -z-10" />
<h1>Your headline</h1>
</section>
);
}This is the scene behind the dithercn landing page. The planet is a circle whose top touches horizon; curve sets how small and round it looks. Above the rim, domain-warped noise forms aurora curtains that slide slowly along the horizon. The sky and planet use skyColor, and the glow, rim and stars use glowColor.
Examples
Sunrise
A flatter planet, higher in the frame, with a smooth band instead of curtains and an explicit amber glow.
Small planet under a headline
A low, strongly curved horizon leaves most of the frame as sky, with more stars.
Props
| Prop | Type | Default |
|---|---|---|
| horizon Height of the horizon's highest point from the bottom, from 0 to 1. | Type: number | Default 0.28 |
| curve How round the planet is, from 0 (nearly flat) to 1 (a small globe). | Type: number | Default 0.6 |
| glow Strength of the glow above the horizon, from 0 to 1. | Type: number | Default 1 |
| aurora How much the glow breaks into curtains, from 0 (a smooth band) to 1. | Type: number | Default 1 |
| stars How many stars, from 0 to 3. They never move. | Type: number | Default 1 |
| glowColor Colour of the glow, rim and stars: 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 planet. | 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 aurora drifts. | Type: number | Default 1 |
| animate false draws one still frame. | Type: boolean | Default true |
| className Size and position. The scene fills this box. | Type: string | Default – |
Notes
- The scene 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 soft CSS glow over a dark arc.
- Stars thin out near the horizon, so the glow always has a clean edge.