Component
Interactive ASCII in Framer
This is an interactive ASCII component for Framer, inspired by Zadriel’s work, that turns images into interactive ASCII art. The component is fully customizable, allowing you to adjust character sets, spacing, colors, animation speed, and interaction sensitivity for a unique visual effect.
Created by
About the resource
To use the interactive ASCII component in Framer, customize the appearance and behavior of your ASCII visuals with a range of options. Adjust the Cursor style, including a radial gradient, solid circle, or custom image, and fine-tune its width and smoothness for precise interactions.
Control the Color settings with a single color for the entire image or a two-color gradient based on image lightness. With Gradient, adjust the positions of each color to define their range—values below Color 1 Position use Color 1, values above Color 2 Position use Color 2, and anything in between blends into a gradient. This allows you to emphasize one color over another or create a solid two-color effect by setting both positions to 50%. And there’s more to enhance the effect with Glow, opacity, and blur adjustments. Enable Static to add a noise overlay that changes the characters at set intervals. Adjust the Preview option to toggle the effect in the Framer preview and set the Interval to control how often the noise updates, with a default of 0.1s.
Modify Background colors, Character sets, and Dithering algorithms to refine the ASCII rendering. Additional controls for brightness, contrast, and inversion provide further customization, allowing you to craft unique and engaging ASCII experiences.
About the resource
To use the interactive ASCII component in Framer, customize the appearance and behavior of your ASCII visuals with a range of options. Adjust the Cursor style, including a radial gradient, solid circle, or custom image, and fine-tune its width and smoothness for precise interactions.
Control the Color settings with a single color for the entire image or a two-color gradient based on image lightness. With Gradient, adjust the positions of each color to define their range—values below Color 1 Position use Color 1, values above Color 2 Position use Color 2, and anything in between blends into a gradient. This allows you to emphasize one color over another or create a solid two-color effect by setting both positions to 50%. And there’s more to enhance the effect with Glow, opacity, and blur adjustments. Enable Static to add a noise overlay that changes the characters at set intervals. Adjust the Preview option to toggle the effect in the Framer preview and set the Interval to control how often the noise updates, with a default of 0.1s.
Modify Background colors, Character sets, and Dithering algorithms to refine the ASCII rendering. Additional controls for brightness, contrast, and inversion provide further customization, allowing you to craft unique and engaging ASCII experiences.
About the resource
To use the interactive ASCII component in Framer, customize the appearance and behavior of your ASCII visuals with a range of options. Adjust the Cursor style, including a radial gradient, solid circle, or custom image, and fine-tune its width and smoothness for precise interactions.
Control the Color settings with a single color for the entire image or a two-color gradient based on image lightness. With Gradient, adjust the positions of each color to define their range—values below Color 1 Position use Color 1, values above Color 2 Position use Color 2, and anything in between blends into a gradient. This allows you to emphasize one color over another or create a solid two-color effect by setting both positions to 50%. And there’s more to enhance the effect with Glow, opacity, and blur adjustments. Enable Static to add a noise overlay that changes the characters at set intervals. Adjust the Preview option to toggle the effect in the Framer preview and set the Interval to control how often the noise updates, with a default of 0.1s.
Modify Background colors, Character sets, and Dithering algorithms to refine the ASCII rendering. Additional controls for brightness, contrast, and inversion provide further customization, allowing you to craft unique and engaging ASCII experiences.
The interactive ASCII component properties in Framer.
The interactive ASCII component properties in Framer.
The interactive ASCII component properties in Framer.
