Glitch Text
Interactive canvas-based text with sticky glitch effect that responds to cursor movement
glitch-text-tw
Customize
80
250
-3
1.5
Props
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | "Glitch Text" | Text to display. Use ' | ' to split text into multiple lines. |
| className | string | "" | Additional CSS classes for the container. |
| colors | string[] | ["#00ffff", "#ff00ff", "#ffff00"] | Array of hex color strings for the glitch effect layers. |
| textColor | string | undefined | Main text color displayed on top. Defaults to black in light mode, white in dark mode. |
| fontSize | number | 80 | Font size in pixels. |
| fontWeight | string | "600" | Font weight (normal, bold, etc.). |
| radius | number | 250 | Interaction radius in pixels. Characters within this distance from the cursor will react. |
| letterSpacing | number | -1 | Additional spacing between characters in pixels. |
| lineHeight | number | 1.5 | Line height multiplier for multi-line text. |
| textAlign | "left" | "center" | "right" | "center" | Horizontal text alignment. |
| fadeIn | boolean | false | Enable fade-in animation for letters on load. |
| autoFit | boolean | true | Automatically scale font size to fit the container width. |