Glitch Text Effect

A lightweight, customizable glitch text effect library with zero dependencies. Framework-agnostic core with React wrapper.


✨ Features

- 🪶 Lightweight: < 3KB gzipped, zero dependencies
- 🎯 Framework Agnostic: Works with React, Vue, Svelte, or vanilla JS
- 🔧 Highly Customizable: Multiple trigger types, intensity levels, and effects
- 📱 Accessible: Respects prefers-reduced-motion
- 🎨 Multiple Triggers: Hover, click, intersection observer, or manual control
- ⚡ Performance First: RAF-based animations, no DOM thrashing
- 🏗️ Tree Shakeable: Import only what you need
- 📦 TypeScript: Full type definitions included

🚀 Installation

``bash
npm install glitch-text-effect
`

📖 Quick Start

$3

`jsx
import { GlitchText } from 'glitch-text-effect/react';

function App() {
return (
from="Hello World"
to="Glitch Effect!"
trigger="hover"
className="text-2xl font-bold"
/>
);
}
`

$3

`js
import { glitch } from 'glitch-text-effect';

const element = document.querySelector('#my-text');
glitch(element, {
from: 'Hello World',
to: 'Glitch Effect!',
duration: 1000,
trigger: 'hover'
});
`

🎛️ Configuration Options

$3

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| from | string | required | Source text to transform from |
| to | string | required | Target text to transform to |
| duration | number | 1200 | Animation duration in milliseconds |
| trigger | 'hover' \| 'click' \| 'intersection' \| 'manual' | 'hover' | How the animation is triggered |
| intensity | 'low' \| 'medium' \| 'high' | 'medium' | Intensity of the glitch effect |

$3

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| characters | CharacterSet \| string | 'letters' | Character sets for randomization |
| timing | TimingFunction | 'easeOut' | Animation timing function |
| revealRate | number | 0.5 | Rate at which characters are revealed (0-1) |
| glitchRate | number | 0.6 | Frequency of character randomization (0-1) |
| effects | VisualEffects | {} | Visual effects to apply |
| respectReducedMotion | boolean | true | Respect user's motion preferences |

🎨 Character Sets

- letters - A-Z, a-z
- numbers - 0-9
- symbols - Special characters (!@#$%^&*)
- alphanumeric - Letters + numbers
- all - Everything combined
- Custom string - Use your own characters

⚡ Trigger Types

$3

`jsx
from="Effects"
to="Awesome!"
effects={{
shake: true, // Subtle trembling
flicker: true, // Opacity variation
colorShift: true, // Color cycling (default colors)
scalePulse: true // Size pulsing
}}
/>
`

$3

Customize the colors and animation speed for color shifting:

`jsx
from="Custom Colors"
to="Rainbow!"
effects={{
colorShift: {
enabled: true,
colors: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57'],
speed: 2 // Animation speed multiplier
}
}}
/>
`

#### ColorShift Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| enabled | boolean | true | Enable color shifting |
| colors | string[] | ['#ff0080', '#00ff80', '#8000ff', '#ff8000', '#0080ff', '#ffffff'] | Array of hex colors to cycle through |
| speed | number | 1 | Animation speed multiplier (higher = faster) |

🏗️ Vanilla JavaScript API

$3

// With callbacks
glitch(element, {
from: 'Hello',
to: 'World',
onStart: () => console.log('Started'),
onComplete: () => console.log('Done')
});
`

$3

// Control manually
instance.start();
instance.stop();
instance.reset();
instance.destroy();
`

📦 Bundle Optimization

Import only what you need:

`js
// React only
import { GlitchText } from 'glitch-text-effect/react';

// Vanilla JS only
import { glitch } from 'glitch-text-effect/core';

// Everything
import { GlitchText, glitch } from 'glitch-text-effect';
`

🎯 TypeScript

Full TypeScript support with comprehensive type definitions:

`tsx
import type { GlitchConfig, IntensityLevel } from 'glitch-text-effect';

const config: GlitchConfig = {
from: 'Typed',
to: 'Safe!',
intensity: 'high' as IntensityLevel,
effects: {
shake: true,
colorShift: true
}
};
`

🔧 Development

`bash


Install dependencies

📄 License

MIT © Jose Maria Molina

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📚 Examples

Check out the examples directory for more usage patterns and integrations.

---

Made by Jose Maria Molina