javascript:(()=>{var canvas=document.createElement("canvas"),shadow=canvas.cloneNode().getContext("2d",{willReadFrequently:!0}),master=canvas.cloneNode().getContext("2d",{willReadFrequently:!0}),camera=document.createElement("video");master.canvas.style="max-width: calc(50vw - 1rem); position: fixed; right: 1rem; top: 1rem; z-index: 100001";camera.setAttribute("playsinline","");camera.setAttribute("muted","");camera.setAttribute("autoplay","");var{width:w,height:h}=canvas,view={x:0,y:0,w,h},style=document.createElement("style");style.append("* { transform: translate3d(0, 0, 0); transition: all ease-out 0.05s }");style.append("body { transform: perspective(200vw) }");var sample=Array.from(document.body.querySelectorAll("h1, h2, h3, h4, h5, h6, a, li, p, iframe, video, img, audio, svg, span")),nodes=shuffle(sample).slice(0,150),heart=nodes.length/2,blob=new Blob([`self._W = ${w}; self._H = ${h}; const last = new Uint8ClampedArray(self._W * self._H * 4); const find = finder(self._W); self.onmessage = ${worklet.toString()}; ${finder.toString()} ${filter.toString()}`],{type:"application/javascript"}),worker=new Worker(URL.createObjectURL(blob)),go=new KeyboardEvent("keydown",{key:"Escape"}),store={k:2,x:0,y:0,m:0},proxy=new Proxy(store,{set(t,k,v){return k==="message"&&next(),Reflect.set(t,k,v)}}),loop=()=>self.requestAnimationFrame(function drive(){if(camera.paused)return;let{message}=store;if(message){let{result,target}=message;master.putImageData(target,0,0);let{x,y,m}=result;store.m=m,store.x=x,store.y=y}nodes.forEach((node,i)=>{let s=store.m*(i+1-heart),z=store.k*store.x,y=store.k*store.y*w/h,x=store.k*s;node.style.transform=`rotateX(${x}turn) rotateY(${y}turn) rotateZ(${z}turn) scale(${s+1})`}),self.requestAnimationFrame(drive)}),next=()=>self.requestAnimationFrame(function(){if(camera.paused)return;shadow.save(),shadow.translate(w,0),shadow.scale(-1,1),shadow.drawImage(camera,0,0,view.w,view.h,view.x,view.y,view.w,view.h),shadow.restore();let source=shadow.getImageData(0,0,w,h);worker.postMessage({source})});worker.addEventListener("message",({data})=>{proxy.message=data});camera.addEventListener("loadeddata",({target})=>{let{videoWidth:vw,videoHeight:vh}=target,dx=vw-w,dy=vh-h;view.x-=.5*dx,view.y-=.5*dy,view.w+=dx,view.h+=dy,Object.assign(camera,{width:vw,height:vh})});document.addEventListener("keydown",async function(e){e.key==="Escape"&&(e.stopPropagation(),e.preventDefault(),navigator.mediaDevices&&await toggle()),e.key==="$"&&(e.stopPropagation(),e.preventDefault(),document.body.contains(master.canvas)?master.canvas.remove():document.body.append(master.canvas)),e.key==="+"&&(e.stopPropagation(),e.preventDefault(),store.k+=.5,store.k=Math.min(store.k,10)),e.key==="-"&&(e.stopPropagation(),e.preventDefault(),store.k-=.5,store.k=Math.max(store.k,1))});document.head.append(style);document.dispatchEvent(go);async function toggle(){if(camera.srcObject===null)try{camera.srcObject=await navigator.mediaDevices.getUserMedia({video:{width:w,aspectRatio:self.orientation===0?h/w:w/h},audio:!1})}catch(e){console.log(`tracker: error: ${e.message}`);let m=Math.random()*.01,a=Math.random()*.01,b=Math.random()*.01;nodes.forEach((node,i)=>{let s=m*(i+1-heart),z=store.k*a,y=store.k*b*w/h,x=store.k*s;node.style.transform=`rotateX(${x}turn) rotateY(${y}turn) rotateZ(${z}turn) scale(${s+1})`})}camera.srcObject!==null&&camera.paused?camera.play().then(()=>{next(),loop()}).catch(e=>{console.log(`tracker: error: ${e.message}`)}):camera.pause()}function worklet({data}){let{source:base}=data,diff=base?.data?.map((v,i)=>(i+1)%4!==0?last.at(i)-v:v);last?.set(base?.data);let pixels=filter(diff),result=find(pixels);self.postMessage({result,target:new ImageData(pixels,base.width,base.height)})}function finder(w2=0,s=24){let center={x:self._W*.5,y:self._H*.5},data={count:0,...center};return(input=new UInt8ClampedArray,threshold="ffffffff")=>{let f=new Uint32Array(input.buffer),g=parseInt(threshold.match(/.{1,2}/g).reverse().join(""),16),d=f.reduce((o,v,i)=>{if(v>=g){let count=o.count+1,x=o.x+i%w2,y=o.y+Math.floor(i/w2);return{x,y,count}}return o},{...data});return data.m=d.count/f.length,data.x=d.count>s?Math.sign(d.x/d.count-center.x)*data.m:data.x,data.y=d.count>s?Math.sign(center.y-d.y/d.count)*data.m:data.y,{...data}}}function filter(input=new Uint8ClampedArray,threshold=24){let weights=[.299,.587,.114],f=Uint8ClampedArray.from(input);return input.reduce((o,_,i,a)=>{if(i%4===0){let s=a.subarray(i,i+3),t=s.map((v,i2)=>v*weights.at(i2)).reduce((c,d)=>c+d,0);s.fill(t/3,0),o.set(s,i)}return o},f).map(v=>v<threshold?v:255)}function shuffle(a){for(let n=a.length,i=n-1;i>0;i--){let j=Math.floor(Math.random()*(i+1));[a[i],a[j%>=[a[j],a[i%>}return a}})();
Helps slap websites apart. More ›