React glitch-effect-components

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

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

 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

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

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

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>
   )
 };