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

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