Skip to content
ascii-things

WebGL Lab

ascii-things/webgl is no longer one surface. The same engine now ships twelve glyph-rendered scenes: a rotating globe, water rings, a flow field, a tunnel, falling code, a woven torus, terrain, a galaxy, voronoi cells, plasma, caustics, and a constellation. Each runs on the GPU, falls back to a 2D glyph field, and respects reduced motion and page visibility.

Worlds

Globe

A rotating ASCII Earth with drifting continents, cloud bands, and a moving terminator.

<AsciiSurface variant="globe" />

Water

Ripple pond

Concentric rings and pointer ripples across a dark pond.

<AsciiSurface variant="ripple" pointer />

Fields

Flow field

Two travelling waves fold into each other and become a field of glyphs.

<AsciiSurface variant="flow" />

Space

Tunnel

A ring-and-spoke corridor that keeps collapsing toward the center.

<AsciiSurface variant="tunnel" />

Signals

Glyph rain

Columns of falling glyphs with independent heads and trails.

<AsciiSurface variant="glyph-rain" />

Objects

Torus

A woven ring that turns through the glyph grid.

<AsciiSurface variant="torus" />

Use one

Section titled “Use one”

Every variant is the same component with a different variant:

import { AsciiSurface } from "ascii-things/webgl/react";


export function Globe() {
  return <AsciiSurface variant="globe" text="" style={{ height: 360 }} />;
}

The custom element uses the same name as an attribute:

<ascii-surface variant="ripple" text=""></ascii-surface>

Next

Section titled “Next”

Twelve variants now ship. The second six live on More WebGL. Next: a searchable WebGL library with install commands, reduced-motion stills, and more worlds, particles, and fields.