/powerglitch

Tiny JS library to glitch anything on the web

Primary LanguageTypeScriptMIT LicenseMIT

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

Integrations

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.