https://github.com/ivan-corporation/glitch-text

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 🔮
https://github.com/ivan-corporation/glitch-text

animation css distortion-effects glitch glitch-effect glitching hover-effects nextjs npm-module npm-package react scss text text-animation

Last synced: 1 day ago
JSON representation

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 🔮

• Host: GitHub
• URL: https://github.com/ivan-corporation/glitch-text
• Owner: Ivan-Corporation
• License: mit
• Created: 2022-06-12T12:40:28.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-06-12T13:01:47.000Z (over 2 years ago)
• Last Synced: 2024-11-16T09:33:57.075Z (3 days ago)
• Topics: animation, css, distortion-effects, glitch, glitch-effect, glitching, hover-effects, nextjs, npm-module, npm-package, react, scss, text, text-animation
• Language: SCSS
• Homepage: https://codesandbox.io/s/glitch-text-v2pine
• Size: 416 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![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/glitch-text)

![npm](https://img.shields.io/npm/dm/glitch-text)

![GitHub stars](https://img.shields.io/github/stars/Ivan-Corporation/glitch-text?style=social)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/glitch-text)

# 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 💡:

```bash

npm i glitch-text

---

yarn add glitch-text

```

## Usage 🔥:

```jsx

// don't forget change props

import { GlitchText } from 'glitch-text';

 // orange theme by default 

const App = () => {

  return (

    


     

      


    

  );

};

```

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):

---



### 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 |

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