Skip to content

Latest commit

History

History
89 lines (55 loc) 路 1.95 KB

README.md

File metadata and controls

89 lines (55 loc) 路 1.95 KB

NPM JavaScript Style Guide NPM npm GitHub stars npm bundle size

Glitch text for react 馃敭

2022-06-12.15-20-38.mp4

This nice and simple (1kB) react component can help you add text glitch animation and have some really cool themes, like orange glitch or blue glitch

The glitch is really smooth, I tried to make more distortion but it's looked awful


Install 馃挕:

npm i glitch-text
---
yarn add glitch-text

Usage 馃敟:

// don't forget change props
import { GlitchText } from 'glitch-text';

 // orange theme by default 
const App = () => {
  return (
    <div style={{ fontSize: '70px' }}>
     
      <GlitchText theme='orange' text={'There are your text'} />

    </div>
  );
};

Text fully customazible but try use parents tags for styling

I'm recommend use 50px - 100px range for more beauty effect


Themes 馃帹 (more coming soon):

  • orange - (by default)
  • blue
  • green
  • red
  • white
  • purple

Examples 馃Г (hover on text):



Props 馃敡:

props required default description
text(string) yes - text where you want use glitch animation
theme(string) yes orange glitch color

npm - https://www.npmjs.com/package/glitch-text