Ascii Art
Renders an image as ASCII art with configurable resolution, character set, and colors. Supports fade, typewriter, and matrix animations; use AsciiArtStatic for non-animated output.
Loading...
Install
Use Open-UI CLI or Shadcn CLI to install the component.
Open-UI CLI
Shadcn CLI
Usage
| Prop | Default | Description | Type |
|---|---|---|---|
| src | — | Image URL to convert to ASCII art (subject to CORS). | string |
| resolution | 80 | Number of ASCII columns (character resolution). Higher values give more detail. | number |
| charset | "standard" | Preset name (e.g. standard, blocks, binary) or custom character string for brightness mapping. | string |
| color | "#ffffff" | Text color for the ASCII art (ignored when colored is true). | string |
| backgroundColor | "transparent" | Background color of the container. | string |
| inverted | false | When true, uses dark background and light text (reverses charset order). | boolean |
| colored | false | When true, uses image colors for each character instead of a single text color. | boolean |
| animated | true | When true, runs the selected animation on load. | boolean |
| animationStyle | "fade" | Animation type: fade, typewriter, matrix, or none. | "fade" | "typewriter" | "matrix" | "none" |
| animationDuration | 1 | Duration of the fade animation in seconds. | number |
| fontFamily | "monospace" | Font family for the ASCII characters (e.g. monospace). | string |
| className | — | Additional CSS class for the container (e.g. w-full, aspect-video). | string |
| animateOnView | true | When true, animation starts only when the component is in view. | boolean |
| objectFit | "cover" | How the image fits the ASCII grid: cover, contain, or fill. | "cover" | "contain" | "fill" |