powerglitch

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

• 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>
  

• 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>
  

• 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.

• Glitch the element

  PowerGlitch.glitch('.glitch')
  

• That's it, your element is glitched!

• 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.