Text that glitches under the cursor
| 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. |
textstringText to display. Use ' | ' to split text into multiple lines.
"Glitch Text"classNamestringAdditional CSS classes for the container.
""colorsstring[]Array of hex color strings for the glitch effect layers.
["#00ffff", "#ff00ff", "#ffff00"]textColorstringMain text color displayed on top. Defaults to black in light mode, white in dark mode.
undefinedfontSizenumberFont size in pixels.
80fontWeightstringFont weight (normal, bold, etc.).
"600"radiusnumberInteraction radius in pixels. Characters within this distance from the cursor will react.
250letterSpacingnumberAdditional spacing between characters in pixels.
-1lineHeightnumberLine height multiplier for multi-line text.
1.5textAlign"left" | "center" | "right"Horizontal text alignment.
"center"fadeInbooleanEnable fade-in animation for letters on load.
falseautoFitbooleanAutomatically scale font size to fit the container width.
true