Glitch Text

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

glitch-text-tw

Customize

Tweak the props live

Text & Colors

Text

Text Color

#000000

Color 1

#00ffff

Color 2

#ff00ff

Color 3

#0008ff

Typography

Font Size80

Letter Spacing-3

Line Height1.5

Text Align

Interaction & Options

Interaction Radius250

Auto Fit

Fade 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.

Default:undefined

fontSizenumber

Font size in pixels.

Default:80

fontWeightstring

Font weight (normal, bold, etc.).

Default:"600"

radiusnumber

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

Default:250

letterSpacingnumber

Additional spacing between characters in pixels.

Default:-1

lineHeightnumber

Line height multiplier for multi-line text.

Default:1.5

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

Horizontal text alignment.

Default:"center"

fadeInboolean

Enable fade-in animation for letters on load.

Default:false

autoFitboolean

Automatically scale font size to fit the container width.

Default:true