ASCII Art
Any image drawn as live ASCII on one WebGL quad: it reveals from a point as a wavefront, glows under the pointer and flickers faintly. No dependencies.
Loading preview…
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| src | string | () => Promise<CanvasImageSource> | — | An image URL (a transparent PNG works best) or a loader returning anything drawable. |
| color | string | — | The characters' colour. |
| colorHot | string | — | The reveal's wavefront and the glow under the pointer. |
| cellSize | number | — | One character's size in pixels. Smaller keeps more detail. |
| chars | string | — | The characters, darkest to brightest. |
| fit | "contain" | "cover" | — | How the image fits the canvas. |
| alignX | "left" | "center" | "right" | — | Horizontal alignment. |
| alignY | "top" | "center" | "bottom" | — | Vertical alignment. |
| scale | number | — | Scales the image within the canvas. |
| duration | number | — | How long the reveal takes, in milliseconds. |
| delay | number | — | Waits this long before revealing. |
| revealOrigin | { x: number; y: number } | — | Where the reveal starts, 0 to 1 in each direction. |
| hoverRadius | number | — | How far the glow under the pointer reaches. |
| flicker | number | — | How often characters flicker. |
| className | string | — | Classes for the root element. |