Skip to main content

glitch-text

This code defines a React component named GlitchText, which creates a "glitching" text effect for any given string of text. The text appears to randomly change some of its characters to random symbols, simulating a glitch effect. The component uses Framer Motion for animation and React’s state and effects hooks to manage the glitching logic.

Key Elements of the Code:​

1. useState for State Management:​

  • const [glitchedText, setGlitchedText] = useState(text);
    • This hook manages the state of the text being displayed. Initially, glitchedText is set to the text prop passed to the component.
tip

useState is used here to store and update the state of the text, allowing the component to modify and display the "glitched" version of the text dynamically.

2. useEffect for Glitching Logic:​

  • The useEffect hook is responsible for periodically altering the text to simulate the glitch effect. The effect runs when the text prop changes.

Inside the useEffect:

  • setInterval is used to repeatedly "glitch" the text at intervals of 1 second (1000 ms).
  • For each interval, the function:
    • Randomly decides whether or not to "glitch" a character in the text (with a 50% chance for each character).
    • If a character is to be "glitched," it replaces it with a random character from the ASCII range of printable symbols (33-126).
    • The glitched version of the text is then set using setGlitchedText.
    • After a short timeout of 200ms, the text is reset back to its original form.
  • clearInterval is used to clear the glitching effect when the component unmounts or when text changes.
warning

The glitching logic runs in intervals and resets the text after each glitch. This behavior may impact performance if the component is used excessively or with frequent updates.

3. Framer Motion for Animation:​

  • Framer Motion is used to animate the text as it appears. The motion component is wrapped around the text, and it animates from an initial state where the opacity is 0 and the text is positioned slightly above its final position (y: -20).
  • Once the component is rendered, it animates to full opacity (opacity: 1) and to its correct position (y: 0), with a transition that takes 1 second.
note

Framer Motion provides smooth entrance animations for the glitch text, ensuring the text fades in and positions itself gracefully on the page.

4. Glitching Effect Details:​

  • The glitching effect happens in two stages:
    • Character-level glitch: Characters in the text may randomly change to random ASCII characters (based on a 50% chance).
    • Text reset: After a brief 200ms interval, the text resets to its original state.
  • The glitching only happens intermittently, occurring once every second (1000ms), and not all characters glitch at once, creating a subtle and dynamic effect.
important

The glitch effect is applied only to a portion of the text at any given moment. This creates a dynamic and unpredictable look, which can be visually striking for design elements like titles or headlines.

5. Component Props:​

  • text: The text string passed to the component that will undergo the glitching effect.
  • className (optional): Any additional CSS classes that can be applied to the motion.div element.

How It Works (Step-by-Step):​

  1. The component receives a text prop (the string that will be shown with the glitch effect).
  2. It sets up an interval that will repeatedly try to glitch the text every second.
  3. For each glitch, the text is split into characters, and each character has a 50% chance of being replaced by a random symbol.
  4. The new glitched version of the text is shown temporarily, and then, after a short delay (200ms), the text is reset back to the original text prop.
  5. The component uses Framer Motion to animate the entrance of the glitched text with a smooth fade-in effect.
tip

The glitch effect is subtle and dynamic, making it suitable for titles, headings, or interactive elements where you want to draw attention with an engaging text animation.

Summary:​

The GlitchText component simulates a glitchy text effect where characters of a given string randomly change to random symbols at regular intervals. The glitch effect is visually enhanced using a smooth fade-in animation provided by Framer Motion.

This effect can be used for creating stylized, dynamic text effects in a variety of scenarios, such as for titles, banners, or interactive content in web applications.

Key Features:​

  • Glitch Effect: Randomly changes characters to simulate glitches.
  • Reset: The text resets to its original form after a short delay.
  • Smooth Animation: The text fades into view with a smooth animation as it appears on the page.

Make sure to adjust the glitch interval and timing according to your design needs to balance visual impact with performance.