https://github.com/thetarnav/vue-glitched-writer
Glitched Writer Component for Vue 3.
https://github.com/thetarnav/vue-glitched-writer
animation glitch html text vue vue-component web writer
Last synced: over 1 year ago
JSON representation
Glitched Writer Component for Vue 3.
- Host: GitHub
- URL: https://github.com/thetarnav/vue-glitched-writer
- Owner: thetarnav
- License: mit
- Created: 2021-04-03T15:39:03.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2022-04-30T20:11:28.000Z (about 4 years ago)
- Last Synced: 2025-03-17T23:41:27.361Z (over 1 year ago)
- Topics: animation, glitch, html, text, vue, vue-component, web, writer
- Language: SCSS
- Homepage: https://glitched-writer.site
- Size: 2.47 MB
- Stars: 19
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Glitched Writer Vue Component
[](https://www.npmjs.com/package/vue-glitched-writer) [](https://www.npmjs.com/package/vue-glitched-writer) [](https://www.npmjs.com/package/vue-glitched-writer)
[](https://glitched-writer.site)
### What is [Glitched Writer](https://glitched-writer.site):
> **A lightweight npm module for writing text to HTML elements. Highly customizable settings. Decoding, decrypting, scrambling, and simply spelling out text.**
### Vue component
> This is a **Vue.js Single File Component**, serving as a wrapper for [**Glitched Writer**](https://www.npmjs.com/package/glitched-writer) to simplify it's usage in Vue.
---
### >>> [PLAYGROUND](https://glitched-writer.site) <<< | >>> [EXAMPLES](https://codepen.io/collection/XWVEEa) <<< | >>> [VUE DEMO](https://codepen.io/thetarnav/pen/ExWgYer) <<< | >>> [JS Module](https://www.npmjs.com/package/glitched-writer) <<<
---
## Installation
Download and install with npm. For **Vue 3**:
```bash
npm i vue-glitched-writer
```
**Vue 2**:
```bash
npm i vue-glitched-writer@1.0.8
```
Import inside the script tag.
```js
import GlitchedWriter from 'vue-glitched-writer'
```
Or use [Skypack](https://www.skypack.dev/view/vue-glitched-writer) to import without installing the package.
```js
import GlitchedWriter from 'https://cdn.skypack.dev/vue-glitched-writer'
```
## Usage:
### Declare component
```html
export default {
components: {
GlitchedWriter,
},
}
```
### Animate text instantly after load
Will animate blank -> passed text property
```html
```
### Write text dynamically
Animate each time the txt prop changes.
_Previous text -> new text_
```html
```
### Queue Writing
If you want to write texts for prepared array, then you can pass that array to as `text` and glitched writer will turn it into a working queue.
```js
data() {
return {
phrases: [
'Hello and Welcome',
'What is this?!',
'It appears i\'m in some queue...',
]
}
}
```
```html
```
### Using Presets
[List of available presets](https://github.com/thetarnav/glitched-writer#presets).
```html
```
### Custom Options
See [Glitched Writer's Option List](https://github.com/thetarnav/glitched-writer#customizing-behavior).
#### **Passing options object to component.**
```js
{
data() {
return {
text: 'Your Text',
options: {
html: true,
letterize: true,
steps: [0, 10],
delay: [500, 2000],
glyphs: 'QWERTYUIOPASDFGHJKLZXCVBNM!@#$%^&*()1234567890'
},
}
},
}
```
```html
```
#### **Changing options later**
When changing options object (passed to the component), you need to remember to reassign the object property, instead of modifying it.
```js
{
methods: {
changeOptions(){
// RIGHT
this.options = {
steps: [2, 15],
html: false,
...this.options
}
// WRONG: this.options.steps = [2, 15]
}
}
}
```
### Pausing the animation
The "pause" boolean property is responsible for programatic pausing.
Simply set "pause" property to true if you want the animation to stop.
```js
data() {
return {
pause: true
}
}
```
```html
```
### Component Events
Glitched Writer emits 3 events:
- **start** - when writer starts writing
- **step** - on every step of writing process
- **finish** - when writer finishes writing
```html
```
```ts
{
methods: {
callback(text, data){
console.log(text, data.options)
}
}
}
// WriterDataResponse: {
// string: string
// writer: GlitchedWriter
// options: Options
// state: State
// status?: 'ERROR' | 'SUCCESS'
// message?: string
// error?: any
// }
```
### Accessing GlitchedWriter Instance
If you want to do something custom with the component, you can use GlitchedWriter class instance attached to the html element.
```html
```
```js
mounted(){
console.log(this.$refs.el.$writer)
}
```
## More Information
> If you are curious about further customization of animation effect and behavior, then please visit the original [Glitched Writer Readme](https://github.com/thetarnav/glitched-writer#table-of-contents). There you'll find description of every option and some use cases.