vue-glitch

👻 Vue.js component to apply glitch effect in any kind of text

Install

$ npm i -S vue-glitch
 
# or 
 
$ yarn add vue-glitch

Global Registration

// main.js
 
import Vue from 'vue';
import Glitch from 'vue-glitch';
 
Vue.component('glitch', Glitch);

Local Registration

<script>
  // Component.vue
  import Glitch from 'vue-glitch';
 
  export default {
    name: 'Component',
 
    components: { Glitch }
  };
</script> 

Component Usage

<template>
  <main>
    <glitch text="I am glitched"></glitch>
    <glitch text="I am glitched with custom color", color="tomato"></glitch>
    <glitch text="I am glitched with custom background", background="steelblue"></glitch>
  </main>
</template>

Component Properties

name	required	default
text	true
color	false	#fff
background	false	#000

Component Styling

To apply custom styles you should care about .glitch and .glitch-wrapper classes.

.glitch {
  margin-bottom: 20px;
  padding: 20px;
  font-size: 40px;
}
 
.glitch-wrapper {
  font-family: sans-serif;
}

Development Setup

# install dependencies 
$ npm i
 
# dev mode 
$ npm run dev
 
# test 
$ npm run test
 
# build 
$ npm run build

---

This project was generated with generator-vue-component

⌨️ with ❤️ by @ianaya89