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

• Visually try out effects using the demo.
• Lookup PowerGlitch home page.
• For detailed usage, check the API Reference.

GitHub

View Github