Nebula

Installation

Usage

Copyimport { Nebula } from "@/components/asciicn/nebula";
 
export function Hero() {
  return (
    <section className="relative isolate min-h-[480px]">
      <Nebula seed="orion-4" className="absolute inset-0 -z-10" />
      <h1>Your headline</h1>
    </section>
  );
}

Three layers of noise, each bending the next, give the gas its curls. The cloud has a broad soft edge that runs down through the middle of the glyph ramp, thin bright filaments trace where the middle layer folds, and dark lanes of dust cut through the densest parts. Stars show only where the gas is thin. The whole cloud turns slowly around the centre.

It draws in quadrants by default: each glyph splits into a 2×2 grid, which keeps the wisps fine while the cloud stays solid. braille gives a dusting of dots, standard a typed nebula.

Each seed gets its own palette, built in OKLCH: a first hue, then a turn of up to 120 degrees that never runs through the olive and khaki hues that turn muddy at glyph sizes. The palette comes in two versions, deep to bright on dark paper and pale to deep on light paper, and switches with the theme, so the densest glyphs always have the most contrast.

The parts are in lib/ascii/seed.ts (shipped with the ascii-shader item) if you want your own preset: seedParams(seed, kind, options) rolls the parameters, seedField(seed, kind) returns { field, colorField, uniforms } for AsciiShader, and the SeedField component wraps both.

Examples

Three seeds

The same component with three different seed strings.

Behind a headline

An intensity of 0.55 keeps the gas in the lighter half of the ramp under the text.

Props

Notes

• It 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 at stillTime and stops.
• By default it does not react to the pointer: moving the mouse over it changes nothing.
• 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 soft CSS glows in the seed's colours.
• A seed is rolled once, on the CPU, in a few milliseconds: a small exposure check samples the field at 40×22 at three moments and re-rolls (up to eight times) until between a quarter and three fifths of the box carries a glyph, then sets the gain so the brightest glyphs reach the top of the ramp. Changing seed re-rolls; changing the look props does not. See Performance.