DocsASCII Effect

ASCII Effect

A responsive image-to-ASCII renderer with image, flowing ripple, and signal-glitch variations.

Installation

pnpm dlx shadcn@latest add @componentry/ascii-effect

Usage

API Reference

Property	Type	Default
`imageSrc` Image URL rendered as ASCII characters.	`string`	—
`variant` Visual effect variation.	`"image" \| "flow" \| "glitch"`	`"image"`
`chars` Characters ordered from darkest to brightest.	`string`	`" .:-=+*#%@"`
`fontSize` Character height in pixels.	`number`	`9`
`fontFamily` Font stack used to draw the characters.	`string`	`Arial, Helvetica, sans-serif`
`fontWeight` Canvas font weight.	`number \| string`	`400`
`lineHeight` Character row height multiplier.	`number`	`1`
`characterSpacing` Horizontal character-cell spacing multiplier.	`number`	`1`
`brightnessBoost` Multiplier applied to sampled image luminance.	`number`	`2.2`
`contrast` Contrast applied before character selection.	`number`	`1.1`
`threshold` Dark-pixel cutoff used to keep the background clean.	`number`	`0.06`
`posterize` Number of luminance steps.	`number`	`32`
`dither` Dithering algorithm used to preserve photographic detail.	`"none" \| "floyd-steinberg" \| "bayer"`	`"floyd-steinberg"`
`ditherStrength` Amount of error diffusion or ordered dithering.	`number`	`0.8`
`flowSpeed` Flow cycles per second for the flow variant.	`number`	`0.22`
`flowDirection` Flow direction in degrees.	`number`	`0`
`flowStrength` Directional displacement in pixels.	`number`	`12`
`flowFrequency` Size of the flowing wave field.	`number`	`0.018`
`mouseRadius` Radius of the pointer ripple in pixels.	`number`	`150`
`mouseStrength` Pointer ripple displacement in pixels.	`number`	`22`
`mouseWaveSpeed` Speed of the pointer ripple.	`number`	`1.2`
`scale` Image zoom inside the ASCII field.	`number`	`1.15`
`fit` How the source image fits the canvas.	`"cover" \| "contain" \| "stretch"`	`"cover"`
`colors` One or more colors used as a luminance gradient.	`string[]`	—
`colorMode` Use a supplied gradient or colors sampled from the image.	`"gradient" \| "source"`	`"gradient"`
`backgroundColor` Canvas background color.	`string`	`"#07090d"`
`invert` Reverse the luminance-to-character mapping.	`boolean`	`false`
`glitchIntensity` Strength and number of displaced signal bands.	`number`	`0.65`
`glitchFrequency` Approximate glitches per second.	`number`	`1.4`
`revealDuration` Radial reveal duration in milliseconds.	`number`	`1400`
`alt` Accessible label for the canvas.	`string`	`"ASCII rendering"`
`className` Additional classes for the container.	`string`	—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X

ImageRender / Live

Property

Type

Default

imageSrc

Image URL rendered as ASCII characters.

string

—

variant

Visual effect variation.

"image" | "flow" | "glitch"

"image"

chars

Characters ordered from darkest to brightest.

string

" .:-=+*#%@"

fontSize

Character height in pixels.

number

9

fontFamily

Font stack used to draw the characters.

string

Arial, Helvetica, sans-serif

fontWeight

Canvas font weight.

number | string

400

lineHeight

Character row height multiplier.

number

1

characterSpacing

Horizontal character-cell spacing multiplier.

number

1

brightnessBoost

Multiplier applied to sampled image luminance.

number

2.2

contrast

Contrast applied before character selection.

number

1.1

threshold

Dark-pixel cutoff used to keep the background clean.

number

0.06

posterize

Number of luminance steps.

number

32

dither

Dithering algorithm used to preserve photographic detail.

"none" | "floyd-steinberg" | "bayer"

"floyd-steinberg"

ditherStrength

Amount of error diffusion or ordered dithering.

number

0.8

flowSpeed

Flow cycles per second for the flow variant.

number

0.22

flowDirection

Flow direction in degrees.

number

0

flowStrength

Directional displacement in pixels.

number

12

flowFrequency

Size of the flowing wave field.

number

0.018

mouseRadius

Radius of the pointer ripple in pixels.

number

150

mouseStrength

Pointer ripple displacement in pixels.

number

22

mouseWaveSpeed

Speed of the pointer ripple.

number

1.2

scale

Image zoom inside the ASCII field.

number

1.15

fit

How the source image fits the canvas.

"cover" | "contain" | "stretch"

"cover"

colors

One or more colors used as a luminance gradient.

string[]

—

colorMode

Use a supplied gradient or colors sampled from the image.

"gradient" | "source"

"gradient"

backgroundColor

Canvas background color.

string

"#07090d"

invert

Reverse the luminance-to-character mapping.

boolean

false

glitchIntensity

Strength and number of displaced signal bands.

number

0.65

glitchFrequency

Approximate glitches per second.

number

1.4

revealDuration

Radial reveal duration in milliseconds.

number

1400

alt

Accessible label for the canvas.

string

"ASCII rendering"

className

Additional classes for the container.

string

—