About this component
ASCII Render
A live WebGL scene drawn entirely in characters: a turning form is raymarched into a small grid, one cell per glyph, then printed from a monospace glyph ramp over drifting noise and a slow scan line, with cells lighting up in the accent color around the cursor. Colors, glyph ramp, cell size, form, placement, size, spin, speed, drift, scan line, contrast and the cursor glow are all props. Colors follow the theme, cells grow on slower devices, it pauses offscreen, holds a still frame for reduced motion and falls back to a dot field without WebGL.
Usage
The import and the props worth knowing about, in one place.
import { AsciiRender } from "@/components/beste/component/ascii-render";
// As a layer behind content
<section className="relative min-h-[40rem]">
<AsciiRender className="absolute inset-0" align="right" />
<div className="relative">...</div>
</section>
<AsciiRender
className="min-h-[32rem]"
inkColor="var(--foreground)" // any CSS color, tokens included
accentColor="var(--primary)"
glyphs=" .,:;ox%#@" // darkest to brightest
cellSize={12} // cell height in pixels
scene="torus" // "lattice" (default) | "sphere" | "torus" | "asterisk"
align="right" // "left" | "center" (default) | "right"
spin={0.6} // how fast the form turns
scanLine={false}
/>Props
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
inkColor | string | — | Color of the glyphs. Any CSS color, tokens included. |
paperColor | string | — | Color behind the glyphs. |
accentColor | string | — | Color the brightest glyphs and the cursor glow take on. |
glyphs | string | — | Glyph ramp from darkest to brightest. |
cellSize | number | — | Height of one character cell in CSS pixels. |
scene | "lattice" | "sphere" | "torus" | "asterisk" | — | The form drawn in characters. |
align | "left" | "center" | "right" | — | Where the form sits across the surface. |
size | number | — | Size of the form, 0 to 1. |
spin | number | — | How fast the form turns, 1 is the default pace. |
speed | number | — | Overall motion speed, 1 is the default pace. |
drift | number | — | Drifting noise in the empty field, 0 to 1. |
scanLine | boolean | — | A slow scan line sweeps down the surface. |
contrast | number | — | Brightness and punch of the form, 0 to 1. |
interactive | boolean | — | Cells light up around the cursor. |
glow | number | — | Strength of that glow, 0 to 1. |
glowSize | number | — | Size of that glow, 0 to 1. |
paused | boolean | — | Freeze the surface on its current frame. |
className | string | — | |
children | ReactNode | — |
