react-glitch-effect

A glitch effects

Usage no npm install needed!

<script type="module">
  import reactGlitchEffect from 'https://cdn.skypack.dev/react-glitch-effect';
</script>

README

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