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="Glitched"></glitch>
    <glitch text="Glitched with custom color", color="tomato"></glitch>
    <glitch text="Glitched with custom background", background="steelblue"></glitch>
  </main>
</template>

Component Properties

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

License

MIT License

Style

This project was generated with generator-vue-component and was inspired by this Codepen by @anatravas

⌨️ with ❤️ by @ianaya89