# Glitch Text

> Glitching text with four styles — sliced bands, a jittering color split, a scanning tear or swapped glyphs — plus intensity, skew, flicker and click bursts.

Text that glitches. Pick one of four styles: sliced bands that shift sideways, a jittering RGB color split, a displaced band that scans down through the letters, or letters that briefly swap for glyphs. Set how hard it glitches, add a skew jolt and opacity flicker, and choose whether it runs all the time, while hovered, or in a short burst on each click. Pick a preset or tune it in the panel.

<demo-glitch-text>



</demo-glitch-text>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/glitch-text.json"
```

## Usage

```vue
<script setup lang="ts">
  import GlitchText from '~/components/ui/glitch-text/GlitchText.vue';
</script>

<template>
  <GlitchText
    text="Click Me"
    mode="noise"
    trigger="click"
    :intensity="0.3"
    :burst-duration="0.9"
    :offset="14"
    :skew="10"
    flicker
    :shadow-colors="['#ff4d2e', '#ff4d2e']"
  />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        text
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      The text that glitches
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mode
      </code>
    </td>
    
    <td>
      <code>
        'slices' | 'rgb' | 'scan' | 'noise'
      </code>
    </td>
    
    <td>
      <code>
        'slices'
      </code>
    </td>
    
    <td>
      Style of glitch. Slices shifts bands sideways, rgb splits into jittering color channels, scan sweeps a displaced band down, noise swaps letters for glyphs
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        trigger
      </code>
    </td>
    
    <td>
      <code>
        'always' | 'hover' | 'click'
      </code>
    </td>
    
    <td>
      <code>
        'always'
      </code>
    </td>
    
    <td>
      When it glitches: all the time, while hovered, or in a short burst on each click
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      Multiplier for the animation speed. Higher values slow the glitch down
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How often and how far it glitches, from <code>
        0
      </code>
      
       (calm) to <code>
        1
      </code>
      
       (constant, wide jolts)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        burst-duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      Length of the burst played on each click with the click trigger, in seconds
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flicker
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Adds quick, subtle dips in opacity while it glitches
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        offset
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        10
      </code>
    </td>
    
    <td>
      How far the glitched slices shift sideways, in px. The colored shadows grow with it
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        skew
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      How far the text shears sideways during a jolt, in degrees
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        enable-shadows
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Toggle the glitch colors. Without them every mode stays in the text color
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        shadow-colors
      </code>
    </td>
    
    <td>
      <code>
        [string, string]
      </code>
    </td>
    
    <td>
      <code>
        ['#ff0000', '#00ffff']
      </code>
    </td>
    
    <td>
      The two glitch colors: the shadows on the shifted slices, the split channels and the swapped glyphs
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Color of the text. Follows the surrounding text color when unset
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-size
      </code>
    </td>
    
    <td>
      <code>
        number | string
      </code>
    </td>
    
    <td>
      <code>
        clamp(2rem, 10vw, 8rem)
      </code>
    </td>
    
    <td>
      Font size of the text. Numbers are in px
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-weight
      </code>
    </td>
    
    <td>
      <code>
        number | string
      </code>
    </td>
    
    <td>
      <code>
        900
      </code>
    </td>
    
    <td>
      Font weight of the text
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        enable-on-hover
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Same as <code>
        trigger="hover"
      </code>
      
      : the glitch only runs while hovered
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Classes merged onto the root
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The glitch copies are `aria-hidden`. In noise mode the swapping letters are hidden too and a visually hidden copy carries the real text.
- When the user prefers reduced motion, the glitch never runs and the text stays still.
- The animation loop stops while off screen and whenever the trigger is idle.
- Ported from [React Bits](https://reactbits.dev/text-animations/glitch-text) by David Haz.