# Horizon

A planet's horizon seen from space, with a lit rim, a drifting aurora glow and fixed stars. The landing page hero, with props.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. The dithercn agent skill, for building any dither on the engine, is at [/.well-known/agent-skills/dithercn/SKILL.md](/.well-known/agent-skills/dithercn/SKILL.md).

> **This is an example, not the only option.** It is one component built on the dithercn engine. Install it when it is what you were asked for. For any other look, don't stretch its props to fit: write your own field on `DitherShader` ([Write your own dither](/docs/engine/write-your-own.md)), and read this example's source for technique. Its full source is in [https://dithercn.dev/r/horizon.json](https://dithercn.dev/r/horizon.json), under `files[].content`.

## Installation [#installation]

```bash
npx shadcn@latest add https://dithercn.dev/r/horizon.json
```

## Usage [#usage]

```tsx
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 [#examples]

### Sunrise [#sunrise]

A flatter planet, higher in the frame, with a smooth band instead of curtains and an explicit amber glow.

```tsx title="examples/horizon-sunrise.tsx"
import { Horizon } from "@/components/dithercn/horizon";

export default function HorizonSunrise() {
  return (
    <Horizon
      horizon={0.38}
      curve={0.25}
      aurora={0.3}
      stars={0.5}
      glowColor="oklch(0.8 0.15 65)"
      className="absolute inset-0"
    />
  );
}
```

### Small planet under a headline [#small-planet-under-a-headline]

A low, strongly curved horizon leaves most of the frame as sky, with more stars.

```tsx title="examples/horizon-headline.tsx"
import { Horizon } from "@/components/dithercn/horizon";

export default function HorizonHeadline() {
  return (
    <section className="relative isolate flex size-full flex-col items-center gap-3 px-6 pt-12 text-center sm:pt-16">
      <Horizon
        horizon={0.22}
        curve={0.85}
        stars={1.6}
        className="absolute inset-0 -z-10"
      />
      <h3 className="max-w-md text-3xl font-medium tracking-[-0.03em] text-balance">
        Mission control for your releases
      </h3>
      <p className="text-muted-foreground max-w-sm text-sm text-pretty">
        A small, round planet low in the frame, with more stars.
      </p>
    </section>
  );
}
```

## Props [#props]

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `horizon` | `number` | `0.28` | Height of the horizon's highest point from the bottom, from 0 to 1. |
| `curve` | `number` | `0.6` | How round the planet is, from 0 (nearly flat) to 1 (a small globe). |
| `glow` | `number` | `1` | Strength of the glow above the horizon, from 0 to 1. |
| `aurora` | `number` | `1` | How much the glow breaks into curtains, from 0 (a smooth band) to 1. |
| `stars` | `number` | `1` | How many stars, from 0 to 3. They never move. |
| `glowColor` | `DitherColor` | `"--dither-ink"` | Colour of the glow, rim and stars: a palette name such as "orange", a CSS variable name, or any CSS colour. |
| `skyColor` | `DitherColor` | `"--dither-paper"` | Colour of the sky and the planet. |
| `matrix` | `"bayer2" \| "bayer4" \| "bayer8" \| "blue-noise"` | `"bayer4"` | The threshold pattern. See Dither engine. |
| `cell` | `number` | `--dither-cell` | Size of one dither cell in CSS pixels. |
| `speed` | `number` | `1` | How fast the aurora drifts. |
| `animate` | `boolean` | `true` | false stops the motion: a still frame if it starts off, the current frame if it was moving. |
| `className` | `string` | `–` | Size and position. The scene fills this box. |

## Notes [#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.