https://github.com/wavebeem/ui-glitch

a JS library for making little UI glitches
https://github.com/wavebeem/ui-glitch

Last synced: 18 days 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 (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-04-05T02:10:09.000Z (over 4 years ago)
• Last Synced: 2024-11-30T21:34:16.796Z (23 days ago)
• Language: JavaScript
• Size: 14.6 KB
• Stars: 2
• Watchers: 3
• 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.