Image / media · 5.5
Real-time ASCII conversion
Your gradient, rendered in terminal characters.
Any image or scene rendered as live ASCII art, reacting in real time.
4 knobs
How it actually works
Eight named styles is a dropdown that ships itself, and it has the highest style-variance-per-control of anything in the catalog. It is also the entry where the mechanism is genuinely surprising: there is no text here. There is not even a font. There are only numbers that happen to look like letters.
A fragment shader. Since, quoting the source, "shaders don't have fonts, everything has to be math", the characters are generated procedurally on 5 by 7 pixel grids as functions returning 1.0 for filled or 0.0 for empty. No font atlas, no texture. Each cell computes its own brightness and picks a character. The source ships eight styles.
The knobs, named
Character set style, cell size, brightness ramp, contrast. The style dropdown is the entry.
| Knob | Source | What it teaches |
|---|---|---|
| Character style | sourced | The eight styles are the source's own list. Blocks and braille barely read as ASCII at all, which is the fun of it. |
| Cell size | sourced | The glyph grid. Small is legible as an image; large is legible as text. You cannot have both, and that tension is the medium. |
| Brightness ramp | sourced | Maps scene luminance onto the character ladder. Shifts which glyphs get used at all. |
| Contrast | sourced | Pushes the mid-tones apart before the ramp. High contrast means fewer distinct glyphs and a harder image. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (author) + VERIFIED (rendered) for the gradient form
Codrops "Efecto: Real-Time ASCII and Dithering Effects with WebGL Shaders" (2026): the procedural 5x7 approach and the eight styles are the article's own. /features/ascii-gradient confirmed on gradientlab.co.
- Seen on
- Codrops "Efecto"; gradientlab.co/features/ascii-gradient (ASCII, "Your gradient, rendered in terminal characters").
- Dependencies
- Three.js + postprocessing in the source; vanilla WebGL here
- Difficulty
- moderate-to-hard (the procedural glyph encoding is the unusual part)
- Performance
- GPU-accelerated but, quoting the source, "computationally intensive". Combined with a CRT post stack it drops frames on older hardware.
- Accessibility and the floor
- A canvas has no semantics, so real content must exist underneath it. Here the content is the page.
Notes
Composability. Point it at the gradient field (3.4) or at anything else on this site. It is a post-process: it does not care what it eats.