[a] asciicn
Search components⌘KGitHub
Browse docs

Catalog

27 components on one engine, grouped by what they're for. Each installs as plain source into components/ascii/. Drop one in as it is, read it for technique, or point your agent at one and ask for a variation. For anything not here, write your own.

Backgrounds

Full-bleed animated fields for heroes, sections and cards.

4

Background

Eleven animated fields for heroes and sections, from plasma and starfield to a synthwave grid.

Matrix

Digital rain with flickering katakana and fading trails.

Donut

The classic donut.c torus, lit and z-buffered.

Globe

A rotating planet with lit continents, drawn in characters.

Images

Photos, video and the camera, redrawn in characters.

5

Image

Any photo as live ASCII. Dither, colour from the source, reveal the original on hover.

Video

Video files, streams or the webcam, converted every frame.

A red-roofed cabin by a lake below a snowy peak

Image Compare

Drag a divider between a photo and its ASCII version.

Scroll Reveal

An image that resolves from coarse glyphs to the photo as it scrolls into view.

Marquee

An endless marquee of words or logos, set in glyphs.

Type

Display type and text effects made of glyphs.

3

Text

Display type built from glyphs. Any font, no FIGlet files.

decrypting signal…access granted

Scramble

Text that decodes out of random glyphs on mount or hover.

dust to dust

Dissolve

Text that dissolves into shade noise and resolves back.

Interface

Terminal-style pieces for real UI: loaders, progress and frames.

7
upload
index
build

Progress

Progress bars with eighth-block precision, in five styles.

LoadingLoadingLoadingLoadingLoadingLoading

Spinner

Terminal loading spinners: braille, line, arc, quadrant and more.

─status

All systems normal.

Box

Box-drawing frames that stretch to any content.

Button

Buttons framed in brackets, boxes, arrows or underlines that come alive on hover.

Skeleton

Loading placeholders that shimmer through shade blocks.

Avatar

Generative identicons from any string, in block glyphs.

Divider

Horizontal rules in box-drawing and pattern glyphs, with an optional label.

Charts

Data drawn with block elements, one character per value.

8
react 82%
vue 46%
svelte31.5%
solid 12.25%

Chart

Sparklines and labelled bar charts drawn with block elements.

Pointtodayyesterday
00:00344319
01:00221253
02:00325246
03:00417288
04:00420344
05:00296309
06:00388297
07:00461296
08:00490407
09:00737371
10:00809589
11:001022641
12:001150846
13:0013471074
14:0013691151
15:0012981123
16:0012201166
17:00939998
18:00797934
19:00692615
20:00463610
21:00356362
22:00275301
23:00325269

Line Chart

ASCII line charts with axes, several series and a scrubbing readout.

Pointsearchdirectsocial
00:001558930
01:001626232
02:0011110169
03:001508458
04:0010211651
05:0015511546
06:0017914849
07:0017924640
08:0026330552
09:0026331860
10:0039939644
11:0049338146
12:0057934780
13:0058630988
14:00654277102
15:00613238144
16:00601181183
17:00450137232
18:00397109251
19:0030983289
20:00202119249
21:00138113245
22:0018675179
23:00119111136

Area Chart

Stacked or overlapping areas: ASCII lines over glyph fills.

Groupdeploys
Jan42
Feb58
Mar51
Apr63
May49
Jun70
Jul66
Aug74

Column Chart

Vertical bars stacked from square shade blocks, grouped by label, that build up block by block.

SliceValueShare
chrome41264%
safari12620%
firefox589%
edge315%
other173%

Pie Chart

A pie or donut in braille that sweeps in clockwise and pops a slice out on hover.

Heatmap

A contribution-style calendar grid in shade blocks.

Gauge

A dial for one value, drawn in braille.

APIOperational

40 intervals from Sep 17 to Oct 26: 1 with an outage, 2 degraded.

DashboardOperational

40 intervals from Sep 17 to Oct 26: 3 with an outage, 6 degraded.

Uptime

Status bars for uptime over time, one block per day.