Photo to ASCII art generator

1. 01

   Open a photo

   Drop it on the page, paste it with ⌘V, or start from one of the public-domain samples. JPG, PNG, WebP and GIF all work.

2. 02

   Remove the background

   Use People for portraits, Any subject for products and animals, or Solid color for studio shots. The model runs on your device.

3. 03

   Grade the color

   Pick one of 60 looks or import a .cube LUT, then adjust brightness, contrast, gamma and clipping. Auto sets the levels from the photo.

4. 04

   Choose the glyphs

   Pick a character set, the number of columns, a dithering method and a font. Turn on colored glyphs to keep the photo's colors.

5. 05

   Add motion

   Choose one of 13 cursor effects, an ambient loop and an entrance that plays when the art scrolls into view.

6. 06

   Export

   Download a Next.js component, a PNG up to 3840 pixels wide, an SVG or plain text.

Density .:-=+*#%@

Darker areas get heavier characters. Ten character sets, from a classic ten-step ramp to blocks, dots and Katakana, plus your own set sorted by ink.

Lines-\|/-\|/

Edge detection traces the outlines of the photo with - / | \, with optional shading underneath.

Braille⣀⣤⣶⣿⣶⣤⣀

Eight dots per character give braille art about four times the detail of a density ramp.

TextASCII STUDIO

Your own words fill the shape of the subject, with dithering at the edges.

Colored@%#*+=-:.

Each cell gets a tile of the graded photo color behind its glyph. Characters still follow light and dark, so it stays ASCII.

Dithered.:.:#:.:.

Floyd–Steinberg, Atkinson and Bayer dithering spread tone across neighboring cells for smoother gradients.

Repel

Glyphs spring away from the cursor and settle back.

Attract

Glyphs gather toward the cursor.

Scramble

Glyphs flicker into random characters as you pass.

Spotlight

Everything dims except the area around the cursor.

Magnify

A lens enlarges whatever is under the cursor.

Ripple

Rings spread out as the cursor moves.

Ink trail

The cursor leaves a fading trail of heavier glyphs.

Erase

The cursor wipes glyphs away and they decode back.

Invert

Light and dark swap inside a circle.

Swirl

The art twists around the cursor.

Glitch

Rows slip sideways when the cursor moves quickly.

Bulge

Glyphs grow and push outward.

Rain

Characters fall from the cursor.

Add an ambient loop (shimmer, breathe, wave, scan line or drift) and an entrance (decode, fade, typewriter, scan or from the center) that plays once when the art scrolls into view.

Bring your own grade by importing a .cube LUT. Sources and licenses are on the credits page.

import AsciiHero from "@/components/AsciiHero";

export default function Home() {
  return (
    <section className="relative overflow-hidden min-h-[80vh]">
      <AsciiHero variant="section" effect="ripple" />
      <div className="relative">…</div>
    </section>
  );
}

<footer className="relative overflow-hidden h-80">
  <AsciiHero variant="footer" mask="top" opacity={0.6} />
</footer>

<AsciiHero variant="background" />   {/* fixed behind the whole page */}

• variant places the art: background, section, footer or inline.
• fit and alignX/alignY work like object-fit and object-position.
• effect, ambient and intro change the motion without re-exporting.
• fontFamily="var(--font-mono)" picks up a next/font variable.
• label gives the art an accessible name; without it the art is hidden from screen readers as decoration.
• The canvas pauses off screen and respects reduced motion.