Text Scramble Effect In Vue – Glitched Writer

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.2.2 (08/03/2021)

  • bugfix

v1.0.8 (05/20/2021)

  • gw update & queue writing

Download Details:

Author: thetarnav

Live Demo: https://glitched-writer.site/

Download Link: https://github.com/thetarnav/vue-glitched-writer/archive/refs/heads/main.zip

Official Website: https://github.com/thetarnav/vue-glitched-writer

Install & Download:

# Vue 2
$ npm i vue-glitched-writer --save

# Vue 3
$ npm i [email protected] --save

You Might Be Interested In:

Add Comment