AsciiMatrixImage: Premium Backgrounds Component by Umut Sevinc

Turn any image into a colored ASCII grid in Framer. Static, animated load, or glitch flicker — optional hover scramble that decays naturally. Every char colored from the source pixel, full font + ramp + threshold controls.

About this Component

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 😃