vue-glitched

Simple Vue 3 text glitching component

A simple to use, customisable vue component to add a glitch effect to text, built with vite^[1]

# install latest component version to project directory
npm install vue-glitched
# if using the github npm registry
npm install @lewardo/vue-glitched

// global-scope registration
import { createApp } from 'vue'
import { Glitch } from 'vue-glitched'

createApp({}).component('Glitch', Glitch);  

<!-- component-scope registration -->
<script>
import { Glitch } from 'vue-glitched'

export default {
  components: {
    Glitch
  }
}
</script>

<!-- component usage -->
<Glitch id="glitchy">
    simple text glitching vue component (requires unique id)
</Glitch>
<Glitch id="intense" intense>
    you can change intensity with the `intense` and `subtle` attributes
</Glitch>
<Glitch id="complex" complex>
    or the number of steps in animation with `simple` and `complex` attributes
</Glitch>
<Glitch id="colourful" bg="#1d2021" fg="#ebdbb2">
    you can customise the text and background colours with `bg` and `fg`
</Glitch>
<Glitch id="psychadelic" fga="red" fgb="blue">
    and the glitching colours with `fga` and `fgb`
</Glitch>
<Glitch id="different" text="glitching overlay text">
    even set the text that glitches on top (reactive innerText by default)
</Glitch>
<Glitch id="synced" sync="glitchy">
    or synchronise glitching effect with another element (by id)
</Glitch>
<Glitch id="stopped" defer>
    and even not start the effect by default 
        (use exposed `glitch` and `noglitch` methods to control effect)
</Glitch>

/* set defaults for glitching colours */
:root {
    --glitch-global-bg: #1d2021;
    --glitch-global-fg: #ebdbb2;

    --glitch-global-fga: #076678;
    --glitch-global-fgb: #cc241d;
}

// required attributes for component to function
const required_attrs = [ 'id' ]

// default values for props
const prop_defaults = {
    fg:  `var(--glitch-global-fg,  #000)`,
    bg:  `var(--glitch-global-bg,  #fff)`,
    fga: `var(--glitch-global-fga, ${fg})`,
    fgb: `var(--glitch-global-fgb, ${fg})`,
    text: {{ slot.$innerText }},
    sync: ''
}

// prop switches to customise behaviour
const prop_options = [
    simple,
    complex,
    intense,
    subtle,
    defer
]

# start vite development server
npm run dev
# expose development server to local network
npm run dev-lan
# build component library
npm run build
# build demo site to docs directory
npm run docs

acknowledgements

based on the effect described in this article with some improvements, inspired by the legacy vue-glitch, and hoping to be to vue what mgGlitch was to jquery

license