Text Scramble Effect In Vue – Glitched Writer

Install & Download:

# Vue 2
$ npm i vue-glitched-writer --save
# Vue 3
$ npm i vue-glitched-writer@next --save

Description:

A Vue.js wrapper around the Glitched Writer that applies a stylish scramble/decode effect to your text.

How to use it:

1. Import the Glitched Writer.

import GlitchedWriter from 'vue-glitched-writer'

2. Register the component.

export default {
  components: {
    GlitchedWriter,
  },
}

3. Add the glitched-writer component to the template and specify the text to animate on page load.

<glitched-writer text="Any Text Here" appear />

// or
<glitched-writer :text="text" />
export default {
  components: {
    GlitchedWriter,
  },
  data() {
    return {
     text: 'Your Text',
     options: {
      // options here
     },
    }
 },
}

4. It also comes with 5 presets:

• DEFAULT
• NIER
• TYPEWRITER
• TERMINAL
• ZALGO
• NEO
• ENCRYPTED
• BITBYBIT

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

5. Events.

• @start: start writing
• @step: on every step of writing process
• @finish: finish writing

Preview:

Changelog:

v1.3.0 (12/15/2021)

• changed building solution

v1.2.2 (08/03/2021)

• bugfix

v1.0.8 (05/20/2021)

• gw update & queue writing