# Synthwave sun

An outrun grid rolling toward a sliced setting sun, between a wireframe ridge and under a glowing horizon.

> 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/synthwave-sun.json](https://asciicn.dev/r/synthwave-sun.json), under `files[].content`.

## Installation [#installation]

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

## Usage [#usage]

```tsx
import { SynthwaveSun } from "@/components/asciicn/synthwave-sun";

export function Hero() {
  return (
    <section className="relative isolate h-[560px]">
      <SynthwaveSun className="absolute inset-0 -z-10" />
    </section>
  );
}
```

The scene runs on the GPU as one field. The floor is a perspective grid: rows roll steadily toward you and columns meet at the vanishing point. A line lights exactly the samples it passes through, so in Braille every grid line is one dot wide and in a glyph ramp one glyph wide. Far from the camera the rows crowd closer than one sample, and there they fade into an even haze instead of flickering.

The sun sets into the horizon in amber at the top and magenta below. Slices cut across its lower half in whole sample rows, so each gap is a clean row of empty cells. They widen as they fall and slide slowly down. A one-row line marks the horizon, the glow above it thins as it climbs, and the sun's reflection breaks into alternate rows on the floor.

The vanishing point stays in the centre and the scene does not react to hover or the pointer. Only the floor rolls, the slices slide and the stars twinkle, all slowly.

## Examples [#examples]

### Behind a heading [#behind-a-heading]

Lower `mountains` and `travel` for a calmer backdrop behind text. The heading is real text on top; the scene sits behind it at `-z-10`.

```tsx title="examples/synthwave-sun-hero.tsx"
import { SynthwaveSun } from "@/components/asciicn/synthwave-sun";

export default function SynthwaveSunHero() {
  return (
    <section className="relative isolate flex h-[420px] w-full items-start justify-center overflow-hidden pt-12">
      <SynthwaveSun
        mountains={0.6}
        travel={0.7}
        className="absolute inset-0 -z-10"
      />
      <div className="text-center font-mono">
        <p className="text-xs tracking-[0.3em] text-muted-foreground uppercase">
          Side A
        </p>
        <h3 className="mt-2 text-3xl font-semibold tracking-tight">
          Night drive
        </h3>
      </div>
    </section>
  );
}
```

### Quadrants on an amber phosphor [#quadrants-on-an-amber-phosphor]

`phosphor="p3"` turns it mono on amber glass, and `fx` adds bloom and scanlines. Quadrants split each cell 2×2, which keeps the slices sharp at a larger cell.

```tsx title="examples/synthwave-sun-phosphor.tsx"
import { SynthwaveSun } from "@/components/asciicn/synthwave-sun";

export default function SynthwaveSunPhosphor() {
  return (
    <SynthwaveSun
      charset="quadrants"
      phosphor="p3"
      mountains={1.4}
      slices={0.8}
      fx={{ bloom: 0.5, scanlines: 0.45, vignette: 0.4 }}
      className="aspect-video w-full max-w-2xl"
    />
  );
}
```

## Props [#props]

Every [ASCII image](/docs/images/ascii-image#props) look prop also applies, with `charset` defaulting to `"braille"`, plus `fx` for a CRT finish. `dither` defaults to `"bayer4"` for Braille and quadrants, so the glow keeps a dot gradient.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `travel` | `number` | `1` | How fast the grid rolls toward you. 0 parks it. |
| `slices` | `number` | `1` | How wide the gaps across the sun grow, from 0 (a solid disc) to 1. |
| `slide` | `number` | `1` | How fast the slices slide down the sun. |
| `glow` | `number` | `1` | The glow over the horizon, the halo and the sun's reflection, from 0 to 1. |
| `mountains` | `number` | `1` | Height of the ridge on both sides, from 0 (flat) to 2. |
| `stars` | `boolean` | `true` | Twinkling stars in the upper sky. |
| `charset` | `CharsetName` | `"braille"` | Which glyphs draw the tones. |
| `colorMode` | `"mono" \| "truecolor" \| "ansi16" \| "duotone" \| "palette"` | `"truecolor"` | How glyphs are coloured. "mono" when a phosphor is set and no mode is. |
| `paper` | `AsciiColor` | `"--ascii-paper"` | The surface behind the glyphs, or the phosphor's glass. |
| `cell` | `number` | `12` | Glyph cell height in CSS pixels. |
| `fps` | `number` | `60` | Frame rate cap. |
| `stillTime` | `number` | `4` | The moment drawn under reduced motion, in seconds. |
| `fallback` | `ReactNode` | `a gradient` | Shown without WebGL and until the first frame. |
| `handle` | `RefObject<AsciiHandle \| null>` |  | Filled with a handle for export. |

## Notes [#notes]

* The canvas is decorative and hidden from assistive technology. Put your real heading and copy beside or on top of it.
* Under reduced motion it draws one still frame at `stillTime`. It pauses offscreen and in hidden tabs.
* It ignores the pointer, so moving the mouse over it changes nothing.
* On a light page the colours deepen so amber stays visible on white paper.
* Without WebGL2 it shows `fallback`: by default a gradient with the sun, the sky and the horizon.