glitch-text
v1.6.1
Published
[![NPM](https://img.shields.io/npm/v/glitch-text.svg)](https://www.npmjs.com/package/glitch-text) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) ![NPM](https://img.shields.io/npm/l/g
Downloads
68
Maintainers
Readme
Glitch text for react
🔮
https://user-images.githubusercontent.com/58357980/173233890-9801b49f-5c2b-4f7b-8c0f-b6e6ca0c1f3f.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
Themes 🎨 (more coming soon):
Examples 🧤 (hover on text):
Check here - https://react-next-js-api-auth.vercel.app/
Check here - https://komaroad.netlify.app/
Props 🔧:
| props | required | default | description | | ------------- | ------------- | ------------- | ------------- | | text(string)| yes | - | text where you want use glitch animation | | theme(string) | yes | orange | glitch color |