$ascii v2 · canvas runtime

ASCII for the interface.

Live, mouse-reactive character grids that bring texture and motion to any surface. Hero banners, card backgrounds, ambient fill — all from a single script.

11 effects 6 charsets 4 color modes Touch ready 3.7 kB gzip 3D tilt
Surface roles

Three density profiles

Each role tunes cell size, mouse reactivity, motion speed, and 3D tilt automatically. One attribute changes everything.

Hero

Large cells, fast motion, 3D perspective tilt, strong mouse pull. For full-viewport statements.

Feature

Medium density, subtle 3D, moderate motion. For card backgrounds, promos, section headers.

Ambient

Tiny cells, vanishingly faint, no 3D. Barely-there texture for background fill.

Live demo

Play with every combination

Mix and match 11 effects, 6 character sets, and 4 color modes. Move your mouse across the canvas to see the reactive glow in action.

Effect
Charset
Color
Effect wave Charset default Color rainbow Config data-ascii-effect="wave"
Brand matches

ASCII that feels native

Every brand has a voice. $ascii matches it — from Apple's quiet minimalism to Stripe's vibrant energy. The same engine, different personalities.

Apple

Minimal. Sparse. Quiet. The default charset at low opacity with a subtle breathe effect. Barely there, always refined.

╭──────────────────╮
│ │
│ less is more │
│ │
╰──────────────────╯

Vercel

Dark, technical, precise. Box-drawing charset with mono color on a dark surface. Geist DNA in character form.

┌───────────────┐
│ npm run dev │
│ ▲ ready │
│ localhost │
└───────────────┘

Stripe

Vibrant, colorful, expressive. Braille charset with rainbow color mode on a purple-gradient backdrop. Payment-grade energy.

⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
payment $42
confirmed ✓
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿

Discord

Bold, social, gaming-adjacent. Blocks charset with duo accent using Discord blurple. High energy, strong community feel.

████████████████
#general
@everyone
██ online ██
████████████████
Quick start

Three recipes, zero friction

From a hero banner to a full terminal dashboard. Copy, paste, done.

Hero Banner in 30s

1

Drop a single HTML element, load the script, and you have a full-viewport animated ASCII field.

$ pip install pillow pyfiglet numpy $ python3 scripts/ascii_gen.py banner "ASCII" --font slant --width 80
█████ █████ █████ ████ █ █ █ █
█ █ █ █ █ █ █ █ ██ █
█████ ████ ████ █████ █████ █ █ █
█ █ █ █ █ █ █ █ █ ██
█ █ █████ █████ █ █ █ █ █ █

Image → ASCII

2

Convert any image to ASCII with six dithering algorithms. Floyd-Steinberg, Atkinson, Stucki — pick your grain.

$ python3 scripts/ascii_gen.py image photo.jpg --width 80 --dither floyd $ python3 scripts/ascii_gen.py edge photo.jpg --width 80
.-:+*=%@#%*+:. .:+*%@%*+:.
:*%@%*+-. .-+*#@%*+-.
+#%*=. .=*%#+.
%@%*-. .-+*%@%*+-.
:*%@%*+-. .-+*#@%*+-. .-+:

Terminal Dashboard

3

Progress bars, badges, spinners, tables. Full CLI instrumentation in under 10 commands.

$ python3 scripts/ascii_gen.py progress --percent 67 --style blocks --label "Build" $ python3 scripts/ascii_gen.py badge --label "Tests" --status passing --color green
[██████████░░░░] 67% Build
[████████░░░░░░] 45% Deploy
[████████████░░] 82% Lint

[TESTS] ✓ passing
[BUILD] ✓ passing
[DEPLOY] ⚠ pending
Character sets

Six built-in ramps

Pick a mood — classic symbols, block fills, braille, box drawing, binary, or katakana. Each changes the texture completely.

Default

.·-:+*=%@#

Classic luminance ramp. Works everywhere, balances readability and texture.

data-ascii-charset="default"

Blocks

░▒▓█

Unicode block elements for smooth, high-contrast fills. Bold and architectural.

data-ascii-charset="blocks"

Braille

