ASCII art came back for a reason that has nothing to do with nostalgia. It is the one visual style that reads as made rather than generated, it weighs almost nothing, and it carries an association with terminals and engineering that a gradient cannot buy. On a developer-facing landing page that combination is unusually cheap to ship.
21 public components on 21st have "ascii" in the name, and the community ASCII editor holds another 176 pieces. Below is what the technique is actually good at, and the three ways it goes wrong.
The hero
Hero ASCII and Hero ASCII one are the two most-bookmarked pieces in this family: a full-width animated character field behind the headline. It is the shape most projects want, and it is the one that carries the whole aesthetic in a single block.
Two things to check before shipping one. The character field is usually a canvas or a monospace grid updated on a frame loop, so it needs the same treatment as any animated background: pause when offscreen, stop when the tab is hidden. And the headline must be real text on top of it, not part of the art, or the page has no heading for anything that does not have eyes.
The rendered object
Where ASCII gets genuinely interesting: a three-dimensional object drawn in characters.
3D ASCII Model Viewer by daniel__designs renders a model as text. ASCII KNOT by Montek is an animated trefoil knot with optional coloured tube segments, and ASCII Cube and ASCII Pyramid by the same author are the primitives with adjustable rotation speed, axis and colour.
The technique underneath is the same in each: render the geometry, sample the brightness, map each sample to a character from a ramp ordered by ink coverage. Once you have seen that, the whole style stops being magic and becomes a lookup table.
The field
Delicate Ascii Dots by UI Layouts and Midjourney ASCII Swirl by arlanoska are the ambient versions: a field of characters reacting to the pointer or drifting on its own. ascii flower by Chinmoy Das is the small decorative case.
This is the cheapest of the three shapes, because there is no geometry to render: it is noise, a distance function and a character ramp.
The three ways it goes wrong
A screen reader reads every character. This is the big one, and almost every implementation gets it wrong. A block of ASCII art is, to assistive technology, a wall of punctuation read one symbol at a time. Mark the container aria-hidden="true" and give the section a real heading and real text. If the art itself carries meaning, put a one-sentence description in a visually hidden element beside it.
It is text, so it gets selected and copied. A reader dragging to select a paragraph will pull the entire art field into their clipboard. user-select: none on the container fixes it in one line.
It repaints constantly. Updating thousands of characters in the DOM on every frame is the expensive way. A canvas with monospace text, or a single pre element whose textContent is replaced once per frame, is far cheaper than per-character elements. If the effect is decorative, cap the frame rate: ASCII animation looks correct at 12 to 24fps and often better than at 60, because the stepping is part of the style.
And the same rule as every animated background: under prefers-reduced-motion: reduce, render one frame and stop.
Making your own
The character ramp is the whole design decision. A short ramp like .:-=+*#%@ gives you nine levels of ink and a coarse, deliberate look; a longer one gives smoother shading and a mushier image. Monospace is not optional, and the line height has to be tuned to the character width or the picture stretches: characters are taller than they are wide, so a scale factor of roughly 0.5 on the vertical sampling keeps proportions honest.
The ASCII editor does this part interactively - upload an image or pick a generator, tune the ramp, and take the result as a component - which is faster than discovering the aspect-ratio problem yourself.
Where else to look
The honest list of alternatives, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| ASCII editor on 21st | Making one from an image or a generator, then exporting it | A tool rather than a drop-in component |
| three-ascii-effect | Rendering a real 3D scene as characters | Pulls in Three.js for a text effect |
| A canvas and a ramp | Total control, no dependency, about forty lines | You are writing the sampler |
| 21st | Finished heroes, knots, fields and viewers | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue. The 21st MCP covers the same ground without leaving the editor: ask Claude, Cursor or Codex for an ASCII effect, get the previews inline, and let the agent write the file.
Frequently asked
- How does ASCII art rendering work?
- Render the geometry or image, sample its brightness, and map each sample to a character from a ramp ordered by how much ink it covers. A short ramp gives nine coarse levels and a deliberate look; a longer one shades more smoothly and reads mushier. Characters are taller than they are wide, so the vertical sampling needs roughly a 0.5 scale factor or the picture stretches.
- Is ASCII art accessible?
- Not by default. A block of characters is read symbol by symbol by a screen reader, which is a wall of punctuation. Mark the container aria-hidden, give the section a real heading and real text, and put a one-sentence description in a visually hidden element if the art itself carries meaning. Add user-select: none so dragging to select a paragraph does not copy the whole field.
- Is ASCII animation expensive?
- Only if you build it per element. Updating thousands of individual DOM nodes each frame is the slow way; a canvas with monospace text, or one pre element whose textContent is replaced once per frame, is far cheaper. Cap the frame rate too: the style looks correct at 12 to 24fps, and the stepping reads as intentional.
- Where can I make my own ASCII art for a site?
- The ASCII editor on 21st takes an image or a generator, lets you tune the character ramp interactively and exports the result as a component, which skips the aspect-ratio and ramp tuning you would otherwise discover by trial. For a 3D scene rendered as characters, Three.js ships an ASCII effect, at the cost of pulling in Three.js.