ASCII Sculpture Shader for React

ASCII Sculpture Shader draws a large torus, off to the right of the box, turning slowly and drawn entirely in monospace glyphs: its shadows are spaces and dots, its mid-tones :-=+, and its highlights %#@, in amber phosphor on warm black, with a pink rim light along one edge. A WGSL fragment shader on WebGPU splits the box into glyph cells, ray marches the object through each cell's centre, lights it, and picks one of ten 5×6 bitmap glyphs by how bright that cell is, every frame.

Use it behind a CLI, devtool or API hero, a changelog, or a 404 page. For falling code instead of a lit form, use Matrix Shader; for a flickering grid of 0s and 1s, Binary Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a soft amber glow where the object sits in browsers without WebGPU.

Installation

Usage

import {
  AsciiSculptureShader,
} from "@/components/ui/ascii-sculpture-shader";

<AsciiSculptureShader className="flex min-h-[32rem] items-center p-12">
  <h1 className="max-w-sm font-mono text-5xl font-semibold text-amber-50">
    npx ship it
  </h1>
</AsciiSculptureShader>

ASCII Sculpture Shader is a container: your content sits on top of the glyphs, in normal flow. It fills its own box, so give it a height or content. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10". In a wide box the object sits to the right, leaving the left for your copy; in a narrow one it's centred and scaled to fit. The page is warm black in both color schemes, so put white or light text over it.

shape picks the object: "torus", "sphere" or "cube". cellSize sets the glyph cells' width in CSS pixels; they're 1.75 times as tall, like a terminal's, and snap to whole device pixels so the glyphs stay crisp. With interactive, the object leans toward the pointer.

Demos

Green sphere

shape="sphere" turns a ball instead, where the light reads as a smooth ramp through every glyph. glyphColor="#33ff99" and rimColor="#38bdf8" make it a green-screen terminal, and cellSize={8} makes the glyphs finer.

Interactive cube, in a card

shape="cube" turns a rounded cube, and interactive leans it toward the pointer as it moves over the card. Touch doesn't move it.

Performance

About 0.2 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. Only the cells whose ray meets a sphere around the object march at all, so the empty page is nearly free. It keeps quality={1}: the glyphs are pixel art, and would blur at half resolution. The animation stops when the shader scrolls out of view, and the browser pauses it in a hidden tab. Every shader on a page shares one GPU device and one frame loop, and vgpu (about 50 KB gzipped) loads only when the first one mounts.

Browser support

The shader needs WebGPU: Chrome and Edge, Safari 26 and later, and Firefox on Windows and macOS. Elsewhere, and until the first frame, the box shows a soft amber glow on warm black where the object sits, so the layout never jumps. data-state on the root reads unsupported there, if you want to style around it. See Shader Canvas.

Accessibility

The glyphs are decoration: they're hidden from assistive tech and let every click through to your content, and screen readers never read them as text. With reduced motion it draws one still frame and stops. Nothing flashes: the object turns once every 25 seconds or so, and each cell changes glyph only as the light on it changes. In the left 40% of a wide box, white text reads at about 19:1; over the object it can drop to about 2:1 on the brightest glyphs, so keep text to the left.

FAQ

API Reference