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