AsciiMatrixImage

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 😃