Glitch Text

Interactive canvas-based text with sticky glitch effect that responds to cursor movement

glitch-text-tw

Customize

Text

Text Color

Color 1

Color 2

Color 3

Font Size

Letter Spacing

-3

Line Height

1.5

Interaction Radius

250

Auto FitFade In

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.

textstring

Text to display. Use ' | ' to split text into multiple lines.

Default"Glitch Text"

classNamestring

Additional CSS classes for the container.

Default""

colorsstring[]

Array of hex color strings for the glitch effect layers.

Default["#00ffff", "#ff00ff", "#ffff00"]

textColorstring

Main text color displayed on top. Defaults to black in light mode, white in dark mode.

Defaultundefined

fontSizenumber

Font size in pixels.

Default80

fontWeightstring

Font weight (normal, bold, etc.).

Default"600"

radiusnumber

Interaction radius in pixels. Characters within this distance from the cursor will react.

Default250

letterSpacingnumber

Additional spacing between characters in pixels.

Default-1

lineHeightnumber

Line height multiplier for multi-line text.

Default1.5

textAlign"left" | "center" | "right"

Horizontal text alignment.

Default"center"

fadeInboolean

Enable fade-in animation for letters on load.

Defaultfalse

autoFitboolean

Automatically scale font size to fit the container width.

Defaulttrue