Skip to main content
Create vibrant glitch effects with customizable speed and shadow colors.

​
Usage

<TextGlitch
  text="Glitch Effect"
  :speed="0.5"
  :enableShadows="true"
  :enableOnHover="false"
/>

​
Props

​
text
string
default:""
The text content to display with the glitch effect.
​
speed
number
default:"0.5"
Controls the animation speed of the glitch effect in seconds.
​
enableShadows
boolean
default:"true"
Toggles colored shadows that enhance the glitch look.
​
enableOnHover
boolean
default:"false"
If true, glitch animation activates only on hover.
​
class
string
default:"undefined"
Additional CSS classes for the container div.

​
Credits

Inspired and developed using resources from the following YouTube videos:

Build docs developers (and LLMs) love

Get started for freeTalk to us