ASCII Art

Convert any image to ASCII art with customizable charsets, colors, and animations.

Installation

npx shadcn@latest add @aceternity/ascii-art

Preset	Characters
`standard`	Space, `.,:;i1tfLCG08@`
`blocks`	Space, `░▒▓█`
`binary`	Space, `01`
`dots`	Space, `·•●`
`minimal`	Space, `.:░▒`
`dense`	Extended ASCII with many symbols
`arrows`	Space, `←↑→↓↔↕↖↗↘↙`
`stars`	Space, `·✦✧★`
`hash`	Space, `-=#`
`pipes`	Space, pipe, slash, box-drawing chars
`braille`	Space, `⠁⠃⠇⠏⠟⠿⡿⣿`
`circles`	Space, `○◔◑◕●`
`squares`	Space, `▢▣▤▥▦▧▨▩`
`hearts`	Space, `♡♥`
`math`	Space, `+-×÷=≠≈∞`

Prop	Type	Default	Description	Required
`src`	`string`	-	Source image URL to convert to ASCII art.	Yes
`resolution`	`number`	`80`	Number of ASCII columns (character resolution). Higher = more detail.	No
`charset`	`string`	`"standard"`	Charset preset name or custom character string.	No
`color`	`string`	`"#ffffff"`	Text color for ASCII art (ignored if `colored=true`). Supports CSS variables.	No
`backgroundColor`	`string`	`"transparent"`	Background color. Supports CSS variables like `var(--color-red-500)`.	No
`inverted`	`boolean`	`false`	Invert the character mapping (dark becomes light).	No
`colored`	`boolean`	`false`	Use original image colors for each character.	No
`animated`	`boolean`	`true`	Enable animation on load.	No
`animationStyle`	`"fade" \| "typewriter" \| "matrix" \| "none"`	`"fade"`	Animation style: fade in, typewriter reveal, matrix rain, or no animation.	No
`animationDuration`	`number`	`1`	Duration for fade animation in seconds.	No
`fontFamily`	`string`	`"monospace"`	Font family for ASCII characters.	No
`className`	`string`	`undefined`	Container className - use this to control size (e.g., `w-full`, `h-64`).	No
`animateOnView`	`boolean`	`true`	Only start animation when component enters viewport.	No
`objectFit`	`"cover" \| "contain" \| "fill"`	`"cover"`	How the source image should fit within the ASCII grid.	No

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

200+ templates and blocks combined

Ready to copy paste component blocks, save days of development time