Apply a glitch effect with the Vue Glitch component

vue-glitch

Styling preferences can be very different and with Vue it can be really easy to give a unique look to your elements. Vue Glitch comes in to serve as a component for Vue.js which can be used to apply a glitch effect in any kind of text.

You can see it live here.

Example

To start working with vue-glitch use the following command to install it.

$ yarn add vue-glitch

Import in your project

import Glitch from 'vue-glitch'

Vue.component('glitch', Glitch)

Component Usage:

<glitch text="Glitched"></glitch>

<glitch 
    text="Text appeared to be stuck" color="DeepPink"
    >
</glitch>

<glitch text="Text that looks spooky with custom background" color="Orange" 
    background="steelblue"
    >
</glitch>

To apply custom styles you can use .glitch and .glitch-wrapper classes.

.glitch {
  margin-bottom: 20px;
  padding: 20px;
}

.glitch-wrapper {
  font-size: 40px;
  font-family: sans-serif;
}

If you would like to explore more about Vue Glitch, head to the project's repository on GitHub, where you will also find the source code. Created & submitted by @ianaya89.