copy and paste into bookmarks URL
copy and paste into bookmarks URL
javascript:(function(){var tri={menu:document.createElement("div"),limit:document.createElement("input"),gap:document.createElement("input"),sag:document.createElement("input"),fov:document.createElement("input"),flo:document.createElement("input"),off:document.createElement("input"),non:document.createElement("input"),end:document.createElement("input"),tgl:document.createElement("input"),cssStatic:document.createElement("style"),cssDynamic:document.createElement("style"),orientation:{"yaw":0,"pitch":0,"roll":0},mouseMove:function(e){tri.orientation.yaw=-Math.cos(Math.PI*e.clientX/innerWidth)*180*tri.limit.value;tri.orientation.pitch=Math.cos(Math.PI*e.clientY/innerHeight)*180*tri.limit.value;tri.updateBody();},gyroMove:function(e){var landscape=innerWidth>innerHeight;if(landscape){tri.orientation.yaw=-(e.alpha+e.beta);tri.orientation.pitch=e.gamma-Math.sign(90-Math.abs(e.beta))*90;}else{tri.orientation.yaw=-(e.alpha+e.gamma);tri.orientation.pitch=e.beta-90;}tri.updateBody();},updateOrigin:function(e){document.body.style.transformOrigin=(innerWidth/2+pageXOffset)+"px "+(innerHeight/2+pageYOffset)+"px";},updateBody:function(){document.body.style.transform="perspective("+Math.pow(2,tri.fov.value)+"px) translateZ(-"+tri.gap.value+"px) rotateX("+tri.orientation.pitch+"deg) rotateY("+tri.orientation.yaw+"deg)";},updateCSS:function(){if(tri.non.checked)tri.cssDynamic.textContent="";else if(tri.off.checked)tri.cssDynamic.textContent="* { transform-style: preserve-3d; }";else{for(var depth=0;document.querySelector("body"+" >*".repeat(depth));depth++);var gap=tri.gap.value/depth;var sag=-Math.PI*tri.sag.value/depth;tri.cssDynamic.textContent=`* {transform: translateZ(${gap}px) rotateX(${sag}rad);transform-style: preserve-3d;transition: transform 1s;outline: 1px solid rgba(0, 0, 0, 0.0625);${tri.flo.checked?"overflow: visible !important;":""}}*:hover {transform: translateZ(${gap*2}px) rotateX(${sag*2}rad);${!tri.flo.checked?"overflow: visible;":""}}`;}},toggle:function(){if(tri.menu.className=="active"){tri.menu.removeAttribute("class");}else{tri.menu.className="active";}},quit:function(){window.removeEventListener("deviceorientation",tri.gyroMove);window.removeEventListener("mousemove",tri.mouseMove);window.removeEventListener("scroll",tri.updateOrigin);window.addEventListener("resize",tri.updateOrigin);tri.menu.remove();tri.cssStatic.remove();tri.cssDynamic.remove();document.body.removeAttribute("style");},newRange:function(e,label,min,step,max,value,f){tri.menu.appendChild(e);e.type="range";e.min=min;e.max=max;e.step=step;e.value=value;e.addEventListener("input",f);tri.menu.appendChild(document.createElement("span")).textContent=label;tri.menu.appendChild(document.createElement("br"));},newCheckbox:function(e,label,f){tri.menu.appendChild(e);e.type="checkbox";e.addEventListener("click",f);tri.menu.appendChild(document.createElement("span")).textContent=label;tri.menu.appendChild(document.createElement("br"));},newButton:function(e,label,f){tri.menu.appendChild(e);e.type="button";e.value=label;e.addEventListener("click",f);},init:function(){document.body.parentNode.appendChild(tri.menu).id="tri-menu";tri.newRange(tri.limit,"limit",0,0.03125,1,0.125,tri.updateBody);tri.newRange(tri.gap,"gap / distance",0,32,512,128,function(){tri.updateCSS();tri.updateBody();});tri.newRange(tri.sag,"sag",-0.25,0.03125,0.25,0,tri.updateCSS);tri.newRange(tri.fov,"field of view",7,1,13,10,tri.updateBody);tri.newCheckbox(tri.flo,"force overflow",tri.updateCSS);tri.flo.setAttribute("checked","");tri.newCheckbox(tri.off,"flatten layers",tri.updateCSS);tri.newCheckbox(tri.non,"flatten everything",tri.updateCSS);tri.newButton(tri.end,"Quit",tri.quit);tri.newButton(tri.tgl,"≡",tri.toggle);tri.tgl.id="tri-toggle";tri.menu.appendChild(tri.cssStatic).textContent=`html, body {transition-property: none;height: 100%;width: 100%;}html, html:hover, #tri-menu, #tri-menu > *, #tri-menu > *:hover {transform: none;outline: none;overflow: auto !important;float: none;}#tri-menu {position: fixed;top: 0;left: 0;background: rgba(0, 0, 0, 0.5);color: white;border: 1px solid rgba(255, 255, 255, 0.5);;border-radius: 0 0 16px 0;padding: 8px;transform: translate(-100%, -100%) translate(32px, 32px);}#tri-menu.active {transform: none;}#tri-toggle {position: absolute;bottom: 0;right: 0;height: 32px;width: 32px;background: transparent;color: white;border: none;cursor: pointer;}#tri-menu.active > #tri-toggle {background: white;color: black;border-radius: 8px 0 0 0;}%60;tri.menu.appendChild(tri.cssDynamic);tri.updateCSS();window.addEventListener("deviceorientation",tri.gyroMove);window.addEventListener("mousemove",tri.mouseMove);window.addEventListener("scroll",tri.updateOrigin);window.addEventListener("resize",tri.updateOrigin);window.scrollBy(0,1);}};tri.init();})();