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

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

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

import { AsciiEffect } from "@/components/ui/ascii-effect" <div className="h-[520px] overflow-hidden rounded-2xl"> <AsciiEffect variant="image" imageSrc="/images/portrait.jpg" fontSize={9} scale={1.15} /> </div>

Prop

Type

Default

imageSrc

string

Image URL rendered as ASCII characters.

—

variant

"image" | "flow" | "glitch"

Visual effect variation.

"image"

chars

string

Characters ordered from darkest to brightest.

" .:-=+*#%@"

fontSize

number

Character height in pixels.

9

fontFamily

string

Font stack used to draw the characters.

Arial, Helvetica, sans-serif

fontWeight

number | string

Canvas font weight.

400

lineHeight

number

Character row height multiplier.

1

characterSpacing

number

Horizontal character-cell spacing multiplier.

1

brightnessBoost

number

Multiplier applied to sampled image luminance.

2.2

contrast

number

Contrast applied before character selection.

1.1

threshold

number

Dark-pixel cutoff used to keep the background clean.

0.06

posterize

number

Number of luminance steps.

32

dither

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

Dithering algorithm used to preserve photographic detail.

"floyd-steinberg"

ditherStrength

number

Amount of error diffusion or ordered dithering.

0.8

flowSpeed

number

Flow cycles per second for the flow variant.

0.22

flowDirection

number

Flow direction in degrees.

0

flowStrength

number

Directional displacement in pixels.

12

flowFrequency

number

Size of the flowing wave field.

0.018

mouseRadius

number

Radius of the pointer ripple in pixels.

150

mouseStrength

number

Pointer ripple displacement in pixels.

22

mouseWaveSpeed

number

Speed of the pointer ripple.

1.2

scale

number

Image zoom inside the ASCII field.

1.15

fit

"cover" | "contain" | "stretch"

How the source image fits the canvas.

"cover"

colors

string[]

One or more colors used as a luminance gradient.

—

colorMode

"gradient" | "source"

Use a supplied gradient or colors sampled from the image.

"gradient"

backgroundColor

string

Canvas background color.

"#07090d"

invert

boolean

Reverse the luminance-to-character mapping.

false

glitchIntensity

number

Strength and number of displaced signal bands.

0.65

glitchFrequency

number

Approximate glitches per second.

1.4

revealDuration

number

Radial reveal duration in milliseconds.

1400

alt

string

Accessible label for the canvas.

"ASCII rendering"

className

string

Additional classes for the container.

—