AsciiMatrixImage

Colored ASCII grid renderer for images

Introducing the ASCII Matrix Image component. 👀 Live Preview https://memselon-components.framer.website/ascii-matrix-image Turn any image into a colored ASCII grid. Every pixel becomes a character whose density follows the source luminance and whose color is sampled from the source. Three modes (static, animated load, glitch), optional hover scramble that decays naturally, full font + ramp + threshold controls. How to Use and Customize Drop an image into the Image control. Grid auto-fits the container ratio (no stretch). Pick a Mode: Static, Load (top-to-bottom reveal), Glitch (controlled-rate random flicker). Tune Cell Size and Char Width for grain. Default 8 px gives the fine-grain reference look. Font Scale shrinks the glyph in the cell for breathing room. Brightness, Contrast, Saturation push the palette. Skip Dark hides cells below a luminance floor. Speed controls Load reveal speed and Glitch refresh rate. Hover Trail: symbols scramble under the cursor with no color shift. Trail Radius and Decay tune the feel. Bloom adds a halo glow behind the chars (off by default). Char Ramp, Background, Radius — all customizable. Responsive: every prop is reactive, the grid recomputes on resize. Enjoy 😃

Colored ASCII grid renderer for images