- 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.8kb minified and gzipped and 4kb minified.
+ 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 less than 2kb minified and gzipped.
What are you waiting for?
"),-1)),fb=_e(()=>O("p",{class:"mt-2"}," It is also possible to glitch images directly ",-1)),db=_e(()=>O("p",{class:"mt-2"}," for images, call PowerGlitch.glitch() without specifying the imageUrl ",-1)),hb=_e(()=>O("p",{class:"mt-2"}," this replaces the image with its glitched version. ",-1)),mb=_e(()=>O("h1",{class:"font-bold mt-8"}," \u26AB Passing reference ",-1)),pb=_e(()=>O("p",{class:"mt-2"}," If you already have a reference to the element to glitch, you can directly pass it as the first argument ",-1)),gb=_e(()=>O("h1",{class:"font-bold mt-8"}," \u{1F7E2} Customize glitch ",-1)),bb=_e(()=>O("p",{class:"mt-2"}," By default, PowerGlitch will glitch images using a set of hardcoded default values that look good for most images. However, you can customize the applied glitch by passing a custom options object as the second argument to PowerGlitch.glitch(). ",-1)),vb=_e(()=>O("p",{class:"mt-2"}," options are merged with the defaults, so you can override only values you want ",-1)),yb={class:"mt-2"},wb=pe(" to find the perfect set of options for your image, "),_b=pe(" use the playground "),xb=_e(()=>O("h1",{class:"font-bold mt-8"}," \u{1F7E1} API reference ",-1)),Eb=_e(()=>O("p",{class:"mt-2 pb-8"},[pe(" To know what options are accepted and what they mean, "),O("a",{class:"underline",target:"_blank",href:"https://github.com/7PH/powerglitch/blob/master/src/index.ts#L1"}," refer to the TypeScript type definitions "),pe(". ")],-1)),Ab={__name:"UsageView",setup(e){const t=ze(null);return un(()=>{st.glitch(t.value,{imageUrl:Ca})}),(n,r)=>{const i=Qe("fa"),a=Qe("RouterLink"),o=Qe("highlightjs"),s=Qe("router-link");return ye(),Re("div",Yg,[O("p",Kg,[O("a",Wg,[H(i,{icon:"fa-brands fa-github"})])]),O("div",qg,[O("div",{ref_key:"logoGlitch",ref:t,style:{width:"60px",height:"60px"}},null,512),Xg]),Qg,O("div",Zg,[H(a,{to:"/",class:"underline"},{default:We(()=>[Jg]),_:1}),H(a,{to:"/usage",class:""},{default:We(()=>[eb]),_:1}),H(a,{to:"/playground",class:"underline"},{default:We(()=>[tb]),_:1}),nb]),rb,ib,ab,ob,H(o,{class:"rounded-xl overflow-hidden mt-2",language:"html",code:""}),sb,H(o,{class:"rounded-xl overflow-hidden mt-2",language:"css",code:`
+`.trim()},null,8,["code"]),A("p",Dg,[Bg,H(c,{to:"/usage",class:"underline"},{default:qe(()=>[jg]),_:1}),Fg]),Ug,zg])}}},Gg=Xn(Hg,[["__scopeId","data-v-8cf0fa22"]]);const _e=e=>(js("data-v-69a3736d"),e=e(),Fs(),e),Vg={class:"app w-full mx-auto mb-8 mt-16 md:mt-8 px-4"},Yg={class:"fixed right-0 top-0 mx-6 my-4 text-4xl"},Kg={href:"https://github.com/7ph/powerglitch",target:"_blank"},Wg={class:"mt-8 font-bold text-5xl flex gap-4 justify-center"},qg=_e(()=>A("div",{class:"mt-1"}," PowerGlitch ",-1)),Xg=_e(()=>A("p",{class:"text-center mt-4 text-lg"}," A tiny library to glitch images on the web. ",-1)),Qg={class:"mt-2 flex justify-center gap-4"},Zg=ge(" home "),Jg=ge(" usage "),eb=ge(" playground "),tb=_e(()=>A("a",{target:"_blank",href:"https://github.com/7PH/powerglitch",class:"underline"}," github ",-1)),nb=_e(()=>A("h1",{class:"font-bold mt-8"}," \u26AA Intro ",-1)),rb=_e(()=>A("p",{class:"mt-2"}," This simple guide will walk you through the basic usage of the library. ",-1)),ib=_e(()=>A("h1",{class:"font-bold mt-8"}," \u{1F7E3} Glitching "+ht("
"),-1)),ub=_e(()=>A("p",{class:"mt-2"}," It is also possible to glitch images directly ",-1)),fb=_e(()=>A("p",{class:"mt-2"}," for images, call PowerGlitch.glitch() without specifying the imageUrl ",-1)),db=_e(()=>A("p",{class:"mt-2"}," this replaces the image with its glitched version. ",-1)),hb=_e(()=>A("h1",{class:"font-bold mt-8"}," \u26AB Passing reference ",-1)),mb=_e(()=>A("p",{class:"mt-2"}," If you already have a reference to the element to glitch, you can directly pass it as the first argument ",-1)),pb=_e(()=>A("h1",{class:"font-bold mt-8"}," \u{1F7E2} Customize glitch ",-1)),gb=_e(()=>A("p",{class:"mt-2"}," By default, PowerGlitch will glitch images using a set of hardcoded default values that look good for most images. However, you can customize the applied glitch by passing a custom options object as the second argument to PowerGlitch.glitch(). ",-1)),bb=_e(()=>A("p",{class:"mt-2"}," options are merged with the defaults, so you can override only values you want ",-1)),vb={class:"mt-2"},yb=ge(" to find the perfect set of options for your image, "),wb=ge(" use the playground "),_b=_e(()=>A("h1",{class:"font-bold mt-8"}," \u{1F7E1} API reference ",-1)),xb=_e(()=>A("p",{class:"mt-2 pb-8"},[ge(" To know what options are accepted and what they mean, "),A("a",{class:"underline",target:"_blank",href:"https://github.com/7PH/powerglitch/blob/master/src/index.ts#L1"}," refer to the TypeScript type definitions "),ge(". ")],-1)),Eb={__name:"UsageView",setup(e){const t=ze(null);return un(()=>{Be.glitch(t.value,{imageUrl:Ca})}),(n,r)=>{const i=Ze("fa"),a=Ze("RouterLink"),o=Ze("highlightjs"),s=Ze("router-link");return ye(),Re("div",Vg,[A("p",Yg,[A("a",Kg,[H(i,{icon:"fa-brands fa-github"})])]),A("div",Wg,[A("div",{ref_key:"logoGlitch",ref:t,style:{width:"60px",height:"60px"}},null,512),qg]),Xg,A("div",Qg,[H(a,{to:"/",class:"underline"},{default:qe(()=>[Zg]),_:1}),H(a,{to:"/usage",class:""},{default:qe(()=>[Jg]),_:1}),H(a,{to:"/playground",class:"underline"},{default:qe(()=>[eb]),_:1}),tb]),nb,rb,ib,ab,H(o,{class:"rounded-xl overflow-hidden mt-2",language:"html",code:""}),ob,H(o,{class:"rounded-xl overflow-hidden mt-2",language:"css",code:`
.glitch {
width: 80px;
height: 80px;
}
-`.trim()},null,8,["code"]),lb,H(o,{class:"rounded-xl overflow-hidden mt-2",language:"js",code:`
+`.trim()},null,8,["code"]),sb,H(o,{class:"rounded-xl overflow-hidden mt-2",language:"js",code:`
PowerGlitch.glitch('div.glitch', {
imageUrl: 'https://.../image.png'
})
-`.trim()},null,8,["code"]),cb,ub,fb,H(o,{class:"rounded-xl overflow-hidden mt-2",language:"html",code:"
"},null,8,["code"]),db,H(o,{class:"rounded-xl overflow-hidden mt-2",language:"js",code:`
+`.trim()},null,8,["code"]),lb,cb,ub,H(o,{class:"rounded-xl overflow-hidden mt-2",language:"html",code:"
"},null,8,["code"]),fb,H(o,{class:"rounded-xl overflow-hidden mt-2",language:"js",code:`
PowerGlitch.glitch('img.glitch')
-`.trim()},null,8,["code"]),hb,mb,pb,H(o,{class:"rounded-xl overflow-hidden mt-2",language:"js",code:`
+`.trim()},null,8,["code"]),db,hb,mb,H(o,{class:"rounded-xl overflow-hidden mt-2",language:"js",code:`
const image = document.querySelector('img.glitch')
PowerGlitch.glitch(image)
-`.trim()},null,8,["code"]),gb,bb,H(o,{class:"rounded-xl overflow-hidden mt-2",language:"js",code:`
+`.trim()},null,8,["code"]),pb,gb,H(o,{class:"rounded-xl overflow-hidden mt-2",language:"js",code:`
PowerGlitch.glitch(
'div.glitch',
{
imageUrl: 'https://.../image.png',
+ playMode: 'always',
backgroundColor: 'transparent',
hideOverflow: true,
timing: {
@@ -823,7 +824,7 @@ PowerGlitch.glitch(
},
}
)
-`.trim()},null,8,["code"]),vb,H(o,{class:"rounded-xl overflow-hidden mt-2",language:"js",code:`
+`.trim()},null,8,["code"]),bb,H(o,{class:"rounded-xl overflow-hidden mt-2",language:"js",code:`
PowerGlitch.glitch(
'div.glitch',
{
@@ -832,4 +833,4 @@ PowerGlitch.glitch(
shake: false,
}
)
-`.trim()},null,8,["code"]),O("p",yb,[wb,H(s,{to:"/playground",class:"underline"},{default:We(()=>[_b]),_:1})]),xb,Eb])}}},kb=Xn(Ab,[["__scopeId","data-v-131b5b79"]]),Ob="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAABYAAAAWAF42ktiAAABv0lEQVRYhcWWv0vDQBTHvxXRQymmk6MgVNzM4OBmh/wB+hfY5j9wEoKDDnUW/4AaZ5e6OXSof0HtJGTxx9ZijaVIiwiRgwuEI8ndJZf2wUEuubvv5+7dey+lIAiwSFvSrW3ZvmHZ/rXseO0AANoAvhcCYNm+C+AQQFd2jrY7wMRP6HOnVSnJztNyApbt10NxAE8qc3MDMPHbyKv23AAs2zc5caj4n1rmO8DEqdhG5PW406oYKutkOgEa6zHiUN19JoAU8fkAMJG9lG/FAbBYTxKn/n8uDCCaaBJMeffSAFyiibV9/2M027kyVQGEYRiTaGLtpneP7Z/P8NM7gDd2Kl3iOYmnsywQpze+LhJf//uNilPbYs0UZUbpRMRgTNaM3cng7GtljQxXyzgYveL85ZGfMgZQI56TejEzZULm617YH5AyNmcTftgx8RxhXchaC2rRTox4Q0ZcGwBnl8RzXNmFdAPcEc+5UFlIGYD5P64OPBDPEUZMboCE3fdlwrUogD4LN+k/YZ0ANNbrWcWVATj/SyUarQDc7o/yiucBaKQVmKIBTlUSjdBoLZBp02rTnFabrux42aYCYOgWD4IA/9YKT2ODwKOHAAAAAElFTkSuQmCC",Ia=Hf("main",{state:()=>({powerGlitchOptions:{...st.getDefaultOptions(),imageUrl:Ca}}),actions:{setOptions(e){this.powerGlitchOptions={...this.powerGlitchOptions,...e}}}}),Sb={class:"pl-4 text-sm grid grid-cols-12"},Cb={class:"col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0"},Rb={class:"col-span-8 flex gap-4 overflow-x-hidden"},Ib=["value"],Tb=O("option",{value:"true"}," Yes ",-1),Pb=O("option",{value:"false"}," No ",-1),Nb=[Tb,Pb],kn={__name:"ToggleGroupOption",props:{modelValue:{type:[String,Number,Boolean,Object],required:!0},title:{type:String,required:!0},getDefaultValue:{type:Function,required:!0}},emits:["update:modelValue"],setup(e){return(t,n)=>(ye(),Re("div",Sb,[O("div",Cb,ht(e.title),1),O("div",Rb,[O("select",{class:"w-20",value:!!e.modelValue,onInput:n[0]||(n[0]=r=>t.$emit("update:modelValue",e.getDefaultValue(r.target.value==="true")))},Nb,40,Ib)])]))}},Mb={class:"pl-4 text-sm grid grid-cols-12"},Lb={class:"col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0"},Db={class:"col-span-8 flex gap-4 overflow-x-hidden"},$b=["placeholder","value"],os={__name:"StringOption",props:{modelValue:{type:String,required:!0},title:{type:String,required:!0}},emits:["update:modelValue"],setup(e){return(t,n)=>(ye(),Re("div",Mb,[O("div",Lb,ht(e.title),1),O("div",Db,[O("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,$b)])]))}},Bb={class:"pl-4 text-sm grid grid-cols-12"},jb={class:"col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0"},Fb={class:"col-span-8 flex gap-4 overflow-x-hidden"},Ub=["value"],zb=["value"],Hb={__name:"SelectOption",props:{modelValue:{type:String,required:!0},title:{type:String,required:!0},values:{type:Array,required:!0}},emits:["update:modelValue"],setup(e){return(t,n)=>(ye(),Re("div",Bb,[O("div",jb,ht(e.title),1),O("div",Fb,[O("select",{class:"w-full",value:e.modelValue,onInput:n[0]||(n[0]=r=>t.$emit("update:modelValue",r.target.value))},[(ye(!0),Re(Me,null,Lu(e.values,r=>(ye(),Re("option",{key:r,value:r},ht(r),9,zb))),128))],40,Ub)])]))}},Gb={class:"pl-4 text-sm grid grid-cols-12"},Vb={class:"col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0"},Yb={class:"col-span-8 flex gap-4 overflow-x-hidden"},Kb=["value"],Wb=O("option",{value:"true"}," Yes ",-1),qb=O("option",{value:"false"}," No ",-1),Xb=[Wb,qb],ss={__name:"BooleanOption",props:{modelValue:{type:Boolean,required:!0},title:{type:String,required:!0}},emits:["update:modelValue"],setup(e){return(t,n)=>(ye(),Re("div",Gb,[O("div",Vb,ht(e.title),1),O("div",Yb,[O("select",{class:"w-20",value:e.modelValue,onInput:n[0]||(n[0]=r=>t.$emit("update:modelValue",r.target.value==="true"))},Xb,40,Kb)])]))}},Qb={class:"pl-4 text-sm grid grid-cols-12"},Zb={class:"col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0"},Jb={class:"col-span-8 flex gap-4 overflow-x-hidden"},ev=["value","min","max"],tv=["value","min","max","step"],Ye={__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(t,n)=>(ye(),Re("div",Qb,[O("div",Zb,ht(e.title),1),O("div",Jb,[O("input",{class:"w-20",type:"number",value:e.modelValue*e.factor,min:e.min*e.factor,max:e.max*e.factor,onChange:n[0]||(n[0]=r=>t.$emit("update:modelValue",parseInt(r.target.value)/e.factor))},null,40,ev),O("input",{value:e.modelValue*e.factor,type:"range",min:e.min*e.factor,max:e.max*e.factor,step:e.step*e.factor,onInput:n[1]||(n[1]=r=>t.$emit("update:modelValue",parseInt(r.target.value)/e.factor))},null,40,tv)])]))}},nv={class:"px-4"},rv=O("div",{class:"font-bold mt-6 mb-2 pl-2"}," Global ",-1),iv=O("div",{class:"font-bold mt-6 mb-2 pl-2"}," Timing ",-1),av=O("div",{class:"font-bold mt-6 mb-2 pl-2"}," Restrict glitch time span ",-1),ov=O("div",{class:"font-bold mt-6 mb-2 pl-2"}," Shake ",-1),sv=O("div",{class:"font-bold mt-6 mb-2 pl-2"}," Slice ",-1),lv={__name:"OptionPanel",setup(e){const t=Ia();return(n,r)=>(ye(),Re("div",nv,[rv,H(os,{modelValue:K(t).powerGlitchOptions.imageUrl,"onUpdate:modelValue":r[0]||(r[0]=i=>K(t).powerGlitchOptions.imageUrl=i),class:"mt-1",title:"Image"},null,8,["modelValue"]),H(os,{modelValue:K(t).powerGlitchOptions.backgroundColor,"onUpdate:modelValue":r[1]||(r[1]=i=>K(t).powerGlitchOptions.backgroundColor=i),class:"mt-1",title:"Background color"},null,8,["modelValue"]),H(ss,{modelValue:K(t).powerGlitchOptions.hideOverflow,"onUpdate:modelValue":r[2]||(r[2]=i=>K(t).powerGlitchOptions.hideOverflow=i),class:"mt-1",title:"Hide overflow"},null,8,["modelValue"]),iv,H(Ye,{modelValue:K(t).powerGlitchOptions.timing.duration,"onUpdate:modelValue":r[3]||(r[3]=i=>K(t).powerGlitchOptions.timing.duration=i),class:"mt-1",title:"Loop duration (ms)",min:500,max:1e4,step:100},null,8,["modelValue","title"]),H(kn,{class:"mt-1",modelValue:K(t).powerGlitchOptions.timing.iterations===1/0,title:"Repeat indefinitely",getDefaultValue:i=>i?1/0:1,"onUpdate:modelValue":r[4]||(r[4]=i=>K(t).powerGlitchOptions.timing.iterations=i)},null,8,["modelValue","getDefaultValue"]),K(t).powerGlitchOptions.timing.iterations<1/0?(ye(),br(Ye,{key:0,modelValue:K(t).powerGlitchOptions.timing.iterations,"onUpdate:modelValue":r[5]||(r[5]=i=>K(t).powerGlitchOptions.timing.iterations=i),class:"mt-1",title:"Repeat count",min:1,max:60,step:1},null,8,["modelValue"])):jt("",!0),H(kn,{class:"mt-1",modelValue:!!K(t).powerGlitchOptions.timing.easing,title:"Smooth transition",getDefaultValue:i=>i?"ease-in-out":void 0,"onUpdate:modelValue":r[6]||(r[6]=i=>K(t).powerGlitchOptions.timing.easing=i)},null,8,["modelValue","getDefaultValue"]),K(t).powerGlitchOptions.timing.easing?(ye(),br(Hb,{key:1,modelValue:K(t).powerGlitchOptions.timing.easing,"onUpdate:modelValue":r[7]||(r[7]=i=>K(t).powerGlitchOptions.timing.easing=i),class:"mt-1",title:"Easing",values:["ease-in-out","ease-in","ease-out","linear"]},null,8,["modelValue"])):jt("",!0),av,H(kn,{modelValue:K(t).powerGlitchOptions.glitchTimeSpan,"onUpdate:modelValue":r[8]||(r[8]=i=>K(t).powerGlitchOptions.glitchTimeSpan=i),title:"Enabled",getDefaultValue:i=>i?n.PowerGlitch.getDefaultOptions().glitchTimeSpan:!1},null,8,["modelValue","getDefaultValue"]),K(t).powerGlitchOptions.glitchTimeSpan?(ye(),Re(Me,{key:2},[H(Ye,{modelValue:K(t).powerGlitchOptions.glitchTimeSpan.start,"onUpdate:modelValue":r[9]||(r[9]=i=>K(t).powerGlitchOptions.glitchTimeSpan.start=i),class:"mt-1",title:"Start time (%)",min:0,max:1,step:.01,factor:100},null,8,["modelValue","title","min","max","step"]),H(Ye,{modelValue:K(t).powerGlitchOptions.glitchTimeSpan.end,"onUpdate:modelValue":r[10]||(r[10]=i=>K(t).powerGlitchOptions.glitchTimeSpan.end=i),class:"mt-1",title:"End time (%)",min:0,max:1,step:.01,factor:100},null,8,["modelValue","title","min","max","step"])],64)):jt("",!0),ov,H(kn,{modelValue:K(t).powerGlitchOptions.shake,"onUpdate:modelValue":r[11]||(r[11]=i=>K(t).powerGlitchOptions.shake=i),title:"Enabled",getDefaultValue:i=>i?n.PowerGlitch.getDefaultOptions().shake:!1},null,8,["modelValue","getDefaultValue"]),K(t).powerGlitchOptions.shake?(ye(),Re(Me,{key:3},[H(Ye,{modelValue:K(t).powerGlitchOptions.shake.velocity,"onUpdate:modelValue":r[12]||(r[12]=i=>K(t).powerGlitchOptions.shake.velocity=i),class:"mt-1",title:"Velocity (steps/s)",min:1,max:60,step:1},null,8,["modelValue","title"]),H(Ye,{modelValue:K(t).powerGlitchOptions.shake.amplitudeX,"onUpdate:modelValue":r[13]||(r[13]=i=>K(t).powerGlitchOptions.shake.amplitudeX=i),class:"mt-1",title:"X amplitude (%)",min:0,max:2,step:.01,factor:100},null,8,["modelValue","title","min","max","step"]),H(Ye,{modelValue:K(t).powerGlitchOptions.shake.amplitudeY,"onUpdate:modelValue":r[14]||(r[14]=i=>K(t).powerGlitchOptions.shake.amplitudeY=i),class:"mt-1",title:"Y amplitude (%)",min:0,max:2,step:.01,factor:100},null,8,["modelValue","title","min","max","step"])],64)):jt("",!0),sv,H(kn,{modelValue:K(t).powerGlitchOptions.slice,"onUpdate:modelValue":r[15]||(r[15]=i=>K(t).powerGlitchOptions.slice=i),title:"Enabled",getDefaultValue:i=>i?n.PowerGlitch.getDefaultOptions().slice:!1},null,8,["modelValue","getDefaultValue"]),K(t).powerGlitchOptions.slice?(ye(),Re(Me,{key:4},[H(Ye,{modelValue:K(t).powerGlitchOptions.slice.count,"onUpdate:modelValue":r[16]||(r[16]=i=>K(t).powerGlitchOptions.slice.count=i),class:"mt-1",title:"Count (slice/step)",min:1,max:60,step:1},null,8,["modelValue","title"]),H(Ye,{modelValue:K(t).powerGlitchOptions.slice.velocity,"onUpdate:modelValue":r[17]||(r[17]=i=>K(t).powerGlitchOptions.slice.velocity=i),class:"mt-1",title:"Velocity (steps/s)",min:1,max:60,step:1},null,8,["modelValue","title"]),H(Ye,{modelValue:K(t).powerGlitchOptions.slice.minHeight,"onUpdate:modelValue":r[18]||(r[18]=i=>K(t).powerGlitchOptions.slice.minHeight=i),class:"mt-1",title:"Min slice height (%)",min:.01,max:1,step:.01,factor:100},null,8,["modelValue","title","min","max","step"]),H(Ye,{modelValue:K(t).powerGlitchOptions.slice.maxHeight,"onUpdate:modelValue":r[19]||(r[19]=i=>K(t).powerGlitchOptions.slice.maxHeight=i),class:"mt-1",title:"Max slice height (%)",min:.01,max:1,step:.01,factor:100},null,8,["modelValue","title","min","max","step"]),H(ss,{modelValue:K(t).powerGlitchOptions.slice.hueRotate,"onUpdate:modelValue":r[20]||(r[20]=i=>K(t).powerGlitchOptions.slice.hueRotate=i),class:"mt-1",title:"Hue rotate"},null,8,["modelValue"])],64)):jt("",!0)]))}},cv={class:"px-4"},uv=O("p",null,"Copy the options object below in your app",-1),fv=["textContent"],dv={__name:"ExportPanel",setup(e){const t=Ia(),n=ze(null),r=()=>{let i=new Range;i.setStart(n.value,0),i.setEnd(n.value,1),document.getSelection().removeAllRanges(),document.getSelection().addRange(i)};return(i,a)=>(ye(),Re("div",cv,[uv,O("pre",{ref_key:"preRef",ref:n,class:"bg-white p-4 rounded shadow overflow-auto",onClick:r,textContent:ht(JSON.stringify(K(t).powerGlitchOptions,(o,s)=>o==="iterations"&&s===1/0?void 0:s,2))},null,8,fv)]))}};const hv={__name:"ImagePreview",setup(e){const t=Ia(),n=ze(null),r=()=>{!n.value||st.glitch(n.value,t.powerGlitchOptions)};return un(r),Pt(r),(i,a)=>(ye(),Re("div",null,[O("div",{ref_key:"container",ref:n,class:"glitch"},null,512)]))}},mv=Xn(hv,[["__scopeId","data-v-70a7c861"]]);const pv={class:"app h-full flex flex-row w-full"},gv={class:"fixed right-0 top-0 mx-6 my-4 text-4xl"},bv=pe(" \u{1F519} "),vv={class:"option-panel border p-4 overflow-y-auto"},yv={class:"font-bold text-xl mb-4 flex"},wv={class:"grow flex gap-2"},_v=pe(" PowerGlitch "),xv={title:"Github",target:"_blank",href:"https://github.com/7PH/powerglitch"},Ev={class:"grow flex flex-col bg-white"},Av={class:"grow flex flex-col justify-center"},kv={__name:"PlaygroundView",setup(e){const t=ze(null);un(()=>{st.glitch(t.value,{...st.getDefaultOptions(),imageUrl:Ob})});const n=ze("options");return(r,i)=>{const a=Qe("RouterLink"),o=Qe("fa");return ye(),Re("div",pv,[O("p",gv,[H(a,{to:"/"},{default:We(()=>[bv]),_:1})]),O("div",vv,[O("div",yv,[O("div",wv,[O("div",{ref_key:"logoGlitch",ref:t,style:{width:"30px",height:"30px"}},null,512),_v]),O("div",null,[O("a",xv,[H(o,{icon:"fa-brands fa-github"})])])]),n.value==="options"?(ye(),Re(Me,{key:0},[H(lv),O("button",{class:"mt-6 w-full",onClick:i[0]||(i[0]=s=>n.value="export")}," Show code ")],64)):jt("",!0),n.value==="export"?(ye(),Re(Me,{key:1},[H(dv),O("button",{class:"mt-6 w-full",onClick:i[1]||(i[1]=s=>n.value="options")}," Back to options ")],64)):jt("",!0)]),O("div",Ev,[O("div",Av,[H(mv,{class:"mx-auto"})])])])}}},Ov=Xn(kv,[["__scopeId","data-v-e0651c47"]]);ln.registerLanguage("javascript",Gp);ln.registerLanguage("css",Qp);ln.registerLanguage("shell",Zp);tg();const Sv=Bf(),Cv=Kd({history:ld(),routes:[{name:"home",path:"/",component:Vg},{name:"usage",path:"/usage",component:kb},{name:"playground",path:"/playground",component:Ov}]});Lf(ig).use(Cv).use(Sv).component("fa",Vm).use(Jp).mount("#app");
+`.trim()},null,8,["code"]),A("p",vb,[yb,H(s,{to:"/playground",class:"underline"},{default:qe(()=>[wb]),_:1})]),_b,xb])}}},Ab=Xn(Eb,[["__scopeId","data-v-69a3736d"]]),kb="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAABYAAAAWAF42ktiAAABv0lEQVRYhcWWv0vDQBTHvxXRQymmk6MgVNzM4OBmh/wB+hfY5j9wEoKDDnUW/4AaZ5e6OXSof0HtJGTxx9ZijaVIiwiRgwuEI8ndJZf2wUEuubvv5+7dey+lIAiwSFvSrW3ZvmHZ/rXseO0AANoAvhcCYNm+C+AQQFd2jrY7wMRP6HOnVSnJztNyApbt10NxAE8qc3MDMPHbyKv23AAs2zc5caj4n1rmO8DEqdhG5PW406oYKutkOgEa6zHiUN19JoAU8fkAMJG9lG/FAbBYTxKn/n8uDCCaaBJMeffSAFyiibV9/2M027kyVQGEYRiTaGLtpneP7Z/P8NM7gDd2Kl3iOYmnsywQpze+LhJf//uNilPbYs0UZUbpRMRgTNaM3cng7GtljQxXyzgYveL85ZGfMgZQI56TejEzZULm617YH5AyNmcTftgx8RxhXchaC2rRTox4Q0ZcGwBnl8RzXNmFdAPcEc+5UFlIGYD5P64OPBDPEUZMboCE3fdlwrUogD4LN+k/YZ0ANNbrWcWVATj/SyUarQDc7o/yiucBaKQVmKIBTlUSjdBoLZBp02rTnFabrux42aYCYOgWD4IA/9YKT2ODwKOHAAAAAElFTkSuQmCC",Ra=Gf("main",{state:()=>({powerGlitchOptions:{...Be.getDefaultOptions("always"),imageUrl:Ca}}),actions:{setOptions(e){this.powerGlitchOptions={...this.powerGlitchOptions,...e}}}}),Ob={class:"pl-4 text-sm grid grid-cols-12"},Sb={class:"col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0"},Cb={class:"col-span-8 flex gap-4 overflow-x-hidden"},Rb=["value"],Ib=A("option",{value:"true"}," Yes ",-1),Tb=A("option",{value:"false"}," No ",-1),Nb=[Ib,Tb],kn={__name:"ToggleGroupOption",props:{modelValue:{type:[String,Number,Boolean,Object],required:!0},title:{type:String,required:!0},getDefaultValue:{type:Function,required:!0}},emits:["update:modelValue"],setup(e){return(t,n)=>(ye(),Re("div",Ob,[A("div",Sb,ht(e.title),1),A("div",Cb,[A("select",{class:"w-20",value:!!e.modelValue,onInput:n[0]||(n[0]=r=>t.$emit("update:modelValue",e.getDefaultValue(r.target.value==="true")))},Nb,40,Rb)])]))}},Pb={class:"pl-4 text-sm grid grid-cols-12"},Mb={class:"col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0"},Lb={class:"col-span-8 flex gap-4 overflow-x-hidden"},$b=["placeholder","value"],as={__name:"StringOption",props:{modelValue:{type:String,required:!0},title:{type:String,required:!0}},emits:["update:modelValue"],setup(e){return(t,n)=>(ye(),Re("div",Pb,[A("div",Mb,ht(e.title),1),A("div",Lb,[A("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,$b)])]))}},Db={class:"pl-4 text-sm grid grid-cols-12"},Bb={class:"col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0"},jb={class:"col-span-8 flex gap-4 overflow-x-hidden"},Fb=["value"],Ub=["value"],os={__name:"SelectOption",props:{modelValue:{type:String,required:!0},title:{type:String,required:!0},values:{type:Array,required:!0}},emits:["update:modelValue"],setup(e){return(t,n)=>(ye(),Re("div",Db,[A("div",Bb,ht(e.title),1),A("div",jb,[A("select",{class:"w-full",value:e.modelValue,onInput:n[0]||(n[0]=r=>t.$emit("update:modelValue",r.target.value))},[(ye(!0),Re(Me,null,$u(e.values,r=>(ye(),Re("option",{key:r,value:r},ht(r),9,Ub))),128))],40,Fb)])]))}},zb={class:"pl-4 text-sm grid grid-cols-12"},Hb={class:"col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0"},Gb={class:"col-span-8 flex gap-4 overflow-x-hidden"},Vb=["value"],Yb=A("option",{value:"true"}," Yes ",-1),Kb=A("option",{value:"false"}," No ",-1),Wb=[Yb,Kb],ss={__name:"BooleanOption",props:{modelValue:{type:Boolean,required:!0},title:{type:String,required:!0}},emits:["update:modelValue"],setup(e){return(t,n)=>(ye(),Re("div",zb,[A("div",Hb,ht(e.title),1),A("div",Gb,[A("select",{class:"w-20",value:e.modelValue,onInput:n[0]||(n[0]=r=>t.$emit("update:modelValue",r.target.value==="true"))},Wb,40,Vb)])]))}},qb={class:"pl-4 text-sm grid grid-cols-12"},Xb={class:"col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0"},Qb={class:"col-span-8 flex gap-4 overflow-x-hidden"},Zb=["value","min","max"],Jb=["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(t,n)=>(ye(),Re("div",qb,[A("div",Xb,ht(e.title),1),A("div",Qb,[A("input",{class:"w-20",type:"number",value:e.modelValue*e.factor,min:e.min*e.factor,max:e.max*e.factor,onChange:n[0]||(n[0]=r=>t.$emit("update:modelValue",parseInt(r.target.value)/e.factor))},null,40,Zb),A("input",{value:e.modelValue*e.factor,type:"range",min:e.min*e.factor,max:e.max*e.factor,step:e.step*e.factor,onInput:n[1]||(n[1]=r=>t.$emit("update:modelValue",parseInt(r.target.value)/e.factor))},null,40,Jb)])]))}},ev={class:"px-4"},tv=A("div",{class:"font-bold mt-6 mb-2 pl-2"}," Recommended defaults ",-1),nv={class:"ml-4 flex flex-wrap justify-center gap-2"},rv=A("div",{class:"font-bold mt-6 mb-2 pl-2"}," Global ",-1),iv=A("div",{class:"font-bold mt-6 mb-2 pl-2"}," Timing ",-1),av=A("div",{class:"font-bold mt-6 mb-2 pl-2"}," Restrict glitch time span ",-1),ov=A("div",{class:"font-bold mt-6 mb-2 pl-2"}," Shake ",-1),sv=A("div",{class:"font-bold mt-6 mb-2 pl-2"}," Slice ",-1),lv={__name:"OptionPanel",setup(e){const t=Ra(),n=r=>{const i=Be.getDefaultOptions(r);t.powerGlitchOptions.playMode=r,t.powerGlitchOptions.timing=i.timing,t.powerGlitchOptions.glitchTimeSpan=i.glitchTimeSpan,t.powerGlitchOptions.shake=i.shake,t.powerGlitchOptions.slice=i.slice};return(r,i)=>(ye(),Re("div",ev,[tv,A("div",nv,[A("button",{onClick:i[0]||(i[0]=a=>n("always"))}," Infinite "),A("button",{onClick:i[1]||(i[1]=a=>n("hover-triggered"))}," Once on hover "),A("button",{onClick:i[2]||(i[2]=a=>n("hover-only"))}," Always on hover ")]),rv,H(as,{modelValue:U(t).powerGlitchOptions.imageUrl,"onUpdate:modelValue":i[3]||(i[3]=a=>U(t).powerGlitchOptions.imageUrl=a),class:"mt-1",title:"Image"},null,8,["modelValue"]),H(os,{modelValue:U(t).powerGlitchOptions.playMode,"onUpdate:modelValue":i[4]||(i[4]=a=>U(t).powerGlitchOptions.playMode=a),class:"mt-1",title:"Activate",values:["always","hover-triggered","hover-only"]},null,8,["modelValue"]),H(as,{modelValue:U(t).powerGlitchOptions.backgroundColor,"onUpdate:modelValue":i[5]||(i[5]=a=>U(t).powerGlitchOptions.backgroundColor=a),class:"mt-1",title:"Background color"},null,8,["modelValue"]),H(ss,{modelValue:U(t).powerGlitchOptions.hideOverflow,"onUpdate:modelValue":i[6]||(i[6]=a=>U(t).powerGlitchOptions.hideOverflow=a),class:"mt-1",title:"Hide overflow"},null,8,["modelValue"]),iv,H(Ke,{modelValue:U(t).powerGlitchOptions.timing.duration,"onUpdate:modelValue":i[7]||(i[7]=a=>U(t).powerGlitchOptions.timing.duration=a),class:"mt-1",title:"Loop duration (ms)",min:500,max:1e4,step:100},null,8,["modelValue","title"]),H(kn,{class:"mt-1",modelValue:U(t).powerGlitchOptions.timing.iterations===1/0,title:"Repeat indefinitely",getDefaultValue:a=>a?1/0:1,"onUpdate:modelValue":i[8]||(i[8]=a=>U(t).powerGlitchOptions.timing.iterations=a)},null,8,["modelValue","getDefaultValue"]),U(t).powerGlitchOptions.timing.iterations<1/0?(ye(),br(Ke,{key:0,modelValue:U(t).powerGlitchOptions.timing.iterations,"onUpdate:modelValue":i[9]||(i[9]=a=>U(t).powerGlitchOptions.timing.iterations=a),class:"mt-1",title:"Repeat count",min:1,max:60,step:1},null,8,["modelValue"])):jt("",!0),H(kn,{class:"mt-1",modelValue:!!U(t).powerGlitchOptions.timing.easing,title:"Smooth transition",getDefaultValue:a=>a?"ease-in-out":void 0,"onUpdate:modelValue":i[10]||(i[10]=a=>U(t).powerGlitchOptions.timing.easing=a)},null,8,["modelValue","getDefaultValue"]),U(t).powerGlitchOptions.timing.easing?(ye(),br(os,{key:1,modelValue:U(t).powerGlitchOptions.timing.easing,"onUpdate:modelValue":i[11]||(i[11]=a=>U(t).powerGlitchOptions.timing.easing=a),class:"mt-1",title:"Easing",values:["ease-in-out","ease-in","ease-out","linear"]},null,8,["modelValue"])):jt("",!0),av,H(kn,{modelValue:U(t).powerGlitchOptions.glitchTimeSpan,"onUpdate:modelValue":i[12]||(i[12]=a=>U(t).powerGlitchOptions.glitchTimeSpan=a),title:"Enabled",getDefaultValue:a=>a?U(Be).getDefaultOptions(U(t).powerGlitchOptions.playMode).glitchTimeSpan:!1},null,8,["modelValue","getDefaultValue"]),U(t).powerGlitchOptions.glitchTimeSpan?(ye(),Re(Me,{key:2},[H(Ke,{modelValue:U(t).powerGlitchOptions.glitchTimeSpan.start,"onUpdate:modelValue":i[13]||(i[13]=a=>U(t).powerGlitchOptions.glitchTimeSpan.start=a),class:"mt-1",title:"Start time (%)",min:0,max:1,step:.01,factor:100},null,8,["modelValue","title","min","max","step"]),H(Ke,{modelValue:U(t).powerGlitchOptions.glitchTimeSpan.end,"onUpdate:modelValue":i[14]||(i[14]=a=>U(t).powerGlitchOptions.glitchTimeSpan.end=a),class:"mt-1",title:"End time (%)",min:0,max:1,step:.01,factor:100},null,8,["modelValue","title","min","max","step"])],64)):jt("",!0),ov,H(kn,{modelValue:U(t).powerGlitchOptions.shake,"onUpdate:modelValue":i[15]||(i[15]=a=>U(t).powerGlitchOptions.shake=a),title:"Enabled",getDefaultValue:a=>a?U(Be).getDefaultOptions(U(t).powerGlitchOptions.playMode).shake:!1},null,8,["modelValue","getDefaultValue"]),U(t).powerGlitchOptions.shake?(ye(),Re(Me,{key:3},[H(Ke,{modelValue:U(t).powerGlitchOptions.shake.velocity,"onUpdate:modelValue":i[16]||(i[16]=a=>U(t).powerGlitchOptions.shake.velocity=a),class:"mt-1",title:"Velocity (steps/s)",min:1,max:60,step:1},null,8,["modelValue","title"]),H(Ke,{modelValue:U(t).powerGlitchOptions.shake.amplitudeX,"onUpdate:modelValue":i[17]||(i[17]=a=>U(t).powerGlitchOptions.shake.amplitudeX=a),class:"mt-1",title:"X amplitude (%)",min:0,max:2,step:.01,factor:100},null,8,["modelValue","title","min","max","step"]),H(Ke,{modelValue:U(t).powerGlitchOptions.shake.amplitudeY,"onUpdate:modelValue":i[18]||(i[18]=a=>U(t).powerGlitchOptions.shake.amplitudeY=a),class:"mt-1",title:"Y amplitude (%)",min:0,max:2,step:.01,factor:100},null,8,["modelValue","title","min","max","step"])],64)):jt("",!0),sv,H(kn,{modelValue:U(t).powerGlitchOptions.slice,"onUpdate:modelValue":i[19]||(i[19]=a=>U(t).powerGlitchOptions.slice=a),title:"Enabled",getDefaultValue:a=>a?U(Be).getDefaultOptions(U(t).powerGlitchOptions.playMode).slice:!1},null,8,["modelValue","getDefaultValue"]),U(t).powerGlitchOptions.slice?(ye(),Re(Me,{key:4},[H(Ke,{modelValue:U(t).powerGlitchOptions.slice.count,"onUpdate:modelValue":i[20]||(i[20]=a=>U(t).powerGlitchOptions.slice.count=a),class:"mt-1",title:"Count (slice/step)",min:1,max:60,step:1},null,8,["modelValue","title"]),H(Ke,{modelValue:U(t).powerGlitchOptions.slice.velocity,"onUpdate:modelValue":i[21]||(i[21]=a=>U(t).powerGlitchOptions.slice.velocity=a),class:"mt-1",title:"Velocity (steps/s)",min:1,max:60,step:1},null,8,["modelValue","title"]),H(Ke,{modelValue:U(t).powerGlitchOptions.slice.minHeight,"onUpdate:modelValue":i[22]||(i[22]=a=>U(t).powerGlitchOptions.slice.minHeight=a),class:"mt-1",title:"Min slice height (%)",min:.01,max:1,step:.01,factor:100},null,8,["modelValue","title","min","max","step"]),H(Ke,{modelValue:U(t).powerGlitchOptions.slice.maxHeight,"onUpdate:modelValue":i[23]||(i[23]=a=>U(t).powerGlitchOptions.slice.maxHeight=a),class:"mt-1",title:"Max slice height (%)",min:.01,max:1,step:.01,factor:100},null,8,["modelValue","title","min","max","step"]),H(ss,{modelValue:U(t).powerGlitchOptions.slice.hueRotate,"onUpdate:modelValue":i[24]||(i[24]=a=>U(t).powerGlitchOptions.slice.hueRotate=a),class:"mt-1",title:"Hue rotate"},null,8,["modelValue"])],64)):jt("",!0)]))}},cv={class:"px-4"},uv=A("p",null,"Copy the options object below in your app",-1),fv=["textContent"],dv={__name:"ExportPanel",setup(e){const t=Ra(),n=ze(null),r=()=>{let i=new Range;i.setStart(n.value,0),i.setEnd(n.value,1),document.getSelection().removeAllRanges(),document.getSelection().addRange(i)};return(i,a)=>(ye(),Re("div",cv,[uv,A("pre",{ref_key:"preRef",ref:n,class:"bg-white p-4 rounded shadow overflow-auto",onClick:r,textContent:ht(JSON.stringify(U(t).powerGlitchOptions,(o,s)=>o==="iterations"&&s===1/0?void 0:s,2))},null,8,fv)]))}};const hv={__name:"ImagePreview",setup(e){const t=Ra(),n=ze(null),r=()=>{!n.value||Be.glitch(n.value,t.powerGlitchOptions)};return un(r),Nt(t.powerGlitchOptions,r),(i,a)=>(ye(),Re("div",null,[A("div",{ref_key:"container",ref:n,class:"glitch"},null,512)]))}},mv=Xn(hv,[["__scopeId","data-v-5ce40a34"]]);const pv={class:"app h-full flex flex-row w-full"},gv={class:"fixed right-0 top-0 mx-6 my-4 text-4xl"},bv=ge(" \u{1F519} "),vv={class:"option-panel border p-4 overflow-y-auto"},yv={class:"font-bold text-xl mb-4 flex"},wv={class:"grow flex gap-2"},_v=ge(" PowerGlitch "),xv={title:"Github",target:"_blank",href:"https://github.com/7PH/powerglitch"},Ev={class:"grow flex flex-col bg-white"},Av={class:"grow flex flex-col justify-center"},kv={__name:"PlaygroundView",setup(e){const t=ze(null);un(()=>{Be.glitch(t.value,{...Be.getDefaultOptions("always"),imageUrl:kb})});const n=ze("options");return(r,i)=>{const a=Ze("RouterLink"),o=Ze("fa");return ye(),Re("div",pv,[A("p",gv,[H(a,{to:"/"},{default:qe(()=>[bv]),_:1})]),A("div",vv,[A("div",yv,[A("div",wv,[A("div",{ref_key:"logoGlitch",ref:t,style:{width:"30px",height:"30px"}},null,512),_v]),A("div",null,[A("a",xv,[H(o,{icon:"fa-brands fa-github"})])])]),n.value==="options"?(ye(),Re(Me,{key:0},[H(lv),A("button",{class:"mt-6 w-full",onClick:i[0]||(i[0]=s=>n.value="export")}," Show code ")],64)):jt("",!0),n.value==="export"?(ye(),Re(Me,{key:1},[H(dv),A("button",{class:"mt-6 w-full",onClick:i[1]||(i[1]=s=>n.value="options")}," Back to options ")],64)):jt("",!0)]),A("div",Ev,[A("div",Av,[H(mv,{class:"mx-auto"})])])])}}},Ov=Xn(kv,[["__scopeId","data-v-5c6e4240"]]);ln.registerLanguage("javascript",Vp);ln.registerLanguage("css",Zp);ln.registerLanguage("shell",Jp);ng();const Sv=jf(),Cv=Wd({history:cd(),routes:[{name:"home",path:"/",component:Gg},{name:"usage",path:"/usage",component:Ab},{name:"playground",path:"/playground",component:Ov}]});$f(ag).use(Cv).use(Sv).component("fa",Ym).use(eg).mount("#app");
diff --git a/docs/assets/index.fb88e143.css b/docs/assets/index.b2c1b130.css
similarity index 67%
rename from docs/assets/index.fb88e143.css
rename to docs/assets/index.b2c1b130.css
index bbed433..a2dd3a7 100644
--- a/docs/assets/index.fb88e143.css
+++ b/docs/assets/index.b2c1b130.css
@@ -5,4 +5,4 @@ pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5p
Author: (c) Henri Vandersleyen