Glitched Writer Vue Component

What is Glitched Writer:

A lightweight, glitched, text writing module. Highly customizable settings. Decoding, decrypting, scrambling, and simply spelling out text.

Vue component

This is a Vue.js Single File Component, serving as a wrapper for Glitched Writer to simplify it's usage in Vue.

>>> CODEPEN DEMOS <<< | >>> NPM <<< | >>> JS Version <<<

Installation

Download and install with npm.

npm i vue-glitched-writer

For Vue 3:

npm i vue-glitched-writer@next

Import inside the script tag.

import GlitchedWriter from 'vue-glitched-writer'

Or use Skypack to import without need to install the package.

import GlitchedWriter from 'https://cdn.skypack.dev/vue-glitched-writer'

Usage:

Declare component

<script>
    export default {
        components: {
            GlitchedWriter,
        },
    }
</script>

Animate text instantly after load

Will animate blank -> passed text property

<glitched-writer text="Your Content" appear />

Write text dynamically

Previous text -> new text

<glitched-writer :text="text" />

{
   data() {
      return {
         text: 'Your dynamic text.'
      }
   },
   mounted() {
      setTimeout(() => {
         this.text = 'Something new!'
         // Glitched Writer will animate this text change
      }, 3000)
   }
}

Using Presets

List of available presets.

<glitched-writer text="Your Text" preset="zalgo" />

<!-- Passing options prop will extend the preset -->
<glitched-writer text="Your Text" preset="zalgo" :options="{ html: true }" />

Custom Options

See Glitched Writer's Option List.

Passing options object to component.

{
   data() {
      return {
         text: 'Your Text',
         options: {
            html: true,
            letterize: true,
            steps: [0, 10],
            initialDelay: [500, 2000],
            glyphs: 'QWERTYUIOPASDFGHJKLZXCVBNM!@#$%^&*()1234567890'
         },
      }
   },
}

<glitched-writer :text="text" :options="options" />

Changing options later

When changing options object (passed to the component), you need to remember to reassign the object property, instead of modifying it.

{
   methods: {
      changeOprions(){
         // RIGHT
         this.options = {
            steps: [2, 15],
            html: false
         }

         // WRONG: this.options.steps = [2, 15]
      }
   }
}

Pausing the animation

The "pause" boolean property is responsible for programatic pausing. Simply set "pause" property to true if you want the animation to stop.

{
   data() {
      return {
         pause: true
      }
   },
}

<glitched-writer :text="text" :pause="pause" />

Component Events

Glitched Writer emits event on every step and writing finish.

<glitched-writer :text="text" @step="method" @finish="method" />

{
   methods: {
      method(currentString: string, writerData: WriterDataResponse){
         console.log(currentString, writerData.options)
      }
   }
}

// WriterDataResponse: {
// 	string: string
// 	writer: GlitchedWriter
// 	options: Options
// 	state: State
// 	status?: 'ERROR' | 'SUCCESS'
// 	message?: string
// 	error?: any
// }

More Information

If you are curious about further customization of animation effect and behavior, then please visit the original Glitched Writer Readme. There you'll find description of every option and some use cases.