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:

Text Scramble Effect In Vue - Glitched Writer

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

Add Comment