Reusable Framer Component
Turn any image into animated, interactive ASCII art.
Interactive Playground
Tune it in real time
Upload any image or pick a test shot, then shape the characters, color, motion and cursor physics. The component recomputes the ASCII grid straight from the source pixels.
Controls
Image
Upload an image
Character Set
ASCII Classic
ASCII Classic
Blocks
Minimal
Dots
Lines
Custom
@#:.
Color Mode
Source
Source
B&W
Custom
Duotone
BG · FG · Dark · Light
Animation
Mouse Reaction
Fit Mode
Cover
Cover
Contain
Fill
Preset Gallery
One component, endless looks
Every card below is the same ASCII Image FX component — only the props change.
Classic ASCII
The original @%#*+=-:. ramp in pure grayscale.
Neon Matrix
Binary characters, animated, glowing green on black.
Black & White Poster
High-contrast block shading for a printed poster feel.
Soft Duotone
Dots mapped across two custom tones by luminance.
Animated Glitch
Line glyphs shifting over time straight from source color.
Interactive Cursor Field
Hover to scatter the glyphs with spring physics.
How to use
Copy it into any project
ASCII Image FX is fully self-contained — no external libraries, no setup. Bring it anywhere and drive everything from the property panel.
1 · Copy the component
Use "Copy Component" button to copy ASCII Image FX, then paste it into any other Framer project. Everything travels with it.
2 · Drop in an image
Select the layer, open the properties panel and set the Image control. A fallback image renders until you add your own.
3 · Shape the look
Pick a character set, tune size, brightness and spacing, choose a color mode, then toggle animation and mouse reaction.
Documentation
Every property, explained
Image
Main image input. Renders a built-in fallback image when empty.
Shape Preset
Character ramp: ASCII Classic, Blocks, Minimal, Dots, Lines or Custom.
Custom Shapes
Your own characters, used when Shape Preset is set to Custom.
Size
Size of each ASCII cell (4 to 40). Smaller means more detail.
Brightness
Brightness offset before pixels are mapped to characters (-100 to 100).
Spacing
Spacing between characters and cells (0.6 to 2).
Color Mode
Source Color, Black & White, Custom Colors or Duotone.
Background Color
Background color rendered behind the characters.
Foreground Color
Character color used in Custom Colors mode.
Dark Tone
Color mapped to dark pixels in Duotone mode.
Light Tone
Color mapped to light pixels in Duotone mode.
Animation
Subtly shifts characters over time using requestAnimationFrame.
Mouse Reaction
Characters scatter near the cursor and spring back into place.
Fit Mode
Cover, Contain or Fill while keeping the original aspect ratio.