ASCII Art & Glitch Engine

Monospaced character density quantizer for typography, raster artwork, and retro computing scanline aesthetics.

Interactive Playground

Move cursor over canvas to interact

Source Type

Banner Text

Character Ramp

Variant

Font Size9px

Repulsion80px

Spring0.09

Cursor Physics

CRT Phosphor Glow

Anatomy

import { AsciiArt } from "@shavin/fx";

// Headline Typography ASCII
<AsciiArt
  type="text"
  text="CREATIVE"
  ramp="standard"
  fontSize={9}
  tint="fg"
  crtFilter={false}
/>

// Raster Image ASCII
<AsciiArt
  type="image"
  src="/assets/hq_marshall.jpg"
  ramp="dense"
  fontSize={8}
/>

Examples

Standard Character Density Ramp

Quantizes luminance using classic ASCII character sets.

<AsciiArt
  type="text"
  text="SHAVIN"
  ramp="standard"
  fontSize={9}
  tint="fg"
  className="w-full"
/>

8-Bit Block Ramp

Renders retro block characters with CRT phosphor glow.

<AsciiArt
  type="text"
  text="RETRO"
  ramp="blocks"
  fontSize={9}
  tint="accent"
  crtFilter={true}
  className="w-full"
/>

Props Reference

Prop	Type	Default	Description
type	"text" \| "image"	"text"	Selects whether to render ASCII typography banner or convert a raster image.
text	string	"SHAVIN"	Text string to render as ASCII banner art.
src	string \| ThemedValue<string>	—	Image URL or { light, dark } themed image source.
ramp	"standard" \| "dense" \| "minimal" \| "blocks" \| string	"standard"	Character set ramp used for luminance quantization.
fontSize	number	9	Monospace font size in pixels determining cell resolution.
tint	ThemedColor	"fg"	Semantic color token or custom color string.
colorMode	"preserve" \| "tint" \| "monochrome"	"tint"	Color pipeline mode for glyph coloring.
interactive	boolean	true	Enables pointer repulsion and spring return physics.
repulsionRadius	number	80	Radius in pixels around the cursor that repels ASCII characters.
springStiffness	number	0.09	Harmonic spring return stiffness coefficient (0.01 - 0.3).
crtFilter	boolean	false	Applies retro CRT phosphor scanline glow effect.