Glitched Writer Vue Component

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

This is a Vue.js component, working as a simple wrapper for Glitched Writer to simplify it's usage in Vue.

Glitched-Writer-Vue-Component

View Demo View Github

Installation

Download and install with npm.

npm i vue-glitched-writer
Bash
import GlitchedWriter from 'vue-glitched-writer'
Js

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

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

Usage:

Declare component

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

Animate text on page load

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

Write text dynamically

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

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'
         },
      }
   },
}
Js
<glitched-writer :text="text" :options="options" />
HTML

Component Events

Glitched Writer emits event on every step and writing finish.

<glitched-writer :text="text" @step="method" @finish="method" />
HTML
{
   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
// }
Ts

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'
Ts

GitHub

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