https://github.com/wavebeem/ui-glitch
a JS library for making little UI glitches
https://github.com/wavebeem/ui-glitch
Last synced: 10 months ago
JSON representation
a JS library for making little UI glitches
- Host: GitHub
- URL: https://github.com/wavebeem/ui-glitch
- Owner: wavebeem
- License: mit
- Created: 2020-02-17T19:36:46.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-05T02:10:09.000Z (about 6 years ago)
- Last Synced: 2025-09-01T05:46:58.664Z (10 months ago)
- Language: JavaScript
- Size: 14.6 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# ui-glitch
`ui-glitch` lets you make glitches in your web UI.
## Installation
**npm**
```
npm install ui-glitch
```
**script tag**
Download [dist/ui-glitch.umd.js](https://unpkg.com/ui-glitch/dist/ui-glitch.umd.js) and load via a `` tag or download [src/ui-glitch.esm.js](https://github.com/wavebeem/ui-glitch/blob/master/src/ui-glitch.esm.js) and load via ES Modules `import`.
## Usage
```js
// --- load via npm and webpack ---
import * as UIGlitch from "ui-glitch";
// --- or load via ES Modules ---
import * as UIGlitch from "./ui-glitch.esm.js";
// --- or available as the global variable `UIGlitch` ---
// <script src="ui-glitch.umd.js">
// --- example function call ---
UIGlitch.blurScreen();
```
## Reference
### UIGlitch.addDustSpeck()
Adds a virtual "dust speck" to the screen. For best effect, call a few times. Dust specks are roughly 1px large.
### UIGlitch.blurScreen()
Very slightly blurs the entire screen. On a retina display, this looks like the browser's DPI scaling has been incorrectly configured, which is especially sinister.
### UIGlitch.skewScreen()
Skews the entire screen horizontally a little bit. This means as you scroll, things get more and more misaligned.
### UIGlitch.saturateScreen()
Oversaturates all the colors a little bit. Looks like you're on a poorly calibrated TV.
### UIGlitch.squishScreen()
Makes the entire screen just a little bit shorter. It all gets squished down a bit. Subtle, but horrible looking.