React glitch-effect-components

---

DEMO

---

---

Squiggly Glitch Component

import GlitchSquiggly from 'react-glitch-effect/core/GlitchSquiggly';

Props

Name	Type	Default
disabled	boolean	false
duration	string	3s
iterationCount	string	infinite
onHover	boolean	false
baseFrequency	number	0.02
scaleNoise	number	5

---

---

Example Squiggly glitch effect component

javascriptCopy
import React, { useState } from 'react';
import GlitchSquiggly from 'react-glitch-effect/core/GlitchSquiggly';

const MyComponent = () => {
 const [isDisabled, setDisabled] = useState(false);

 const handleToggleGlitch = () => {
   setDisabled(!isDisabled);
 };

 return (
   <div>
     <button onClick={handleToggleGlitch}>TOGGLE EFFECT</button>

     <GlitchSquiggly disabled={isDisabled}>
       <h1>GlitchSquiggly</h1>
     </GlitchSquiggly>
   </div>
 )
};

---

---

Clip Glitch Component

import GlitchClip from 'react-glitch-effect/core/GlitchClip';

Props

Name	Type	Default
disabled	boolean	false
duration	string	3s
iterationCount	string	infinite
onHover	boolean	false

---

---

Example Clip glitch effect component

javascriptCopy
import React from 'react';
import GlitchClip from 'react-glitch-effect/core/GlitchClip';

const MyComponent = () => {
   return (
     <GlitchClip>
       <h1>Glitch</h1>
     </GlitchClip>
   )
}

Manually trigger example Clip glitch effect component

javascriptCopy
import React, {useState} from 'react';
import GlitchClip from 'react-glitch-effect/core/Clip';
   
const MyComponent = () => {
  const [isDisabled, setDisabled] = useState(false);

  const handleToggleGlitch = () => {
    setDisabled(!isDisabled);
  };

  return (
    <div>
        <button onClick={handleToggleGlitch}>TOGGLE EFFECT</button>
        <GlitchClip disabled={isDisabled}>
          <h1>Glitch</h1>
        </GlitchClip>
    </div>
  )
};

Example Clip glitch effect with on hover

javascriptCopy
import React from 'react';
import GlitchClip from 'react-glitch-effect/core/Clip';

const MyComponent = () => {
    return (
      <GlitchClip onHover={true}>
        <h1>Glitch</h1>
      </GlitchClip>
    )
}

---

---

Text Glitch Component

import GlitchText from 'react-glitch-effect/core/GlitchText';

Props

Name	Type	Default
component	string	span
color1	string	rgba(77, 171, 245, .5)
color2	string	rgba(245, 0, 87, .3)
disabled	boolean	false
duration	string	2s
iterationCount	string	infinite
onHover	boolean	false

---

---

Example Text glitch effect component

javascriptCopy
import React, {useState} from 'react';
import GlitchText from 'react-glitch-effect/core/GlitchText';

 const MyComponent = () => {
   const [isDisabled, setDisabled] = useState(false);
 
   const handleToggleGlitch = () => {
     setDisabled(!isDisabled);
   };
 
   return (
     <div>
         <button onClick={handleToggleGlitch}>TOGGLE EFFECT</button>
         <GlitchText component='h1' disabled={isDisabled}>
           Glitch
         </GlitchText>
     </div>
   )
 };