Move your cursor over the image

Controls

cellSizepx

characters

color

sparkColor

radiuspx

decay

glitter

contrast

invert

ASCII Image

Renders any image as ASCII art, with a glittering pixel trail under the cursor.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/ascii-image

import { AsciiImage } from "@/components/ascii-image"

export function Demo() {
  return (
    <AsciiImage
      src="/hero.jpg"
      alt="Mountain range at dusk"
      className="h-96 w-full"
    />
  )
}

Updates live as you change the controls. Only non-default props are included.