glitched-text-react/README.md

Glitched/hacker text for react highly customizable

# Glitched Text React

![Demo](https://raw.githubusercontent.com/Flying-Spaghetti-Monster69/Glitched-Text/45efbe39ab936de11e77a8420adc66b488af08f2/assets/demo-glitched-text.gif)

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

## Installation

```bash
npm install glitched-text-react
```

## Usage

```jsx
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

```jsx
<GlitchedText text="Hello World" />
```

### Custom Characters

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

### Slower Animation

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

### With Additional Styling

```jsx
<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](https://github.com/Flying-Spaghetti-Monster69/Glitched-Text)

## Issues

If you find any bugs or have feature requests, please file an issue at the [GitHub issues page](https://github.com/Flying-Spaghetti-Monster69/Glitched-Text/issues).