diff --git a/README.md b/README.md
new file mode 100644
index 0000000..cf690a5
--- /dev/null
+++ b/README.md
@@ -0,0 +1,2 @@
+# PowerGlitch
+
diff --git a/docs/assets/index.9e90e0d2.js b/docs/assets/index.9e90e0d2.js
index 6f51347..80eaaed 100644
--- a/docs/assets/index.9e90e0d2.js
+++ b/docs/assets/index.9e90e0d2.js
@@ -766,4 +766,4 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
  * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  * Copyright 2022 Fonticons, Inc.
- */var Wu={prefix:"fab",iconName:"github",icon:[496,512,[],"f09b","M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"]};Iu.add(Wu);const Gu="/assets/default.2422ffbd.gif",Zt=()=>({backgroundColor:"transparent",timing:{duration:2*1e3,iterations:1/0},glitchTimeSpan:{start:.3,end:.7},shake:{velocity:20,amplitudeX:.5,amplitudeY:.5},slices:{count:6,velocity:20,minHeight:.01,maxHeight:.05,hueRotate:!0}}),Rn=(e,t)=>{let n=0;if(e.glitchTimeSpan){const a=e.glitchTimeSpan.start,i=e.glitchTimeSpan.end;if(t<a||t>i)return 0;const o=a+(i-a)/2;t<o?n=(t-a)/(o-a):n=(i-t)/(i-o)}else n=1;return(Math.random()-.5)*2*n},Ku=({minHeight:e,maxHeight:t,minWidth:n,maxWidth:r})=>{const a=Math.floor(Math.random()*((t-e)*100+1))+e*100,i=Math.floor(Math.random()*((r-n)*100+1))+n*100,o=Math.floor(Math.random()*(100-a)),s=Math.floor(Math.random()*(100-i));return{top:o,left:s,height:a,width:i}},qu=({top:e,left:t,height:n,width:r})=>{const a=`${t+r}% ${e}%`,i=`${t+r}% ${e+n}%`,o=`${t}% ${e+n}%`,s=`${t}% ${e}%`;return`polygon(${a}, ${i}, ${o}, ${s})`},Vr=e=>({easing:`steps(${e}, jump-start)`}),Xu=e=>{if(!e.slices)throw new Error("Slices are not enabled");const t=Math.floor(e.slices.velocity*e.timing.duration/1e3)+1,n=[];for(let r=0;r<t;++r){const a=Ku({minHeight:e.slices.minHeight,maxHeight:e.slices.maxHeight,minWidth:1,maxWidth:1}),i=Rn(e,r/t)*30,o={};o.transform=`translate3d(${i}%, 0, 0)`,o.clipPath=qu(a),e.slices.hueRotate&&(o.filter=`hue-rotate(${Math.floor(Rn(e,r/t)*360)}deg)`),n.push(o)}return{steps:n,timing:{...Vr(t),...e.timing}}},Ju=e=>{if(!e.shake)return{steps:[],timing:Vr(1)};const t=Math.floor(e.shake.velocity*e.timing.duration/1e3)+1,n=[];for(let r=0;r<t;++r){const a=Rn(e,r/t)*e.shake.amplitudeX*100,i=Rn(e,r/t)*e.shake.amplitudeY*100,o={};o.transform=`translate3d(${a}%, ${i}%, 0)`,n.push(o)}return{steps:n,timing:{...Vr(t),...e.timing}}},Zu=e=>{const t=[];if(t.push(Ju(e)),e.slices)for(let n=0;n<e.slices.count;++n)t.push(Xu(e));return t},Qu=(e,t)=>{if(t={...Zt(),...t},typeof e=="string"){const r=document.querySelector(e);if(!r)throw new Error(`Could not find element with selector ${e}`);e=r}for(e.style.position="relative",e.style.overflow="hidden";e.firstChild;)e.removeChild(e.firstChild);const n=Zu(t);for(const r of n){const a=document.createElement("div");a.classList.add("layer"),a.style.backgroundColor=t.backgroundColor,a.style.backgroundImage=`url(${t.imageUrl})`,a.style.backgroundRepeat="no-repeat",a.style.backgroundPosition="center",a.style.backgroundSize="contain",a.style.width="100%",a.style.height="100%",a.style.top="0",a.style.left="0",a.style.position="absolute",a.animate(r.steps,r.timing),e.appendChild(a)}},ed={install:Qu},jt=Kf("main",{state:()=>({powerGlitchOptions:{...Zt(),imageUrl:Gu}}),actions:{setOptions(e){this.powerGlitchOptions={...this.powerGlitchOptions,...e}}}}),td={class:"pl-4 text-sm grid grid-cols-12"},nd={class:"col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0"},rd={class:"col-span-8 flex gap-4 overflow-x-hidden"},ad=["value"],id=W("option",{value:"true"},"Yes",-1),od=W("option",{value:"false"},"No",-1),sd=[id,od],gn={__name:"ToggleGroupOption",props:{modelValue:{required:!0},title:{type:String,required:!0},getDefaultValue:{type:Function,required:!0}},emits:["update:modelValue"],setup(e){return jt(),(t,n)=>(xe(),Re("div",td,[W("div",nd,Fn(e.title),1),W("div",rd,[W("select",{class:"w-20",value:!!e.modelValue,onInput:n[0]||(n[0]=r=>t.$emit("update:modelValue",e.getDefaultValue(r.target.value==="true")))},sd,40,ad)])]))}},ld={class:"pl-4 text-sm grid grid-cols-12"},fd={class:"col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0"},cd={class:"col-span-8 flex gap-4 overflow-x-hidden"},ud=["placeholder","value"],Si={__name:"StringOption",props:{modelValue:{type:String,required:!0},title:{type:String,required:!0}},emits:["update:modelValue"],setup(e){return jt(),(t,n)=>(xe(),Re("div",ld,[W("div",fd,Fn(e.title),1),W("div",cd,[W("input",{class:"w-full",placeholder:e.title,value:e.modelValue,onInput:n[0]||(n[0]=r=>t.$emit("update:modelValue",r.target.value))},null,40,ud)])]))}},dd={class:"pl-4 text-sm grid grid-cols-12"},md={class:"col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0"},pd={class:"col-span-8 flex gap-4 overflow-x-hidden"},hd=["value"],gd=W("option",{value:"true"},"Yes",-1),vd=W("option",{value:"false"},"No",-1),bd=[gd,vd],yd={__name:"BooleanOption",props:{modelValue:{type:Boolean,required:!0},title:{type:String,required:!0}},emits:["update:modelValue"],setup(e){return jt(),(t,n)=>(xe(),Re("div",dd,[W("div",md,Fn(e.title),1),W("div",pd,[W("select",{class:"w-20",value:e.modelValue,onInput:n[0]||(n[0]=r=>t.$emit("update:modelValue",r.target.value==="true"))},bd,40,hd)])]))}},xd={class:"pl-4 text-sm grid grid-cols-12"},wd={class:"col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0"},_d={class:"col-span-8 flex gap-4 overflow-x-hidden"},kd=["value","min","max"],Od=["value","min","max","step"],ke={__name:"NumberOption",props:{modelValue:{type:Number,required:!0},title:{type:String,required:!0},min:{type:Number,required:!0},max:{type:Number,required:!0},step:{type:Number,required:!0},factor:{type:Number,default:1}},emits:["update:modelValue"],setup(e){return jt(),(t,n)=>(xe(),Re("div",xd,[W("div",wd,Fn(e.title),1),W("div",_d,[W("input",{class:"w-20",value:e.modelValue*e.factor,onChange:n[0]||(n[0]=r=>t.$emit("update:modelValue",parseInt(r.target.value)/e.factor)),type:"number",min:e.min*e.factor,max:e.max*e.factor},null,40,kd),W("input",{value:e.modelValue*e.factor,onInput:n[1]||(n[1]=r=>t.$emit("update:modelValue",parseInt(r.target.value)/e.factor)),type:"range",min:e.min*e.factor,max:e.max*e.factor,step:e.step*e.factor},null,40,Od)])]))}},Ad={class:"px-4"},Ed={class:"font-bold text-xl mb-4 flex"},Cd=W("div",{class:"grow"},"PowerGlitch",-1),Pd={title:"Github",target:"_blank",href:"https://github.com/7PH/powerglitch"},Id=W("div",{class:"font-bold mt-6 mb-2 pl-2"},"Global",-1),Sd=W("div",{class:"font-bold mt-6 mb-2 pl-2"},"Timing",-1),Td=W("div",{class:"font-bold mt-6 mb-2 pl-2"},"Glitch Time Span",-1),Nd=W("div",{class:"font-bold mt-6 mb-2 pl-2"},"Shake",-1),Md=W("div",{class:"font-bold mt-6 mb-2 pl-2"},"Slices",-1),$d={__name:"OptionPanel",setup(e){const t=jt();return(n,r)=>{const a=Ll("fa");return xe(),Re("div",Ad,[W("div",Ed,[Cd,W("div",null,[W("a",Pd,[Y(a,{icon:"fa-brands fa-github"})])])]),Id,Y(Si,{class:"mt-1",modelValue:R(t).powerGlitchOptions.imageUrl,"onUpdate:modelValue":r[0]||(r[0]=i=>R(t).powerGlitchOptions.imageUrl=i),title:"Image"},null,8,["modelValue"]),Y(Si,{class:"mt-1",modelValue:R(t).powerGlitchOptions.backgroundColor,"onUpdate:modelValue":r[1]||(r[1]=i=>R(t).powerGlitchOptions.backgroundColor=i),title:"Background color"},null,8,["modelValue"]),Sd,Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.timing.duration,"onUpdate:modelValue":r[2]||(r[2]=i=>R(t).powerGlitchOptions.timing.duration=i),title:"Loop duration (ms)",min:100,max:1e4,step:100},null,8,["modelValue","title"]),Y(gn,{class:"mt-1",modelValue:R(t).powerGlitchOptions.timing.iterations,"onUpdate:modelValue":r[3]||(r[3]=i=>R(t).powerGlitchOptions.timing.iterations=i),title:"Loop",getDefaultValue:i=>i?1/0:1},null,8,["modelValue","getDefaultValue"]),R(t).powerGlitchOptions.timing.iterations<1/0?(xe(),Eo(ke,{key:0,class:"mt-1",modelValue:R(t).powerGlitchOptions.shake.velocity,"onUpdate:modelValue":r[4]||(r[4]=i=>R(t).powerGlitchOptions.shake.velocity=i),title:"Velocity (steps/s)",min:1,max:60,step:1},null,8,["modelValue","title"])):pn("",!0),Td,Y(gn,{modelValue:R(t).powerGlitchOptions.glitchTimeSpan,"onUpdate:modelValue":r[5]||(r[5]=i=>R(t).powerGlitchOptions.glitchTimeSpan=i),title:"Enabled",getDefaultValue:i=>i?R(Zt)().glitchTimeSpan:!1},null,8,["modelValue","getDefaultValue"]),R(t).powerGlitchOptions.glitchTimeSpan?(xe(),Re(ye,{key:1},[Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.glitchTimeSpan.start,"onUpdate:modelValue":r[6]||(r[6]=i=>R(t).powerGlitchOptions.glitchTimeSpan.start=i),title:"Start time (%)",min:0,max:1,step:.01,factor:100},null,8,["modelValue","title","min","max","step"]),Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.glitchTimeSpan.end,"onUpdate:modelValue":r[7]||(r[7]=i=>R(t).powerGlitchOptions.glitchTimeSpan.end=i),title:"End time (%)",min:0,max:1,step:.01,factor:100},null,8,["modelValue","title","min","max","step"])],64)):pn("",!0),Nd,Y(gn,{modelValue:R(t).powerGlitchOptions.shake,"onUpdate:modelValue":r[8]||(r[8]=i=>R(t).powerGlitchOptions.shake=i),title:"Enabled",getDefaultValue:i=>i?R(Zt)().shake:!1},null,8,["modelValue","getDefaultValue"]),R(t).powerGlitchOptions.shake?(xe(),Re(ye,{key:2},[Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.shake.velocity,"onUpdate:modelValue":r[9]||(r[9]=i=>R(t).powerGlitchOptions.shake.velocity=i),title:"Velocity (steps/s)",min:1,max:60,step:1},null,8,["modelValue","title"]),Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.shake.amplitudeX,"onUpdate:modelValue":r[10]||(r[10]=i=>R(t).powerGlitchOptions.shake.amplitudeX=i),title:"X amplitude (%)",min:0,max:2,step:.01,factor:100},null,8,["modelValue","title","min","max","step"]),Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.shake.amplitudeY,"onUpdate:modelValue":r[11]||(r[11]=i=>R(t).powerGlitchOptions.shake.amplitudeY=i),title:"Y amplitude (%)",min:0,max:2,step:.01,factor:100},null,8,["modelValue","title","min","max","step"])],64)):pn("",!0),Md,Y(gn,{modelValue:R(t).powerGlitchOptions.slices,"onUpdate:modelValue":r[12]||(r[12]=i=>R(t).powerGlitchOptions.slices=i),title:"Enabled",getDefaultValue:i=>i?R(Zt)().slices:!1},null,8,["modelValue","getDefaultValue"]),R(t).powerGlitchOptions.slices?(xe(),Re(ye,{key:3},[Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.slices.count,"onUpdate:modelValue":r[13]||(r[13]=i=>R(t).powerGlitchOptions.slices.count=i),title:"Count (slices/step)",min:1,max:60,step:1},null,8,["modelValue","title"]),Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.slices.velocity,"onUpdate:modelValue":r[14]||(r[14]=i=>R(t).powerGlitchOptions.slices.velocity=i),title:"Velocity (steps/s)",min:1,max:60,step:1},null,8,["modelValue","title"]),Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.slices.minHeight,"onUpdate:modelValue":r[15]||(r[15]=i=>R(t).powerGlitchOptions.slices.minHeight=i),title:"Min slice height (%)",min:.01,max:1,step:.01,factor:100},null,8,["modelValue","title","min","max","step"]),Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.slices.maxHeight,"onUpdate:modelValue":r[16]||(r[16]=i=>R(t).powerGlitchOptions.slices.maxHeight=i),title:"Max slice height (%)",min:.01,max:1,step:.01,factor:100},null,8,["modelValue","title","min","max","step"]),Y(yd,{class:"mt-1",modelValue:R(t).powerGlitchOptions.slices.hueRotate,"onUpdate:modelValue":r[17]||(r[17]=i=>R(t).powerGlitchOptions.slices.hueRotate=i),title:"Hue rotate"},null,8,["modelValue"])],64)):pn("",!0)])}}};const Rd=(e,t)=>{const n=e.__vccOpts||e;for(const[r,a]of t)n[r]=a;return n},Fd={__name:"ImagePreview",setup(e){const t=jt(),n=ra(null),r=()=>{!n.value||ed.install(n.value,t.powerGlitchOptions)};return po(r),It(r),(a,i)=>(xe(),Re("div",null,[W("div",{ref_key:"container",ref:n,class:"glitch"},null,512)]))}},Ld=Rd(Fd,[["__scopeId","data-v-a14c2e49"]]),jd={class:"app h-full grid grid-cols-12"},Dd={class:"col-span-4 border p-4 overflow-y-auto"},zd={class:"col-span-8 flex flex-col"},Ud={class:"grow flex flex-col justify-center"},Vd={__name:"App",setup(e){return(t,n)=>(xe(),Re("div",jd,[W("div",Dd,[Y($d)]),W("div",zd,[W("div",Ud,[Y(Ld,{class:"mx-auto"})])])]))}},Hd=Hf();zf(Vd).use(Hd).component("fa",Yu).mount("#app");
+ */var Wu={prefix:"fab",iconName:"github",icon:[496,512,[],"f09b","M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"]};Iu.add(Wu);const Gu="/powerglitch/assets/default.2422ffbd.gif",Zt=()=>({backgroundColor:"transparent",timing:{duration:2*1e3,iterations:1/0},glitchTimeSpan:{start:.3,end:.7},shake:{velocity:20,amplitudeX:.5,amplitudeY:.5},slices:{count:6,velocity:20,minHeight:.01,maxHeight:.05,hueRotate:!0}}),Rn=(e,t)=>{let n=0;if(e.glitchTimeSpan){const a=e.glitchTimeSpan.start,i=e.glitchTimeSpan.end;if(t<a||t>i)return 0;const o=a+(i-a)/2;t<o?n=(t-a)/(o-a):n=(i-t)/(i-o)}else n=1;return(Math.random()-.5)*2*n},Ku=({minHeight:e,maxHeight:t,minWidth:n,maxWidth:r})=>{const a=Math.floor(Math.random()*((t-e)*100+1))+e*100,i=Math.floor(Math.random()*((r-n)*100+1))+n*100,o=Math.floor(Math.random()*(100-a)),s=Math.floor(Math.random()*(100-i));return{top:o,left:s,height:a,width:i}},qu=({top:e,left:t,height:n,width:r})=>{const a=`${t+r}% ${e}%`,i=`${t+r}% ${e+n}%`,o=`${t}% ${e+n}%`,s=`${t}% ${e}%`;return`polygon(${a}, ${i}, ${o}, ${s})`},Vr=e=>({easing:`steps(${e}, jump-start)`}),Xu=e=>{if(!e.slices)throw new Error("Slices are not enabled");const t=Math.floor(e.slices.velocity*e.timing.duration/1e3)+1,n=[];for(let r=0;r<t;++r){const a=Ku({minHeight:e.slices.minHeight,maxHeight:e.slices.maxHeight,minWidth:1,maxWidth:1}),i=Rn(e,r/t)*30,o={};o.transform=`translate3d(${i}%, 0, 0)`,o.clipPath=qu(a),e.slices.hueRotate&&(o.filter=`hue-rotate(${Math.floor(Rn(e,r/t)*360)}deg)`),n.push(o)}return{steps:n,timing:{...Vr(t),...e.timing}}},Ju=e=>{if(!e.shake)return{steps:[],timing:Vr(1)};const t=Math.floor(e.shake.velocity*e.timing.duration/1e3)+1,n=[];for(let r=0;r<t;++r){const a=Rn(e,r/t)*e.shake.amplitudeX*100,i=Rn(e,r/t)*e.shake.amplitudeY*100,o={};o.transform=`translate3d(${a}%, ${i}%, 0)`,n.push(o)}return{steps:n,timing:{...Vr(t),...e.timing}}},Zu=e=>{const t=[];if(t.push(Ju(e)),e.slices)for(let n=0;n<e.slices.count;++n)t.push(Xu(e));return t},Qu=(e,t)=>{if(t={...Zt(),...t},typeof e=="string"){const r=document.querySelector(e);if(!r)throw new Error(`Could not find element with selector ${e}`);e=r}for(e.style.position="relative",e.style.overflow="hidden";e.firstChild;)e.removeChild(e.firstChild);const n=Zu(t);for(const r of n){const a=document.createElement("div");a.classList.add("layer"),a.style.backgroundColor=t.backgroundColor,a.style.backgroundImage=`url(${t.imageUrl})`,a.style.backgroundRepeat="no-repeat",a.style.backgroundPosition="center",a.style.backgroundSize="contain",a.style.width="100%",a.style.height="100%",a.style.top="0",a.style.left="0",a.style.position="absolute",a.animate(r.steps,r.timing),e.appendChild(a)}},ed={install:Qu},jt=Kf("main",{state:()=>({powerGlitchOptions:{...Zt(),imageUrl:Gu}}),actions:{setOptions(e){this.powerGlitchOptions={...this.powerGlitchOptions,...e}}}}),td={class:"pl-4 text-sm grid grid-cols-12"},nd={class:"col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0"},rd={class:"col-span-8 flex gap-4 overflow-x-hidden"},ad=["value"],id=W("option",{value:"true"},"Yes",-1),od=W("option",{value:"false"},"No",-1),sd=[id,od],gn={__name:"ToggleGroupOption",props:{modelValue:{required:!0},title:{type:String,required:!0},getDefaultValue:{type:Function,required:!0}},emits:["update:modelValue"],setup(e){return jt(),(t,n)=>(xe(),Re("div",td,[W("div",nd,Fn(e.title),1),W("div",rd,[W("select",{class:"w-20",value:!!e.modelValue,onInput:n[0]||(n[0]=r=>t.$emit("update:modelValue",e.getDefaultValue(r.target.value==="true")))},sd,40,ad)])]))}},ld={class:"pl-4 text-sm grid grid-cols-12"},fd={class:"col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0"},cd={class:"col-span-8 flex gap-4 overflow-x-hidden"},ud=["placeholder","value"],Si={__name:"StringOption",props:{modelValue:{type:String,required:!0},title:{type:String,required:!0}},emits:["update:modelValue"],setup(e){return jt(),(t,n)=>(xe(),Re("div",ld,[W("div",fd,Fn(e.title),1),W("div",cd,[W("input",{class:"w-full",placeholder:e.title,value:e.modelValue,onInput:n[0]||(n[0]=r=>t.$emit("update:modelValue",r.target.value))},null,40,ud)])]))}},dd={class:"pl-4 text-sm grid grid-cols-12"},md={class:"col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0"},pd={class:"col-span-8 flex gap-4 overflow-x-hidden"},hd=["value"],gd=W("option",{value:"true"},"Yes",-1),vd=W("option",{value:"false"},"No",-1),bd=[gd,vd],yd={__name:"BooleanOption",props:{modelValue:{type:Boolean,required:!0},title:{type:String,required:!0}},emits:["update:modelValue"],setup(e){return jt(),(t,n)=>(xe(),Re("div",dd,[W("div",md,Fn(e.title),1),W("div",pd,[W("select",{class:"w-20",value:e.modelValue,onInput:n[0]||(n[0]=r=>t.$emit("update:modelValue",r.target.value==="true"))},bd,40,hd)])]))}},xd={class:"pl-4 text-sm grid grid-cols-12"},wd={class:"col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0"},_d={class:"col-span-8 flex gap-4 overflow-x-hidden"},kd=["value","min","max"],Od=["value","min","max","step"],ke={__name:"NumberOption",props:{modelValue:{type:Number,required:!0},title:{type:String,required:!0},min:{type:Number,required:!0},max:{type:Number,required:!0},step:{type:Number,required:!0},factor:{type:Number,default:1}},emits:["update:modelValue"],setup(e){return jt(),(t,n)=>(xe(),Re("div",xd,[W("div",wd,Fn(e.title),1),W("div",_d,[W("input",{class:"w-20",value:e.modelValue*e.factor,onChange:n[0]||(n[0]=r=>t.$emit("update:modelValue",parseInt(r.target.value)/e.factor)),type:"number",min:e.min*e.factor,max:e.max*e.factor},null,40,kd),W("input",{value:e.modelValue*e.factor,onInput:n[1]||(n[1]=r=>t.$emit("update:modelValue",parseInt(r.target.value)/e.factor)),type:"range",min:e.min*e.factor,max:e.max*e.factor,step:e.step*e.factor},null,40,Od)])]))}},Ad={class:"px-4"},Ed={class:"font-bold text-xl mb-4 flex"},Cd=W("div",{class:"grow"},"PowerGlitch",-1),Pd={title:"Github",target:"_blank",href:"https://github.com/7PH/powerglitch"},Id=W("div",{class:"font-bold mt-6 mb-2 pl-2"},"Global",-1),Sd=W("div",{class:"font-bold mt-6 mb-2 pl-2"},"Timing",-1),Td=W("div",{class:"font-bold mt-6 mb-2 pl-2"},"Glitch Time Span",-1),Nd=W("div",{class:"font-bold mt-6 mb-2 pl-2"},"Shake",-1),Md=W("div",{class:"font-bold mt-6 mb-2 pl-2"},"Slices",-1),$d={__name:"OptionPanel",setup(e){const t=jt();return(n,r)=>{const a=Ll("fa");return xe(),Re("div",Ad,[W("div",Ed,[Cd,W("div",null,[W("a",Pd,[Y(a,{icon:"fa-brands fa-github"})])])]),Id,Y(Si,{class:"mt-1",modelValue:R(t).powerGlitchOptions.imageUrl,"onUpdate:modelValue":r[0]||(r[0]=i=>R(t).powerGlitchOptions.imageUrl=i),title:"Image"},null,8,["modelValue"]),Y(Si,{class:"mt-1",modelValue:R(t).powerGlitchOptions.backgroundColor,"onUpdate:modelValue":r[1]||(r[1]=i=>R(t).powerGlitchOptions.backgroundColor=i),title:"Background color"},null,8,["modelValue"]),Sd,Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.timing.duration,"onUpdate:modelValue":r[2]||(r[2]=i=>R(t).powerGlitchOptions.timing.duration=i),title:"Loop duration (ms)",min:100,max:1e4,step:100},null,8,["modelValue","title"]),Y(gn,{class:"mt-1",modelValue:R(t).powerGlitchOptions.timing.iterations,"onUpdate:modelValue":r[3]||(r[3]=i=>R(t).powerGlitchOptions.timing.iterations=i),title:"Loop",getDefaultValue:i=>i?1/0:1},null,8,["modelValue","getDefaultValue"]),R(t).powerGlitchOptions.timing.iterations<1/0?(xe(),Eo(ke,{key:0,class:"mt-1",modelValue:R(t).powerGlitchOptions.shake.velocity,"onUpdate:modelValue":r[4]||(r[4]=i=>R(t).powerGlitchOptions.shake.velocity=i),title:"Velocity (steps/s)",min:1,max:60,step:1},null,8,["modelValue","title"])):pn("",!0),Td,Y(gn,{modelValue:R(t).powerGlitchOptions.glitchTimeSpan,"onUpdate:modelValue":r[5]||(r[5]=i=>R(t).powerGlitchOptions.glitchTimeSpan=i),title:"Enabled",getDefaultValue:i=>i?R(Zt)().glitchTimeSpan:!1},null,8,["modelValue","getDefaultValue"]),R(t).powerGlitchOptions.glitchTimeSpan?(xe(),Re(ye,{key:1},[Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.glitchTimeSpan.start,"onUpdate:modelValue":r[6]||(r[6]=i=>R(t).powerGlitchOptions.glitchTimeSpan.start=i),title:"Start time (%)",min:0,max:1,step:.01,factor:100},null,8,["modelValue","title","min","max","step"]),Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.glitchTimeSpan.end,"onUpdate:modelValue":r[7]||(r[7]=i=>R(t).powerGlitchOptions.glitchTimeSpan.end=i),title:"End time (%)",min:0,max:1,step:.01,factor:100},null,8,["modelValue","title","min","max","step"])],64)):pn("",!0),Nd,Y(gn,{modelValue:R(t).powerGlitchOptions.shake,"onUpdate:modelValue":r[8]||(r[8]=i=>R(t).powerGlitchOptions.shake=i),title:"Enabled",getDefaultValue:i=>i?R(Zt)().shake:!1},null,8,["modelValue","getDefaultValue"]),R(t).powerGlitchOptions.shake?(xe(),Re(ye,{key:2},[Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.shake.velocity,"onUpdate:modelValue":r[9]||(r[9]=i=>R(t).powerGlitchOptions.shake.velocity=i),title:"Velocity (steps/s)",min:1,max:60,step:1},null,8,["modelValue","title"]),Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.shake.amplitudeX,"onUpdate:modelValue":r[10]||(r[10]=i=>R(t).powerGlitchOptions.shake.amplitudeX=i),title:"X amplitude (%)",min:0,max:2,step:.01,factor:100},null,8,["modelValue","title","min","max","step"]),Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.shake.amplitudeY,"onUpdate:modelValue":r[11]||(r[11]=i=>R(t).powerGlitchOptions.shake.amplitudeY=i),title:"Y amplitude (%)",min:0,max:2,step:.01,factor:100},null,8,["modelValue","title","min","max","step"])],64)):pn("",!0),Md,Y(gn,{modelValue:R(t).powerGlitchOptions.slices,"onUpdate:modelValue":r[12]||(r[12]=i=>R(t).powerGlitchOptions.slices=i),title:"Enabled",getDefaultValue:i=>i?R(Zt)().slices:!1},null,8,["modelValue","getDefaultValue"]),R(t).powerGlitchOptions.slices?(xe(),Re(ye,{key:3},[Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.slices.count,"onUpdate:modelValue":r[13]||(r[13]=i=>R(t).powerGlitchOptions.slices.count=i),title:"Count (slices/step)",min:1,max:60,step:1},null,8,["modelValue","title"]),Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.slices.velocity,"onUpdate:modelValue":r[14]||(r[14]=i=>R(t).powerGlitchOptions.slices.velocity=i),title:"Velocity (steps/s)",min:1,max:60,step:1},null,8,["modelValue","title"]),Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.slices.minHeight,"onUpdate:modelValue":r[15]||(r[15]=i=>R(t).powerGlitchOptions.slices.minHeight=i),title:"Min slice height (%)",min:.01,max:1,step:.01,factor:100},null,8,["modelValue","title","min","max","step"]),Y(ke,{class:"mt-1",modelValue:R(t).powerGlitchOptions.slices.maxHeight,"onUpdate:modelValue":r[16]||(r[16]=i=>R(t).powerGlitchOptions.slices.maxHeight=i),title:"Max slice height (%)",min:.01,max:1,step:.01,factor:100},null,8,["modelValue","title","min","max","step"]),Y(yd,{class:"mt-1",modelValue:R(t).powerGlitchOptions.slices.hueRotate,"onUpdate:modelValue":r[17]||(r[17]=i=>R(t).powerGlitchOptions.slices.hueRotate=i),title:"Hue rotate"},null,8,["modelValue"])],64)):pn("",!0)])}}};const Rd=(e,t)=>{const n=e.__vccOpts||e;for(const[r,a]of t)n[r]=a;return n},Fd={__name:"ImagePreview",setup(e){const t=jt(),n=ra(null),r=()=>{!n.value||ed.install(n.value,t.powerGlitchOptions)};return po(r),It(r),(a,i)=>(xe(),Re("div",null,[W("div",{ref_key:"container",ref:n,class:"glitch"},null,512)]))}},Ld=Rd(Fd,[["__scopeId","data-v-a14c2e49"]]),jd={class:"app h-full grid grid-cols-12"},Dd={class:"col-span-4 border p-4 overflow-y-auto"},zd={class:"col-span-8 flex flex-col"},Ud={class:"grow flex flex-col justify-center"},Vd={__name:"App",setup(e){return(t,n)=>(xe(),Re("div",jd,[W("div",Dd,[Y($d)]),W("div",zd,[W("div",Ud,[Y(Ld,{class:"mx-auto"})])])]))}},Hd=Hf();zf(Vd).use(Hd).component("fa",Yu).mount("#app");
diff --git a/docs/index.html b/docs/index.html
index 29b595a..556a112 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>PowerGlitch</title>
-    <script type="module" crossorigin src="/assets/index.9e90e0d2.js"></script>
-    <link rel="stylesheet" href="/assets/index.a83637d7.css">
+    <script type="module" crossorigin src="/powerglitch/assets/index.9e90e0d2.js"></script>
+    <link rel="stylesheet" href="/powerglitch/assets/index.a83637d7.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/vite.config.js b/vite.config.js
index 775af45..9975af5 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,6 +3,8 @@ import vue from '@vitejs/plugin-vue';
 import path from 'path';
 
 export default defineConfig({
+    base: '/powerglitch/',
+
     root: 'docs-src/',
     build: {
         outDir: '../docs',