PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to create a glitch effect on images. No canvas or DOM manipulations are needed. It weights around 1.8kb minified and gzipped and 4kb minified.

Want to try it out? Check out the demo 😊

Like this project? Give a star 🌟

Getting started

1. Install PowerGlitch using a package manager

   npm i --save powerglitch
   # or
   yarn add powerglitch
   

   or by saving the web bundle in dist/powerglitch.min.js and importing it using a script tag

   <script src="./path/to/your/powerglitch.min.js"></script>
   

2. Find an image to glitch

   <img src='https://.../image.png' class='glitch' />
   

3. Import PowerGlitch using ES6 import

   import { PowerGlitch } from 'powerglitch'
   

   or using ES5 require

   const PowerGlitch = require('powerglitch').PowerGlitch
   

   if you are importing PowerGlitch using a script tag, the PowerGlitch global variable is automatically available.

4. Glitch the image

   PowerGlitch.glitch('img.glitch')
   

5. That's it, your image is glitched!

6. For customization and optimization tips, check-out the usage guide.

Useful links

• Visually try out effects using the demo.
• Lookup PowerGlitch home page.
• For customization and optimization tips, check the usage guide.