PowerGlitch - Tiny JS library to glitch images on the web

PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to create a glitch effect on any image. No canvas or DOM manipulations are needed to create the glitch effect.

Want to try it out? Check out the demo ?

Like this project? Give a star ?

Getting started

  1. Install PowerGlitch using npm or yarn

    npm i --save powerglitch
    # or
    yarn add powerglitch
  2. Add a container for the image with fixed width and height

    <div id="glitched-image"></div>

    #glitched-image {
        width: 80px;
        height: 80px;
    }
  3. Import PowerGlitch using ES6 import

    import { PowerGlitch } from 'powerglitch'

    or using ES5 require

    const PowerGlitch = require('powerglitch').PowerGlitch
  4. Glitch the image

    PowerGlitch.glitch(
        '#glitched-image',
        { imageUrl: 'https://.../image.png' }
    )
  5. Customize the glitch effect

    PowerGlitch.glitch(
        '#glitched-image',
        {
            imageUrl: 'https://.../image.png',
            backgroundColor: 'transparent',
            timing: {
                duration: 2 * 1000,
                iterations: Infinity,
            },
            glitchTimeSpan: {
                start: 0.5,
                end: 0.7,
            },
            shake: {
                velocity: 20,
                amplitudeX: 0.4,
                amplitudeY: 0.4,
            },
            slice: {
                count: 10,
                velocity: 25,
                minHeight: 0.02,
                maxHeight: 0.15,
                hueRotate: true,
            },
        }
    )

Useful links

GitHub

View Github