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