ASCII Shader Animation in Framer

Copy component

Copy component

ASCII Shader Animation in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

How I made $10K+ with Framer in 60 days

$10k Undercover Event

Component

ASCII Shader Animation in Framer

This is a ASCII shader animation recreated in Framer from Andrico Karoulla’s original work. It’s fully customizable with options for colors, fonts, characters, and animation settings. Drop it in, customize the characters, resolution, and speed, and bring a retro, code-inspired vibe to your design.

ASCII shader animation component in Framer UI

About the resource

To use the ASCII Shader Animation in Framer, you can control how it looks and moves with simple settings. The Animation Controls let you choose if it runs on the canvas, set the frequency for big or small noise blobs, and adjust the speed of the movement. In Visual Mode, you can use the colorful rainbow style or switch to a custom palette with up to three colors. You can also set a background color and fine-tune the palette when in custom mode. The ASCII Rendering controls let you change the cell size of characters, adjust contrast for sharper or softer detail, and shift color transitions. Finally, under Font & Characters, you can use simple built-in glyphs or pick your own font and characters to create unique ASCII visuals.

About the resource

To use the ASCII Shader Animation in Framer, you can control how it looks and moves with simple settings. The Animation Controls let you choose if it runs on the canvas, set the frequency for big or small noise blobs, and adjust the speed of the movement. In Visual Mode, you can use the colorful rainbow style or switch to a custom palette with up to three colors. You can also set a background color and fine-tune the palette when in custom mode. The ASCII Rendering controls let you change the cell size of characters, adjust contrast for sharper or softer detail, and shift color transitions. Finally, under Font & Characters, you can use simple built-in glyphs or pick your own font and characters to create unique ASCII visuals.

About the resource

To use the ASCII Shader Animation in Framer, you can control how it looks and moves with simple settings. The Animation Controls let you choose if it runs on the canvas, set the frequency for big or small noise blobs, and adjust the speed of the movement. In Visual Mode, you can use the colorful rainbow style or switch to a custom palette with up to three colors. You can also set a background color and fine-tune the palette when in custom mode. The ASCII Rendering controls let you change the cell size of characters, adjust contrast for sharper or softer detail, and shift color transitions. Finally, under Font & Characters, you can use simple built-in glyphs or pick your own font and characters to create unique ASCII visuals.

The ASCII shader animation properties in Framer.

The ASCII shader animation properties in Framer.

The ASCII shader animation properties in Framer.

Learn how I went from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to secretly building a profitable Framer business.

Nandi portrait's background

Learn how I went from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to secretly building a profitable Framer business.

Nandi portrait's background

Learn how I went from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to secretly building a profitable Framer business.

Nandi portrait's background

More resources

More resources

  • Music app playlist created screen with artist avatars

    Playlist Generation Circular Animation in Framer

    Component

    Music app playlist created screen with artist avatars

    Playlist Generation Circular Animation in Framer

    Component

  • Customer testimonials section with review letter card

    3D Letter Testimonials in Framer

    Component

    Customer testimonials section with review letter card

    3D Letter Testimonials in Framer

    Component