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:

Getting started

Install → Glitch → Customize → Controls / TypeScript

Install

Install vue-powerglitch using a package manager

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

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.

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>

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>