7PH / powerglitch

Tiny JS library to glitch anything on the web

PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to glitch anything on the web, without using a canvas. It weights less than 2kb minified and gzipped.

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 importing the web bundle in a script tag (or save it locally)

   <script src="https://unpkg.com/powerglitch@latest/dist/powerglitch.min.js"></script>

2. Find an element to glitch

   <!-- Image -->
   <img src='https://.../image.png' class='glitch' />
   
   <!-- Button -->
   <button class='glitch'>
       click me 🤷‍♂️
   </button>
   
   <!-- Any DOM element -->
   <div class='glitch'>
       <p>Hello <b>World</b></p>
   </div>

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 element

   PowerGlitch.glitch('.glitch')

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

6. Check-out the usage guide for optimization and usage tips.

Useful links

Documentation

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

Integrations

• React: react-powerglitch
• Vue: vue-powerglitch

Contributing

Having trouble? Found a bug? Want to contribute? Any kind of contribution is welcome. If you have any questions, please open an issue or create a pull request.