# 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).

<ComponentPreview src="examples/horizon-demo.tsx" size="full" align="stretch" controls="horizonControls">
  <HorizonDemo />
</ComponentPreview>

## Installation [#installation]

<InstallBlock name="horizon" />

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

<ComponentPreview src="examples/horizon-sunrise.tsx" size="full" align="stretch">
  <HorizonSunrise />
</ComponentPreview>

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

<ComponentPreview src="examples/horizon-headline.tsx" size="lg" align="stretch">
  <HorizonHeadline />
</ComponentPreview>

## 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 draws one still frame. |
| `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.