CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/ascii-nebula

ASCII Nebula

The whole background is a grid of ASCII glyphs that, from afar, reads as a soft drifting nebula — dense glyphs where the cloud is thick, sparse where it thins. The pointer locally reveals hidden structure: nearby glyphs grow larger, rotate slightly, and switch to denser symbols.

ReactCanvasInteractiveFont#ascii#nebula#text#noise#cloud#interactive#pointer#monospace#premium

Usage

import AsciiNebula from '@crazygl/hero-ascii-nebula';

export default function Hero() {
	return (
		<AsciiNebula
			heading="Hidden structure."
			densityRamp=" .:+*#@"
			glyphColor="#c9c2ff"
		/>
	);
}

Customise

  • Content — heading + subheading, two-column, or a custom node.
  • Nebula — densityRamp (glyphs thin → dense) or customChars to swap in brand letters; cellSize (8–28px), cloudScale, driftSpeed, contrast.
  • Color — glyphColor (pale violet by default) and backgroundColor (near-black space).
  • Pointer — revealRadius, revealStrength, glyphRotate tune how the cursor condenses, enlarges, and swirls nearby glyphs.
  • Backdrop — transparent to drop the background fill.

Best for

  • Developer tools, terminals and CLI products that want a "made of code" hero.
  • AI / data and generative-art sites that want quiet technical texture.
  • Creative-studio landing pages needing an interactive, atmospheric backdrop.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-ascii-nebula
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import ASCIINebula from '@crazygl/hero-ascii-nebula';

export default function Landing() {
  return (
    <ASCIINebula />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import ASCIINebula from '@crazygl/hero-ascii-nebula';

export default function Page() {
  return (
    <section>
      <ASCIINebula
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

ASCII Video Displacement

A looping video converted live into ASCII art — each cell's brightness picks a glyph from a long density ramp so the moving footage reads as live ASCII. The pointer is a clarity lens: under the cursor the cells resolve into the real, sharp footage, so the image reads genuinely clearer exactly where you point.

ASCII Rain Repulsion

Elegant columns of falling ASCII glyphs on a near-black field — pale, premium, and readable behind text. The pointer opens a circular force field that pushes the characters outward into a clean tunnel of empty space, which smoothly refills as the cursor moves on.

SDF Lens Blur

A single heading word, rasterised to a true signed distance field and rendered in WebGL. Where the cursor hovers, the letters dissolve into a soft luminous bokeh — a variable-radius radial blur kernel sampled in distance space, with optional chromatic aberration. Move the cursor across the word to smear it into a beam of light; move away and it snaps back to a razor-sharp typeface.

Touch Sparkle Grid

A dark perspective grid floor receding into the distance. Pointer movement emits glowing magenta-pink and cyan sparkle particles that drift, fade, and die — a soft halo glows where the cursor rests.

Cosmic Marble

A procedurally-textured planet fills the background — swirling FBM clouds, atmosphere scattering at the rim, slow rotation, scattered stars.

Magnetic Dot Cloud

Thousands of floating 3D points settle into a soft sphere of light. Wherever you point, a gravity well opens — nearby dots erupt radially outward from the sphere's centre, bulging the cloud like a living particle sculpture. A critically-damped spring eases every swell in and out; idle, the whole field drifts and turns.Live customizer

ASCII Nebula

Density rampGlyphs ordered from thinnest (left, usually a space) to densest (right). Cloud brightness picks a glyph along this ramp.Custom charactersOptional brand characters. When set, these replace the density ramp entirely — order them thin → dense. Leave empty to use the ramp above.Cell size12pxSize of each character cell in CSS pixels. Smaller cells read as a finer, denser nebula.Cloud scale1Spatial frequency of the cloud. Lower = big soft billows; higher = tighter, busier structure.Drift speed0.3How fast the nebula evolves and drifts. 0 freezes it into a still poster frame.Contrast1.4Tonal contrast of the cloud. Higher pushes thick regions denser and thin regions emptier.Glyph colourColour of the glyphs. Pale violet-white reads as a luminous nebula.BackgroundBackdrop behind the glyphs. Near-black sells the depth of space.Reveal radius0.34Radius of the cursor's influence, in fractions of the hero's smaller side.Reveal strength0.7How strongly the cursor condenses and enlarges nearby glyphs. 0 disables the reveal.Glyph rotation0.4How much revealed glyphs rotate. 0 keeps them upright; 1 swirls them with the cloud.Transparent backgroundInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.