Vue PowerGlitch

This Vue library is a wrapper around PowerGlitch. PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to glitch anything on the web, without using a canvas. It weights less than 2kb minified and gzipped.

Useful links:

• Original project repository and documentation
• Code coverage report for vue-powerglitch
• API reference for vue-powerglitch

Getting started

Install → Glitch → Customize → Controls / TypeScript

Install

1. Install vue-powerglitch using a package manager

   npm i --save vue-powerglitch
   # or
   yarn add vue-powerglitch
   

2. Install the plugin to glitch elements in any component without worrying about imports (recommended).

   import PowerGlitchPlugin from 'vue-powerglitch'
   
   const app = createApp(app)
       .use(PowerGlitchPlugin)
       .mount('#app')
   

   alternatively, you can import the GlitchedElement component and/or vGlitch directive from vue-powerglitch anytime you want to use them.

   // e.g. src/client/component/NavBar.vue
   import { GlitchedElement } from 'vue-powerglitch'
   import { vGlitch } from 'vue-powerglitch'
   

Glitch

You have two ways to glitch elements.

1. You can use the GlitchedElement component:

   <GlitchedElement>
       <p>
           Power<b>Glitch</b> 🌎
       </p>
   </GlitchedElement>
   

   Specify whether it should behave as an inline-block with the inline prop:

   Hello <GlitchedElement :inline='true'>PowerGlitch 🌎</GlitchedElement>
   

2. You can use the v-glitch directive to glitch any HTMLElement:

   Hello <span v-glitch>PowerGlitch 🌎</span>
   

Using the v-glitch is simpler, but it has two drawbacks:

• It is not possible to combine v-if and v-glitch on the same HTMLElement
• You can not manually control the animation using the glitch controls methods

Customize

You can pass options to customize the glitch effect, using GlitchedElement:

<GlitchedElement
    :options="{
        //... (optional) customize the glitch effect here
    }"
>
    <div>
        PowerGlitch 🌎
    </div>
</GlitchedElement>

Or using v-glitch:

Hello <span v-glitch="{ ... }">PowerGlitch 🌎</span>

The options props accepts any value defined in the original PowerGlitch library.

Take a look at the playground to visually find out the best glitch options for your element.

GlitchedElement also accepts an inline prop (default: false) which lets you control whether you want the glitch container to act as an inline-block. This can be useful if you are trying to glitch an inline element, i.e. a single word in a sentence.

Hello <GlitchedElement :inline="true"><span>PowerGlitch 🌎</span></GlitchedElement>

Glitch controls

Retrieving the glitch controls is only possible when glitching using GlitchedElement, it is not possible to control the glitch animation when using the v-glitch directive.

The GlitchedElement component exposes two methods startGlitch and stopGlitch that let you control the glitch animation.

Here is an example using Vue 3 and Composition API

<script setup>
import { ref } from 'vue'

const glitched = ref(null)
</script>

<template>
    <button @click="glitched.startGlitch">Start</button>
    <button @click="glitched.stopGlitch">Stop</button>
    <GlitchedElement ref="glitched">
        <p>PowerGlitch 🌎</p>
    </GlitchedElement>
</template>

Using Vue 3 and Options API:

<template>
    <button @click="$refs.glitched.startGlitch">Start</button>
    <button @click="$refs.glitched.stopGlitch">Stop</button>
    <GlitchedElement ref="glitched">
        <p>PowerGlitch 🌎</p>
    </GlitchedElement>
</template>

TypeScript

If using TypeScript, you have access to an exported GlitchedElementRef representing a reference to the component.

<script setup>
import { ref, Ref } from 'vue'
import { GlitchedElementRef } from 'vue-powerglitch'

const glitched: Ref<GlitchedElementRef | undefined> = ref()
</script>

<template>
    <button @click="glitched?.startGlitch">Start</button>
    <button @click="glitched?.stopGlitch">Stop</button>
    <GlitchedElement ref="glitched">
        <p>PowerGlitch 🌎</p>
    </GlitchedElement>
</template>