Glitched Text React

A customizable React component that creates a glitch/hacker-style text animation effect on hover.

Installation

npm install glitched-text-react

Usage

import GlitchedText from "glitched-text-react";

function App() {
  return <GlitchedText text="Hello World" />;
}

Props

Prop	Type	Default	Description
text	string	required	The text to be displayed and animated
letters	string	"ABCDEFGHIJKLMNOPQRSTUVWXYZ"	Characters used for the glitch effect
numberOfIterations	number	4	Number of iterations per character
msPerIteration	number	30	Milliseconds between each iteration

Additionally, the component accepts all standard HTML heading (h1) attributes.

Examples

Basic Usage

<GlitchedText text="Hello World" />

Custom Characters

<GlitchedText text="12345" letters="0123456789" />

Slower Animation

<GlitchedText text="Slow Motion" msPerIteration={100} numberOfIterations={2} />

With Additional Styling

<GlitchedText text="Styled Text" style={{ color: "red", fontSize: "2em" }} />

How It Works

The component creates a glitch effect when the user hovers over the text. Each character is randomly replaced with characters from the letters prop until it eventually reveals the actual character. The effect happens sequentially from left to right.

License

ISC

Author

Felipe Garzon Melguizo

Repository

GitHub Repository

Issues

If you find any bugs or have feature requests, please file an issue at the GitHub issues page.