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.

License

uncomplexity/powerglitch

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages