# Mountain dusk

Layered ridgelines fading into evening haze, with a setting sun, a rising moon, stars coming out, the odd shooting star and mist in the valleys.

> 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 asciicn agent skill, for building any ASCII effect on the engine, is at [/.well-known/agent-skills/asciicn/SKILL.md](/.well-known/agent-skills/asciicn/SKILL.md).

> **This is an example, not the only option.** It is one component built on the asciicn 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 `AsciiShader` ([Write your own](/docs/engine/write-your-own.md)), or draw a CPU grid with `AsciiGrid`, and read this example's source for technique. Its full source is in [https://asciicn.dev/r/mountain-dusk.json](https://asciicn.dev/r/mountain-dusk.json), under `files[].content`.

## Installation [#installation]

```bash
npx shadcn@latest add https://asciicn.dev/r/mountain-dusk.json
```

## Usage [#usage]

```tsx
import { MountainDusk } from "@/components/asciicn/mountain-dusk";

export function Hero() {
  return (
    <section className="relative isolate min-h-[480px]">
      <MountainDusk intensity={0.6} className="absolute inset-0 -z-10" />
      <h1>Your headline</h1>
    </section>
  );
}
```

Ridge after ridge of mountains runs back to the horizon. Each ridgeline is drawn with real line glyphs: `/` up a slope, `\` down the other side, `^` on a sharp peak and `_` or `-` along the flats. Below its crest each ridge falls away into haze, dense near the top and sparse at the foot, so the ridge in front always stands out against the one behind. Far ridges are pale rose, near ones deep violet, and mist drifts in the valleys between them.

`time` runs the evening. At 0 the sun sits on the far ridge and the sky glows orange into violet. As it rises the sun sinks out of sight, the afterglow fades, the moon climbs on the right and the stars come out, brightest first. From about 0.3 a shooting star crosses once in a while, at most every 18 seconds. Each star is a single sample, so it stays one crisp glyph, or one Braille dot.

The mountains stand still. Only the sky moves: stars twinkle slowly, mist drifts through the valleys and the odd shooting star crosses. The scene does not react to hover or the pointer.

It draws in `standard` glyphs and `truecolor` by default. The charset sets the glyphs for the haze, sky, sun, moon and mist. With a ramp charset the ridgelines are drawn as line glyphs on top; `braille` and `quadrants` draw them from their own sub-cell dots instead. In `mono` mode every glyph takes the ink, or a `phosphor`. `intensity` thins every glyph at once. Lower it to around 0.5 under a headline.

## Examples [#examples]

### Behind a headline [#behind-a-headline]

`intensity={0.55}` and `time={0.6}` put the scene in the blue hour, quiet enough for the headline to read first.

```tsx title="examples/mountain-dusk-headline.tsx"
import { MountainDusk } from "@/components/asciicn/mountain-dusk";

// The scene behind a headline, dimmed so the text on top stays readable.
export default function MountainDuskHeadline() {
  return (
    <section className="relative isolate flex size-full flex-col items-center justify-start gap-3 px-6 pt-14 text-center">
      <MountainDusk
        intensity={0.55}
        time={0.6}
        className="absolute inset-0 -z-10"
      />
      <h3 className="max-w-md text-3xl font-medium tracking-[-0.03em] text-balance sm:text-4xl">
        Last light on the ridge
      </h3>
      <p className="text-muted-foreground max-w-sm text-sm text-pretty">
        Lower the intensity and the ridges, mist and stars settle behind your
        copy.
      </p>
    </section>
  );
}
```

### Night in Braille [#night-in-braille]

`charset="braille"` with `time={1}` and `stars={1}`: the moon high, the sky full of single-dot stars, six ridges and heavy mist.

```tsx title="examples/mountain-dusk-night.tsx"
import { MountainDusk } from "@/components/asciicn/mountain-dusk";

// Full night in Braille: the moon high, the sky thick with stars.
export default function MountainDuskNight() {
  return (
    <MountainDusk
      charset="braille"
      time={1}
      stars={1}
      layers={6}
      mist={0.9}
      className="absolute inset-0"
    />
  );
}
```

## Props [#props]

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `time` | `number` | `0.35` | Where the evening is, from 0 (the sun setting) to 1 (full night, moon high). |
| `layers` | `number` | `5` | How many ridgelines stand before the horizon, 1 to 6. Fewer ridges drop the far ones first. |
| `stars` | `number` | `0.7` | How many stars come out, from 0 (none, and no shooting stars) to 1. |
| `mist` | `number` | `0.7` | How much mist lies in the valleys, from 0 to 1. |
| `moon` | `boolean` | `true` | Show the rising moon. |
| `intensity` | `number` | `1` | How much of the scene shows, from 0 (empty paper) to 1. Lower it under text. |
| `charset` | `CharsetName` | `"standard"` | Which glyphs draw the haze, sky and mist. See Charsets. Ramps also get line-glyph ridgelines. |
| `chars` | `string` | `–` | A custom ramp from empty to dense, such as " .oO@". Wins over charset. |
| `colorMode` | `"truecolor" \| "mono"` | `"truecolor", or "mono" with a phosphor` | truecolor keeps the sky's colours. mono draws every glyph in the ink or phosphor. |
| `phosphor` | `"p1" \| "p3" \| "ibm" \| "blueprint"` | `–` | A CRT ink and glass that replace the ink and paper. |
| `background` | `"paper" \| "transparent"` | `"paper"` | "transparent" draws the glyphs only, over your own surface. |
| `fx` | `PostFx` | `–` | CRT finish: scanlines, bloom, curvature, glitch, flicker and vignette, each 0 to 1. |
| `cell` | `number` | `12` | Height of one glyph cell in CSS pixels. |
| `speed` | `number` | `1` | How fast the mist drifts and the stars twinkle. |
| `animate` | `boolean` | `true` | false holds one still frame. |
| `stillTime` | `number` | `14` | The moment drawn when motion is off or reduced, in seconds. |
| `handle` | `RefObject<AsciiHandle \| null>` | `–` | Filled with a handle that reads back the current frame, for export to text, ANSI, SVG or PNG. |
| `className` | `string` | `–` | Size and position. The scene fills this box. |

## Notes [#notes]

* It is decorative and hidden from assistive technology. Put real text on top of it, not inside it.
* It ignores the pointer, so moving the mouse over it changes nothing.
* With reduced motion turned on, it draws one still frame at `stillTime` and stops.
* It draws on the CPU at up to 30 fps and pauses when scrolled out of view or when the tab is hidden. Each ridge's crest is worked out once per column, not per sample, so `braille`, which samples eight times per cell, costs mostly the sky and mist.