⠁⠂⠄⠈⠐⠠⣀⣤⣶⣿

8-dot braille patterns for high-resolution shading. Exceptional detail density.

data-ascii-charset="braille"

Technical

┌┐└┘├┤┬┴┼╭╮╰╯

Box-drawing characters for architectural, UI-frame, or terminal-native feels.

data-ascii-charset="technical"

Binary

01

Minimal two-character ramp. Sparse, computational, machine-room aesthetic.

data-ascii-charset="binary"

Matrix

ﾊﾐﾋｰｳｼ...

Katakana characters. Iconic cyberpunk texture, pairs with rain or matrix effects.

data-ascii-charset="matrix"
Color modes

From monochrome to heatmap

Four color strategies — each changes how characters are painted across the grid.

Mono

Single color from --ascii-fg, accent on glow. Clean, minimal, universal.

data-ascii-color="mono"

Duo

Two-tone: base --ascii-fg and accent --ascii-accent. Glow drives blend.

data-ascii-color="duo"

Rainbow

Full hue cycle across the grid. Position and time drive color rotation.

data-ascii-color="rainbow"

Heatmap

Cold-to-hot based on cursor proximity. Red near mouse, blue far away.

data-ascii-color="heatmap"
Effect modes

Eleven motion profiles

Each effect changes how characters animate across the grid. Hover to interact, watch the field come alive.

Wave default

Sinusoidal ripples across the grid. Classic, organic motion.

data-ascii-effect="wave"

Rain

Characters fall vertically like droplets. Faster with turbo.

data-ascii-effect="rain"

Matrix

Classic code rain with katakana. Brightness heads, trailing tails.

data-ascii-effect="matrix"

Breathe

Gentle pulsing opacity across the entire field. Calm, meditative.

data-ascii-effect="breathe"

Static

No motion. Characters stay fixed — only mouse glow animates.

data-ascii-effect="static"

Ripple

Concentric waves radiate from the cursor. Fluid, water-like response.

data-ascii-effect="ripple"

Sparkle

Random cells flash brightly, creating a glittering, starry field.

data-ascii-effect="sparkle"

Vortex

Spiral rotation from center. Characters orbit in a whirlpool.

data-ascii-effect="vortex"

Drift

Slow directional float per cell. Gentle, contemplative motion.

data-ascii-effect="drift"

Embers new

Rising particles like glowing embers. Warm, cinematic, atmospheric.

data-ascii-effect="embers"

Aurora new

Flowing ribbons of light across the grid. Ethereal, sweeping, ambient.

data-ascii-effect="aurora"
Feature delta

Before & after

What shipped in v1 versus the v2 upgrade. Every surface, every effect, every mode — rebuilt for 2024.

v1 — original2024
  • ✓ Canvas fill with animated characters
  • ✓ Mouse tracking with lerp smoothing
  • ✓ Three role profiles (hero, feature, ambient)
  • ✓ 3D perspective tilt
  • ✓ prefers-reduced-motion support
  • ✓ Configurable via data-ascii-* attributes
  • ✗ Only 3 charsets (default, high-res, minimal)
  • ✗ Single color mode (CSS vars)
  • ✗ Wave-only animation
  • ✗ No touch support
  • ✗ No performance optimization
v2 — upgradedNEW
  • ✓ Everything in v1, preserved
  • + 6 built-in charsets + custom ramp support
  • + 4 color modes: mono, duo, rainbow, heatmap
  • + 11 effect modes: wave, rain, matrix, breathe, static, ripple, sparkle, vortex, drift, embers, aurora
  • + Touch event support for mobile
  • + IntersectionObserver — pauses when offscreen
  • + Smarter DPR handling (cap at 2x)
  • + Instance registry for management
  • + .set(key, value) runtime API
  • + onChar() callback for custom per-cell rendering
  • + Brand color detection & gradient backgrounds

Add $ascii to your project

Drop the script in your HTML, add a data attribute, and go. Or install the toolchain and generate from the command line.

$ npx skills add arjunkshah/ascii-skill $ pip install pillow pyfiglet numpy && python3 scripts/ascii_gen.py banner "Hello" --font slant
GitHub Download ascii-skill.js