Component
Text Glitch Component for Framer
This is a text glitch animation component for Framer. Just drop it into your site, customize the text, colors, and animation settings in the properties panel, and watch your message scramble and reveal with style.
Created by
About the resource
To use the Text Glitch component, enter the message you'd like to display in the Text field — this will be the final content revealed after the animation. Use the Font setting to customize typeface, size, and spacing, while the Optical value helps fine-tune the font’s clarity at different sizes.
Adjust the Weight to control how bold or light the text appears. Set the Color for the final revealed text, and use the Scrambled color to style the characters shown during the glitch animation.
With Chars, you can define exactly which symbols or letters are used in the scrambling effect. The Scramble % lets you choose how much of the text is affected — from just a few letters to the entire string.
Speed controls how fast the scrambled characters change, while Duration sets how long the animation runs before the final text is shown. Lastly, the Glitch toggle allows you to turn the scrambling effect on or off completely.
About the resource
To use the Text Glitch component, enter the message you'd like to display in the Text field — this will be the final content revealed after the animation. Use the Font setting to customize typeface, size, and spacing, while the Optical value helps fine-tune the font’s clarity at different sizes.
Adjust the Weight to control how bold or light the text appears. Set the Color for the final revealed text, and use the Scrambled color to style the characters shown during the glitch animation.
With Chars, you can define exactly which symbols or letters are used in the scrambling effect. The Scramble % lets you choose how much of the text is affected — from just a few letters to the entire string.
Speed controls how fast the scrambled characters change, while Duration sets how long the animation runs before the final text is shown. Lastly, the Glitch toggle allows you to turn the scrambling effect on or off completely.
About the resource
To use the Text Glitch component, enter the message you'd like to display in the Text field — this will be the final content revealed after the animation. Use the Font setting to customize typeface, size, and spacing, while the Optical value helps fine-tune the font’s clarity at different sizes.
Adjust the Weight to control how bold or light the text appears. Set the Color for the final revealed text, and use the Scrambled color to style the characters shown during the glitch animation.
With Chars, you can define exactly which symbols or letters are used in the scrambling effect. The Scramble % lets you choose how much of the text is affected — from just a few letters to the entire string.
Speed controls how fast the scrambled characters change, while Duration sets how long the animation runs before the final text is shown. Lastly, the Glitch toggle allows you to turn the scrambling effect on or off completely.
The properties of the text glitch component for Framer.
The properties of the text glitch component for Framer.
The properties of the text glitch component for Framer.
