🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A vue.js component which lets you create an awesome glitch effect on any text.

Animation

Documentation

Vue text glitch

Vue text glitch component.

Demo

Check out the demo

Getting started

Pull in the package:

yarn add vue-text-glitch

Import the component:

import VueTextGlitch from 'vue-text-glitch' export default {     components: {         VueTextGlitch     } }

Use in your template:

<TextGlitch         text="Vue Text Glitch!" ></TextGlitch>

Features

  • Animation is generated using Javascript
  • Multiple different glitches on the same page
  • Plug and play

Props

text (default Vue Text Glitch)

The text that should be glitched.

steps (default 20)

Number of keyframes in the animation. 20 means there's a keyframe every 100/20 = 5%.

height (default 2)

The animation speed.

id (default text-glitch)

This is a prefix for the animation and styles, so you can use multiple different glitches on the same page.

speed (default false)

Whether or not to apply the error class

fill (default #2c3e50)

The fill color.

background (default #fff)

The background color.

highlight1 (default red)

First highlight color.

highlight2 (default blue)

Second highlight color.

Credit


You May Also Like