Components
Text Glitch New
Text with a glitch effect that creates a digital distortion appearance.
Text Glitch New
The TextGlitchNew component creates text with a glitch effect that creates a digital distortion appearance. It features customizable speed, shadow effects, and hover activation options for dynamic text animations.
Usage
GLITCH
<template>
<div class="flex justify-center p-8 bg-gray-900 rounded-lg">
<MTextGlitchNew text="GLITCH" :speed="0.8" />
</div>
</template>
Props
text
string required
Text to apply the glitch effect to.
speed
number
Speed of the glitch animation.
enableShadows
boolean
Enable colored shadow effects.
enableOnHover
boolean
Activate glitch effect only on hover.
class
string
CSS classes to apply to the text.
Examples
Basic Text Glitch
NEW GLITCH
<template>
<div class="flex justify-center p-8 bg-gray-900 rounded-lg">
<MTextGlitchNew text="NEW GLITCH" />
</div>
</template>
Hover Activation
HOVER GLITCH
<template>
<div class="flex justify-center p-8 bg-gray-900 rounded-lg">
<MTextGlitchNew text="HOVER GLITCH" :enable-on-hover="true" :speed="1.2" />
</div>
</template>