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 component, working as a simple 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

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 on page load

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

Write text dynamically

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

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

Passing Options

Right now options will be used only when creating component. So further changes to options won't have an effect.

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

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

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
// }

Available Imports

import GlitchedWriter, { // <-- Vue component
    GlitchedWriter, // <-- GlitchedWriter class
    ConstructorOptions, // <-- Options type
    Callback, // <-- Callback type
    WriterDataResponse, // <-- Type of response in callbacks
    glitchWrite, // <-- One time write funcion
    presets, // <-- Object with all prepared presets of options
    glyphs, // <-- Same but for glyph charsets
    wait, // <-- Ulitity async function, that can be used to wait some time
} from 'vue-glitched-writer'

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.