eessppeelllloo/powerglitch
1
0
Fork 0
mirror of https://github.com/7PH/powerglitch.git synced 2026-06-16 12:34:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add iife web bundle & Update README & Add title to docs website & Update library exports

Browse Source
This commit is contained in:
7PH
2022-07-21 18:24:46 +02:00
parent 87266ea113
commit 6e0d1c36dc
15 changed files with 1286 additions and 812 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
-1
View File
@@ -9,7 +9,6 @@ pnpm-debug.log*
lerna-debug.log*
node_modules
dist
*.local
# Editor directories and files
README.md
+14 -7
View File
@@ -1,6 +1,6 @@
<img src="./assets/intro.gif">
PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to create a glitch effect on images. No canvas or DOM manipulations are needed.
PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to create a glitch effect on images. No canvas or DOM manipulations are needed. It weights around 1.5kb minified and gzipped and 4kb minified.<br>
Want to try it out? Check out the [demo](https://7ph.github.io/powerglitch/#/playground) 😊
@@ -10,12 +10,16 @@ Want to try it out? Check out the [demo](https://7ph.github.io/powerglitch/#/pla
## Getting started
1. Install PowerGlitch using npm or yarn
1. Install PowerGlitch using a package manager
```bash
npm i --save powerglitch
# or
yarn add powerglitch
```
or by saving the web bundle in [dist/powerglitch.min.js](./dist/powerglitch.min.js) and importing it using a script tag
```html
<script src="./path/to/your/powerglitch.min.js"></script>
```
2. Add a container for the image with fixed width and height
```html
@@ -36,12 +40,15 @@ Want to try it out? Check out the [demo](https://7ph.github.io/powerglitch/#/pla
```javascript
const PowerGlitch = require('powerglitch').PowerGlitch
```
if you are importing PowerGlitch using a `script` tag, the `PowerGlitch` global variable is automatically available.
4. Glitch the image
```javascript
PowerGlitch.glitch(
'#glitched-image',
{ imageUrl: 'https://.../image.png' }
{
imageUrl: 'https://raw.githubusercontent.com/7PH/powerglitch/master/assets/logo-128.png'
},
)
```
@@ -50,7 +57,7 @@ Want to try it out? Check out the [demo](https://7ph.github.io/powerglitch/#/pla
PowerGlitch.glitch(
'#glitched-image',
{
imageUrl: 'https://.../image.png',
imageUrl: 'https://raw.githubusercontent.com/7PH/powerglitch/master/assets/logo-128.png',
backgroundColor: 'transparent',
timing: {
duration: 2 * 1000,
@@ -61,13 +68,13 @@ Want to try it out? Check out the [demo](https://7ph.github.io/powerglitch/#/pla
end: 0.7,
},
shake: {
velocity: 20,
velocity: 15,
amplitudeX: 0.4,
amplitudeY: 0.4,
},
slice: {
count: 10,
velocity: 25,
count: 6,
velocity: 15,
minHeight: 0.02,
maxHeight: 0.15,
hueRotate: true,
dist/powerglitch.min.js
Vendored
+1
View File
@@ -0,0 +1 @@
(function(d){"use strict";var y=Object.defineProperty,p=Object.defineProperties,w=Object.getOwnPropertyDescriptors,g=Object.getOwnPropertySymbols,_=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable,f=(t,e,r)=>e in t?y(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,o=(t,e)=>{for(var r in e||(e={}))_.call(e,r)&&f(t,r,e[r]);if(g)for(var r of g(e))$.call(e,r)&&f(t,r,e[r]);return t},b=(t,e)=>p(t,w(e));const l=()=>({backgroundColor:"transparent",timing:{duration:2*1e3,iterations:1/0},glitchTimeSpan:{start:.5,end:.7},shake:{velocity:15,amplitudeX:.4,amplitudeY:.4},slice:{count:6,velocity:15,minHeight:.02,maxHeight:.15,hueRotate:!0}}),c=(t,e)=>{let r=0;if(t.glitchTimeSpan){const n=t.glitchTimeSpan.start,s=t.glitchTimeSpan.end;if(e<n||e>s)return 0;const i=n+(s-n)/2;e<i?r=(e-n)/(i-n):r=(s-e)/(s-i)}else r=1;return(Math.random()-.5)*2*r},v=({minHeight:t,maxHeight:e,minWidth:r,maxWidth:a})=>{const n=Math.floor(Math.random()*((e-t)*100+1))+t*100,s=Math.floor(Math.random()*((a-r)*100+1))+r*100,i=Math.floor(Math.random()*(100-n)),u=Math.floor(Math.random()*(100-s));return{top:i,left:u,height:n,width:s}},P=({top:t,left:e,height:r,width:a})=>{const n=`${e+a}% ${t}%`,s=`${e+a}% ${t+r}%`,i=`${e}% ${t+r}%`,u=`${e}% ${t}%`;return`polygon(${n}, ${s}, ${i}, ${u})`},h=t=>b(o({},l().timing),{easing:`steps(${t}, jump-start)`}),M=t=>{if(!t.slice)throw new Error("Slice are not enabled");const e=Math.floor(t.slice.velocity*t.timing.duration/1e3)+1,r=[];for(let a=0;a<e;++a){const n=v({minHeight:t.slice.minHeight,maxHeight:t.slice.maxHeight,minWidth:1,maxWidth:1}),s=c(t,a/e)*30,i={};i.transform=`translate3d(${s}%, 0, 0)`,i.clipPath=P(n),t.slice.hueRotate&&(i.filter=`hue-rotate(${Math.floor(c(t,a/e)*360)}deg)`),r.push(i)}return{steps:r,timing:o(o({},h(e)),t.timing)}},C=t=>{if(!t.shake)return{steps:[],timing:h(1)};const e=Math.floor(t.shake.velocity*t.timing.duration/1e3)+1,r=[];for(let a=0;a<e;++a){const n=c(t,a/e)*t.shake.amplitudeX*100,s=c(t,a/e)*t.shake.amplitudeY*100,i={};i.transform=`translate3d(${n}%, ${s}%, 0)`,r.push(i)}return{steps:r,timing:o(o({},h(e)),t.timing)}},R=t=>{const e=[];if(e.push(C(t)),t.slice)for(let r=0;r<t.slice.count;++r)e.push(M(t));return e};function m(...t){const e=r=>r&&typeof r=="object";return t.reduce((r,a)=>(Object.keys(a).forEach(n=>{const s=r[n],i=a[n];if(Array.isArray(s)&&Array.isArray(i)){r[n]=s.concat(...i);return}if(e(s)&&e(i)){r[n]=m(s,i);return}i!==void 0&&(r[n]=i)}),r),{})}const k={glitch:(t,e)=>{if(e=m(l(),e),typeof t=="string"){const a=document.querySelector(t);if(!a)throw new Error(`Could not find element with selector ${t}`);t=a}for(t.style.position="relative",t.style.overflow="hidden";t.firstChild;)t.removeChild(t.firstChild);const r=R(e);for(const a of r){const n=document.createElement("div");n.classList.add("layer"),n.style.backgroundColor=e.backgroundColor,n.style.backgroundImage=`url(${e.imageUrl})`,n.style.backgroundRepeat="no-repeat",n.style.backgroundPosition="center",n.style.backgroundSize="contain",n.style.width="100%",n.style.height="100%",n.style.top="0",n.style.left="0",n.style.position="absolute",n.animate(a.steps,a.timing),t.appendChild(n)}},getDefaultOptions:l};d.PowerGlitch=k,Object.defineProperty(d,"__esModule",{value:!0})})(this.window=this.window||{});
docs-src/index.html
+1
View File
@@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PowerGlitch - Glitch anything on the web</title>
</head>
<body>
<div id="app"></div>
docs-src/src/components/OptionPanel.vue
+5 -5
View File
@@ -1,7 +1,7 @@
<script setup>
import { ref, onMounted } from 'vue';
import { useAppStore } from '@/stores/app';
import { PowerGlitch, getDefaultOptions } from '../../../src/index.ts';
import { PowerGlitch } from '../../../src/index.ts';
import logo from '@/assets/logo.png';
import ToggleGroupOption from '@/components/ToggleGroupOption.vue';
import StringOption from '@/components/StringOption.vue';
@@ -16,7 +16,7 @@ onMounted(() => {
PowerGlitch.glitch(
logoGlitch.value,
{
...getDefaultOptions(),
...PowerGlitch.getDefaultOptions(),
imageUrl: logo,
}
)
@@ -100,7 +100,7 @@ onMounted(() => {
<ToggleGroupOption
v-model="appStore.powerGlitchOptions.glitchTimeSpan"
:title="'Enabled'"
:getDefaultValue="v => v ? getDefaultOptions().glitchTimeSpan : false"
:getDefaultValue="v => v ? PowerGlitch.getDefaultOptions().glitchTimeSpan : false"
/>
<template v-if="appStore.powerGlitchOptions.glitchTimeSpan">
<NumberOption
@@ -127,7 +127,7 @@ onMounted(() => {
<ToggleGroupOption
v-model="appStore.powerGlitchOptions.shake"
:title="'Enabled'"
:getDefaultValue="v => v ? getDefaultOptions().shake : false"
:getDefaultValue="v => v ? PowerGlitch.getDefaultOptions().shake : false"
/>
<template v-if="appStore.powerGlitchOptions.shake">
<NumberOption
@@ -162,7 +162,7 @@ onMounted(() => {
<ToggleGroupOption
v-model="appStore.powerGlitchOptions.slice"
:title="'Enabled'"
:getDefaultValue="v => v ? getDefaultOptions().slice : false"
:getDefaultValue="v => v ? PowerGlitch.getDefaultOptions().slice : false"
/>
<template v-if="appStore.powerGlitchOptions.slice">
<NumberOption
docs-src/src/stores/app.js
+2 -2
View File
@@ -1,6 +1,6 @@
import { defineStore } from 'pinia';
import defaultImage from '@/assets/default.png';
import { getDefaultOptions } from '../../../src/index.ts';
import { PowerGlitch } from '../../../src/index.ts';
export const useAppStore = defineStore('main', {
@@ -10,7 +10,7 @@ export const useAppStore = defineStore('main', {
* Default options for Power Glitch
*/
powerGlitchOptions: {
...getDefaultOptions(),
...PowerGlitch.getDefaultOptions(),
imageUrl: defaultImage,
},
}),
docs-src/src/views/HomeView.vue
+6 -5
View File
@@ -86,14 +86,10 @@ or
<a target="_blank" href="https://github.com/7PH/powerglitch" class="underline">github</a>
</div>
<!-- Usage -->
<h1 class="font-bold mt-8">🔨 Usage</h1>
<pre class="border border-gray-400 overflow-x-auto rounded-xl p-4 mt-4 bg-gray-300" v-html="usageExample"></pre>
<!-- Introduction -->
<h1 class="font-bold mt-8">❓ Introduction</h1>
<p class="mt-4">
PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to create a glitch effect on images. No canvas or DOM manipulations are needed.<br>
PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to create a glitch effect on images. No canvas or DOM manipulations are needed. It weights around <b>1.5kb</b> minified and gzipped and <b>4kb</b> minified.<br>
<br>
What are you waiting for? <RouterLink to="playground" class="underline">Try glitching stuff now ⚡!</RouterLink>
</p>
@@ -110,6 +106,11 @@ or
<!-- Install -->
<h1 class="font-bold mt-8">🔽 Install</h1>
<pre class="border border-gray-400 rounded-xl p-4 mt-4 bg-gray-300" v-html="installExample"></pre>
<p class="mt-4">Alternatively, you can <a class="underline" target="_blank" href="https://raw.githubusercontent.com/7PH/powerglitch/master/dist/powerglitch.min.js">download minified web bundle</a> and use it directly in your project.</p>
<!-- Usage -->
<h1 class="font-bold mt-8">🔨 Usage</h1>
<pre class="border border-gray-400 overflow-x-auto rounded-xl p-4 mt-4 bg-gray-300" v-html="usageExample"></pre>
<!-- Contribute -->
<h1 class="font-bold mt-8">🤝 Support and bugs</h1>
docs/assets/index.16a74085.js
+782
View File
File diff suppressed because one or more lines are too long
docs/assets/index.add05156.css → docs/assets/index.6f117d0e.css
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/assets/index.b75ba5f8.js
-782
View File
File diff suppressed because one or more lines are too long
docs/index.html
+3 -2
View File
@@ -4,8 +4,9 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/powerglitch/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" crossorigin src="/powerglitch/assets/index.b75ba5f8.js"></script>
<link rel="stylesheet" href="/powerglitch/assets/index.add05156.css">
<title>PowerGlitch - Glitch anything on the web</title>
<script type="module" crossorigin src="/powerglitch/assets/index.16a74085.js"></script>
<link rel="stylesheet" href="/powerglitch/assets/index.6f117d0e.css">
</head>
<body>
<div id="app"></div>
package-lock.json
Generated
+438 -2
View File
@@ -1,11 +1,11 @@
{
"name": "powerglitch",
"version": "0.0.0",
"version": "0.2.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"version": "0.0.0",
"version": "0.2.1",
"devDependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-brands-svg-icons": "^6.1.1",
@@ -16,12 +16,53 @@
"autoprefixer": "^10.4.7",
"pinia": "^2.0.16",
"postcss": "^8.4.14",
"rollup": "^2.77.0",
"rollup-plugin-dts": "^4.2.2",
"rollup-plugin-esbuild": "^4.9.1",
"tailwindcss": "^3.1.6",
"vite": "^3.0.0",
"vue": "^3.2.37",
"vue-router": "^4.1.2"
}
},
"node_modules/@babel/code-frame": {
"version": "7.18.6",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
"integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==",
"dev": true,
"optional": true,
"dependencies": {
"@babel/highlight": "^7.18.6"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/helper-validator-identifier": {
"version": "7.18.6",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz",
"integrity": "sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==",
"dev": true,
"optional": true,
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/highlight": {
"version": "7.18.6",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
"integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
"dev": true,
"optional": true,
"dependencies": {
"@babel/helper-validator-identifier": "^7.18.6",
"chalk": "^2.0.0",
"js-tokens": "^4.0.0"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/parser": {
"version": "7.18.9",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.9.tgz",
@@ -141,6 +182,19 @@
"node": ">= 8"
}
},
"node_modules/@rollup/pluginutils": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
"integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
"dev": true,
"dependencies": {
"estree-walker": "^2.0.1",
"picomatch": "^2.2.2"
},
"engines": {
"node": ">= 8.0.0"
}
},
"node_modules/@vitejs/plugin-vue": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.0.1.tgz",
@@ -304,6 +358,19 @@
"node": ">=0.4.0"
}
},
"node_modules/ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"dev": true,
"optional": true,
"dependencies": {
"color-convert": "^1.9.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/anymatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -430,6 +497,21 @@
}
]
},
"node_modules/chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dev": true,
"optional": true,
"dependencies": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -469,6 +551,23 @@
"node": ">= 6"
}
},
"node_modules/color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"optional": true,
"dependencies": {
"color-name": "1.1.3"
}
},
"node_modules/color-convert/node_modules/color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
"dev": true,
"optional": true
},
"node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
@@ -493,6 +592,23 @@
"integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==",
"dev": true
},
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
"dev": true,
"dependencies": {
"ms": "2.1.2"
},
"engines": {
"node": ">=6.0"
},
"peerDependenciesMeta": {
"supports-color": {
"optional": true
}
}
},
"node_modules/defined": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
@@ -534,6 +650,12 @@
"integrity": "sha512-ola5UH0xAP1oYY0FFUsPvwtucEzCQHucXnT7PQ1zjHJMccZhCDktEugI++JUR3YuIs7Ff7afz+OVEhVAIMhLAQ==",
"dev": true
},
"node_modules/es-module-lexer": {
"version": "0.9.3",
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
"integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
"dev": true
},
"node_modules/esbuild": {
"version": "0.14.49",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.49.tgz",
@@ -898,6 +1020,16 @@
"node": ">=6"
}
},
"node_modules/escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
"dev": true,
"optional": true,
"engines": {
"node": ">=0.8.0"
}
},
"node_modules/estree-walker": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -1010,6 +1142,16 @@
"node": ">= 0.4.0"
}
},
"node_modules/has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
"dev": true,
"optional": true,
"engines": {
"node": ">=4"
}
},
"node_modules/is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1064,6 +1206,28 @@
"node": ">=0.12.0"
}
},
"node_modules/joycon": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/joycon/-/joycon-3.1.1.tgz",
"integrity": "sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==",
"dev": true,
"engines": {
"node": ">=10"
}
},
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
"dev": true,
"optional": true
},
"node_modules/jsonc-parser": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.1.0.tgz",
"integrity": "sha512-DRf0QjnNeCUds3xTjKlQQ3DpJD51GvDjJfnxUVWg6PZTo2otSm+slzNAxU/35hF8/oJIKoG9slq30JYOsF2azg==",
"dev": true
},
"node_modules/lilconfig": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
@@ -1110,6 +1274,12 @@
"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
"dev": true
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true
},
"node_modules/nanoid": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -1462,6 +1632,60 @@
"fsevents": "~2.3.2"
}
},
"node_modules/rollup-plugin-dts": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/rollup-plugin-dts/-/rollup-plugin-dts-4.2.2.tgz",
"integrity": "sha512-A3g6Rogyko/PXeKoUlkjxkP++8UDVpgA7C+Tdl77Xj4fgEaIjPSnxRmR53EzvoYy97VMVwLAOcWJudaVAuxneQ==",
"dev": true,
"dependencies": {
"magic-string": "^0.26.1"
},
"engines": {
"node": ">=v12.22.11"
},
"funding": {
"url": "https://github.com/sponsors/Swatinem"
},
"optionalDependencies": {
"@babel/code-frame": "^7.16.7"
},
"peerDependencies": {
"rollup": "^2.55",
"typescript": "^4.1"
}
},
"node_modules/rollup-plugin-dts/node_modules/magic-string": {
"version": "0.26.2",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.2.tgz",
"integrity": "sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==",
"dev": true,
"dependencies": {
"sourcemap-codec": "^1.4.8"
},
"engines": {
"node": ">=12"
}
},
"node_modules/rollup-plugin-esbuild": {
"version": "4.9.1",
"resolved": "https://registry.npmjs.org/rollup-plugin-esbuild/-/rollup-plugin-esbuild-4.9.1.tgz",
"integrity": "sha512-qn/x7Wz9p3Xnva99qcb+nopH0d2VJwVnsxJTGEg+Sh2Z3tqQl33MhOwzekVo1YTKgv+yAmosjcBRJygMfGrtLw==",
"dev": true,
"dependencies": {
"@rollup/pluginutils": "^4.1.1",
"debug": "^4.3.3",
"es-module-lexer": "^0.9.3",
"joycon": "^3.0.1",
"jsonc-parser": "^3.0.0"
},
"engines": {
"node": ">=12"
},
"peerDependencies": {
"esbuild": ">=0.10.1",
"rollup": "^1.20.0 || ^2.0.0"
}
},
"node_modules/run-parallel": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -1509,6 +1733,19 @@
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
"dev": true
},
"node_modules/supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"optional": true,
"dependencies": {
"has-flag": "^3.0.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/supports-preserve-symlinks-flag": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -1573,6 +1810,20 @@
"node": ">=8.0"
}
},
"node_modules/typescript": {
"version": "4.7.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
"integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
"dev": true,
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=4.2.0"
}
},
"node_modules/update-browserslist-db": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz",
@@ -1694,6 +1945,35 @@
}
},
"dependencies": {
"@babel/code-frame": {
"version": "7.18.6",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
"integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==",
"dev": true,
"optional": true,
"requires": {
"@babel/highlight": "^7.18.6"
}
},
"@babel/helper-validator-identifier": {
"version": "7.18.6",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz",
"integrity": "sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==",
"dev": true,
"optional": true
},
"@babel/highlight": {
"version": "7.18.6",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
"integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
"dev": true,
"optional": true,
"requires": {
"@babel/helper-validator-identifier": "^7.18.6",
"chalk": "^2.0.0",
"js-tokens": "^4.0.0"
}
},
"@babel/parser": {
"version": "7.18.9",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.9.tgz",
@@ -1775,6 +2055,16 @@
"fastq": "^1.6.0"
}
},
"@rollup/pluginutils": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
"integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
"dev": true,
"requires": {
"estree-walker": "^2.0.1",
"picomatch": "^2.2.2"
}
},
"@vitejs/plugin-vue": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.0.1.tgz",
@@ -1920,6 +2210,16 @@
"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
"dev": true
},
"ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^1.9.0"
}
},
"anymatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -1989,6 +2289,18 @@
"integrity": "sha512-XDgbeOHfifWV3GEES2B8rtsrADx4Jf+juKX2SICJcaUhjYBO3bR96kvEIHa15VU6ohtOhBZuPGGYGbXMRn0NCw==",
"dev": true
},
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
}
},
"chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -2016,6 +2328,25 @@
}
}
},
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"optional": true,
"requires": {
"color-name": "1.1.3"
},
"dependencies": {
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
"dev": true,
"optional": true
}
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
@@ -2034,6 +2365,15 @@
"integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==",
"dev": true
},
"debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
"dev": true,
"requires": {
"ms": "2.1.2"
}
},
"defined": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
@@ -2069,6 +2409,12 @@
"integrity": "sha512-ola5UH0xAP1oYY0FFUsPvwtucEzCQHucXnT7PQ1zjHJMccZhCDktEugI++JUR3YuIs7Ff7afz+OVEhVAIMhLAQ==",
"dev": true
},
"es-module-lexer": {
"version": "0.9.3",
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
"integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
"dev": true
},
"esbuild": {
"version": "0.14.49",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.49.tgz",
@@ -2243,6 +2589,13 @@
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
"dev": true
},
"escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
"dev": true,
"optional": true
},
"estree-walker": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -2328,6 +2681,13 @@
"function-bind": "^1.1.1"
}
},
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
"dev": true,
"optional": true
},
"is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2367,6 +2727,25 @@
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true
},
"joycon": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/joycon/-/joycon-3.1.1.tgz",
"integrity": "sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==",
"dev": true
},
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
"dev": true,
"optional": true
},
"jsonc-parser": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.1.0.tgz",
"integrity": "sha512-DRf0QjnNeCUds3xTjKlQQ3DpJD51GvDjJfnxUVWg6PZTo2otSm+slzNAxU/35hF8/oJIKoG9slq30JYOsF2azg==",
"dev": true
},
"lilconfig": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
@@ -2404,6 +2783,12 @@
"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
"dev": true
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true
},
"nanoid": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -2599,6 +2984,40 @@
"fsevents": "~2.3.2"
}
},
"rollup-plugin-dts": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/rollup-plugin-dts/-/rollup-plugin-dts-4.2.2.tgz",
"integrity": "sha512-A3g6Rogyko/PXeKoUlkjxkP++8UDVpgA7C+Tdl77Xj4fgEaIjPSnxRmR53EzvoYy97VMVwLAOcWJudaVAuxneQ==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.16.7",
"magic-string": "^0.26.1"
},
"dependencies": {
"magic-string": {
"version": "0.26.2",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.2.tgz",
"integrity": "sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==",
"dev": true,
"requires": {
"sourcemap-codec": "^1.4.8"
}
}
}
},
"rollup-plugin-esbuild": {
"version": "4.9.1",
"resolved": "https://registry.npmjs.org/rollup-plugin-esbuild/-/rollup-plugin-esbuild-4.9.1.tgz",
"integrity": "sha512-qn/x7Wz9p3Xnva99qcb+nopH0d2VJwVnsxJTGEg+Sh2Z3tqQl33MhOwzekVo1YTKgv+yAmosjcBRJygMfGrtLw==",
"dev": true,
"requires": {
"@rollup/pluginutils": "^4.1.1",
"debug": "^4.3.3",
"es-module-lexer": "^0.9.3",
"joycon": "^3.0.1",
"jsonc-parser": "^3.0.0"
}
},
"run-parallel": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -2626,6 +3045,16 @@
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
"dev": true
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^3.0.0"
}
},
"supports-preserve-symlinks-flag": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -2670,6 +3099,13 @@
"is-number": "^7.0.0"
}
},
"typescript": {
"version": "4.7.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
"integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
"dev": true,
"peer": true
},
"update-browserslist-db": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz",
package.json
+5 -1
View File
@@ -1,12 +1,14 @@
{
"name": "powerglitch",
"version": "0.2.1",
"version": "0.3.0",
"main": "./lib/index.js",
"types": "./lib/index.d.ts",
"scripts": {
"dev:docs": "vite",
"build:docs": "vite build --emptyOutDir",
"build:lib": "tsc",
"build:dist": "rm -rf dist; rollup -c",
"build": "npm run build:docs && npm run build:lib && npm run build:dist",
"preview:docs": "vite preview"
},
"files": [
@@ -22,6 +24,8 @@
"autoprefixer": "^10.4.7",
"pinia": "^2.0.16",
"postcss": "^8.4.14",
"rollup": "^2.77.0",
"rollup-plugin-esbuild": "^4.9.1",
"tailwindcss": "^3.1.6",
"vite": "^3.0.0",
"vue": "^3.2.37",
rollup.config.js
+23
View File
@@ -0,0 +1,23 @@
import esbuild, { minify } from 'rollup-plugin-esbuild';
const name = 'powerglitch';
const bundle = config => ({
...config,
input: 'src/index.ts',
external: id => !/^[./]/.test(id),
});
export default [
bundle({
plugins: [esbuild(), minify()],
output: [
{
file: `dist/${name}.min.js`,
name: 'window',
extend: true,
format: 'iife',
},
],
}),
];
src/index.ts
+5 -4
View File
@@ -1,7 +1,7 @@
/**
* Custom options for the glitch animations.
*/
export type PowerGlitchOptions = {
type PowerGlitchOptions = {
/**
* Image URL. Can be local, remote or a data URL.
@@ -111,7 +111,7 @@ export type PowerGlitchOptions = {
/**
* One layer to generate
*/
export type LayerDefinition = {
type LayerDefinition = {
steps: { [cssPropertyName: string]: string }[],
timing: EffectTiming,
};
@@ -119,7 +119,7 @@ export type LayerDefinition = {
/**
* A rectangle in %, values from 0 to 100.
*/
export type Rectangle = {
type Rectangle = {
top: number,
left: number,
height: number,
@@ -129,7 +129,7 @@ export type Rectangle = {
/**
* Get best-looking default options for most images.
*/
export const getDefaultOptions = (): Partial<PowerGlitchOptions> => ({
const getDefaultOptions = (): Partial<PowerGlitchOptions> => ({
backgroundColor: 'transparent',
timing: {
duration: 2 * 1000,
@@ -370,4 +370,5 @@ const glitch = (elOrSelector: string | HTMLDivElement, options: PowerGlitchOptio
export const PowerGlitch = {
glitch,
getDefaultOptions,
};