An image (PNG, JPEG, GIF, WebP), or an exported .md to pick a session back up. Dropping a file on the canvas works too.
Mode
Ramp: each cell gets a character by its tone. Camelizer: the image becomes a silhouette, filled with your text.
Image size
How much of the canvas the art fills. Above 100%, it runs past the edges.
Min. opacity
Pixels more transparent than this are skipped: trims the soft edges of a cut-out PNG. Dimmed when the image has no transparency.
Ramp
Char set
The characters used, from sparse to dense (all the sets are listed below). Custom… opens a Chars field to type your own.
Curve
Like Photoshop's Curves: the tone of the image (along the bottom, black on the left) and the tone it becomes (up the side, black at the bottom), 0 to 255. Behind it, the image's histogram.
Points
Click to add a point, drag to move it; drag it out of the frame, right-click it or press Delete to remove it. Arrows: one level, with Shift: ten. Double-click: back to the diagonal.
Ends
The levels: pulling an end toward the middle clips — everything past it turns black or white — and stretches the rest.
Midtones
The gamma: a point in the middle (input 128), raised lightens the midtones, lowered darkens them, black and white untouched. An S curve adds contrast.
Ramp bias
Shifts the whole mapping. Positive: lighter characters; negative: denser.
Min density
Minimum character weight, so bright areas don't turn empty.
Camelizer
Text
The text poured into the shape, from top left to bottom right.
Text fit
When text and shape don't match: None pours it once, Repeat text loops it, Auto image size / Auto font size let the app set that slider (dimmed meanwhile) so the text lands exactly.
Threshold
Tone at or below which a cell counts as ink, 0 to 255. Higher: a thicker silhouette.
Negative
Inverts the silhouette: the text fills the light areas.
Formatting
None: every space removed, densest shape. Preserve whitespace: keeps your spacing. Preserve words: never splits a word (unless wider than the line).
Fill char
Preserve words only: pads a line end where the next word doesn't fit. Blank leaves a ragged edge.
No Curve in Camelizer: in front of a black-or-white threshold, a tone curve can only move that threshold, which Threshold already does. Min. opacity reads the alpha channel, not the tone, so it stays in both modes.
Character sets
Font size
Character size in pixels. Larger: fewer, coarser characters.
Color
The characters' color. In the picker, + saves it to the palette.
Background
The background behind the art. Its checkered swatch gives exports with no background.
As long as Color has not been touched, it follows the theme: green on dark, near-black on light.
Render scale
Pulls every character toward the center without shrinking it, so they overlap. Preview and PNG only.
H spacing, V spacing
Extra pixels between columns / rows. Negative values overlap the characters.
Link H/V
Moves both spacings together, keeping the image's proportions.
Dynamics
Scroll
Scrolling over the canvas kicks the particles.
Scroll force
Strength of that kick.
Whole page
In the exported HTML, react to scrolling anywhere on the page, not just over the art.
Cursor
The cursor pushes the particles away.
Cursor radius, Cursor force
Area of influence in pixels; strength of the push.
Spring
How hard particles are pulled back home. Higher: snappier.
Damping
Energy lost per frame. Lower: bouncier; higher: a tight return.
Each setting is dimmed while it has nothing to act on: Scroll force and Whole page without Scroll, the cursor's settings without Cursor, Spring and Damping with both off — a stiffer built-in spring then settles the particles after a change.
Name
File prefix, numbered automatically (✎ to change the number). Empty: ascii-art.*, no numbering.
Copy
Copies a self-contained HTML snippet: static when Scroll and Cursor are off, animated otherwise.
html · txt
A standalone page (settings listed in its footer) · plain text.
md
The save format: every setting plus the source image. Reopen it with Choose image ↑ or by dropping it.
png, PNG width
A flat image at the width set below the icons; the height follows the canvas.
The number only moves when something that ends up in the files has changed: the same work saved as md, then png and html, keeps one number.
px
Shortcuts
Image
Tab (held)
Shows the image as the characters read it, in place of them: in grey levels, through the Curve (raw in Camelizer). Keep adjusting with the mouse meanwhile, the Curve for instance
Two fingers, wheel
Scroll the page, as a visitor would: drives the Scroll dynamic (when Scroll is on)
Pointer over the image
Drives the Cursor dynamic (when Cursor is on)
Drop
An image or an .md project on the image
Sliders
Click in the bubble
Type the value (a comma works); Enter confirms, Esc cancels
↑ ↓
One step; with Shift: ten
Double-click
On the track or the label: back to the default
Curve
Click
Add a point
Drag
Move a point
Out of the frame, right-click, Delete
Remove a point
Arrows
Move the selected point one level; with Shift: ten
Double-click
Back to the diagonal
Windows
Esc
Closes a help window
How to use
What it's for
Turns an image into ASCII art made of live character particles — either a ramp of characters by tone, or your own text poured into the image's silhouette (Camelizer). The result can react to the cursor and to scrolling, and exports as an embeddable HTML snippet, a standalone page, text or PNG.
The image is never converted once and for all: the art is rebuilt live from the source, so every setting stays reversible. Each section's details its settings.
Header
This help.
Every setting back to its default. The image, the export name and its number stay. A message offers to undo for a few seconds; tick “Don't show again” to reset silently until the page is reloaded.
Light / dark theme.
Particles
Number of characters in the scene.
fps
Frames drawn per second.
Text fit
Camelizer only: text length ÷ ink cells available. 1.00× lands exactly; below, the shape ends unfinished; above, the text is cut off. With Repeat text, it reads as a loop count.
Conventions
Green text
What changes when you click on it: a menu's value, a field to type in, a main action. Grey text is read only.
Sliders
The value shows in a bubble while hovering or dragging; click in it to type a value (a comma works, the unit is optional). Arrows: one step, with Shift: ten. Double-click the track or the label: back to the default.
Dimmed setting
It has nothing to act on right now: no transparency in the image, Scroll or Cursor off, a slider driven by Text fit, an .md opened without its image.
Black on the left
Everywhere tones are shown: the Curve, its histogram.
Shortcuts
All of them, keyboard and mouse: the icon at the bottom right of the image.
Good to know
Auto fit
The grid is made of whole cells: on a coarse silhouette the closest reachable fit can stay a few percent off 1.00×.
Settling
With Scroll and Cursor off, a stiffer built-in spring settles particles after a change — a brief nudge instead of a long bounce.
Render scale
Replicates the overlap of a CSS-shrunk HTML export; physics and the HTML export ignore it.
Particles
Each one costs a draw and a physics step every frame, dynamics on or off: fewer particles, smoother animation.
Older projects
An .md saved before the Curve (Gamma, Brightness, Contrast) opens converted: the ends sit where the old settings clipped to black or white, seven points follow the rest. Very close, not always identical.