Components

Text Glitch

Glitch effect for text elements.

Text Glitch

The TextGlitch component creates a glitch effect for text elements. It's perfect for creating eye-catching headings and animated text effects with a digital distortion style.

Usage

TEAL

<template>
  <MTextGlitch text="GLITCH" />
</template>

Props

text

string required

Text to glitch.

trigger

'hover' | 'auto' | 'inView' | 'manual'

How to trigger the glitch effect.

intensity

'low' | 'medium' | 'high' | 'extreme' | number

Intensity of the glitch effect.

duration

number

Duration of glitch effect in seconds.

interval

number

Interval between auto glitches in seconds.

speed

number

Animation speed in milliseconds.

colors

string[]

Colors for glitch layers.

showScanLines

boolean

Show scan lines effect.

class

string

CSS classes to apply to the container.

autoStart

boolean

Automatically start glitch effect.

Examples

Basic Text Glitch

Glitch Effect

Add cyberpunk-style glitch effects to your text for a futuristic aesthetic

CYBERPUNK

High Energy

Dynamic visual effects

Futuristic

Modern design aesthetic

Attention Grabbing

Stand out from the crowd

<template>
  <MTextGlitch text="CYBER" />
</template>

Auto Trigger

AUTO

<template>
  <MTextGlitch text="AUTO" trigger="auto" />
</template>

Extreme Intensity

EXTREME

<template>
  <MTextGlitch text="EXTREME" intensity="extreme" :speed="200" />
</template>

Manual Control

MANUAL

<template>
  <div class="space-y-4">
    <div class="flex space-x-2">
      <UButton @click="glitchRef?.glitch()">Glitch</UButton>
      <UButton @click="glitchRef?.stop()">Stop</UButton>
    </div>
    <MTextGlitch 
      ref="glitchRef"
      text="MANUAL CONTROL" 
      trigger="manual"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const glitchRef = ref()
</script>

Stars Background

Animated starfield background with customizable density and twinkling effects.

Text Glitch New

Text with a glitch effect that creates a digital distortion appearance.