An interactive component that turns any image into live ASCII art rendered on a canvas, with a built-in side panel for editing everything in real time.
Converts an uploaded image into ASCII characters based on brightness (luminance → character mapping).
Characters scatter away from the cursor and smoothly settle back into place when the cursor moves away.
Renders crisply on high-resolution (HiDPI) screens and shows a static preview in canvas/export mode.
Includes safe fallbacks: a placeholder pattern while loading, and graceful handling if the image fails to load.
Upload image – pick your own file (loaded directly in the browser).
Resolution – number of ASCII columns (detail level).
Font size – character size (or auto).
Character ramp – the set of characters used from dark to light.
Invert – flips the brightness-to-character mapping.
Text & background colors – preset swatches plus manual hex input with validation.
Cursor radius / strength – how far and how strongly the cursor affects characters.
Scatter amount – how far characters fly out.
Return speed – how quickly they settle back.
Reset – returns everything to the starting defaults.
Show/hide panel toggle.
Image, resolution, char ramp, invert, text color, background color, font size, cursor radius, cursor strength, scatter amount, return speed, and an accent color used for the panel UI.
Place the ASCII Image Playground on the page and set starting defaults in Framer’s properties panel.
Open the live panel to upload your own image and tune resolution, colors, and cursor behavior on the fly.
View it interactively (not as a static screenshot) — the effect responds to cursor movement over the artwork.
Use the Reset button anytime to return to your defined defaults.
An interactive component that turns any image into live ASCII art rendered on a canvas, with a built-in side panel for editing everything in real time.
Converts an uploaded image into ASCII characters based on brightness (luminance → character mapping).
Characters scatter away from the cursor and smoothly settle back into place when the cursor moves away.
Renders crisply on high-resolution (HiDPI) screens and shows a static preview in canvas/export mode.
Includes safe fallbacks: a placeholder pattern while loading, and graceful handling if the image fails to load.
Upload image – pick your own file (loaded directly in the browser).
Resolution – number of ASCII columns (detail level).
Font size – character size (or auto).
Character ramp – the set of characters used from dark to light.
Invert – flips the brightness-to-character mapping.
Text & background colors – preset swatches plus manual hex input with validation.
Cursor radius / strength – how far and how strongly the cursor affects characters.
Scatter amount – how far characters fly out.
Return speed – how quickly they settle back.
Reset – returns everything to the starting defaults.
Show/hide panel toggle.
Image, resolution, char ramp, invert, text color, background color, font size, cursor radius, cursor strength, scatter amount, return speed, and an accent color used for the panel UI.
Place the ASCII Image Playground on the page and set starting defaults in Framer’s properties panel.
Open the live panel to upload your own image and tune resolution, colors, and cursor behavior on the fly.
View it interactively (not as a static screenshot) — the effect responds to cursor movement over the artwork.
Use the Reset button anytime to return to your defined defaults.