Create Text Glitch Effect In Vue – vue-glitched

Install & Download:

# NPM
$ npm i @lewardo/vue-glitched

Description:

A Vue 3 component that adds a unique glitch effect to the text. It can be used to enhance the visual appeal of headlines, titles, or quotes and capture the attention of your audience.

How to use it:

1. Import and register the vue-glitched component.

// Global
import { createApp } from 'vue'
import { Glitch } from 'vue-glitched'
createApp({}).component('Glitch', Glitch);

// Local
import { Glitch } from 'vue-glitched'
export default {
  components: {
    Glitch
  }
}

2. Wrap your text in the Glitch component.

<Glitch id="glitchy">
  Text Here
</Glitch>

3. Override the default styles of the glitch effect.

:root {
  --glitch-global-bg: #1d2021;
  --glitch-global-fg: #ebdbb2;
  --glitch-global-fga: #076678;
  --glitch-global-fgb: #cc241d;
}

4. Available component props.

id: {
  type: String,
  required: true,
},
sync: {
  type: String,
  default: '',
},
text: {
  type: String,
  defualt: '',
},
defer: {
  type: Boolean,
},
bg: {
  type: String,
  default: 'var(--glitch-global-bg, #fff)',
},
fg: {
  type: String,
  default: 'var(--glitch-global-fg, #000)',
},
fga: {
  type: String,
  default: '',
},
fgb: {
  type: String,
  default: '',
},
intense: {
  type: Boolean,
},
subtle: {
  type: Boolean,
},
simple: {
  type: Boolean,
},
complex: {
  type: Boolean,
},

Preview: