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