I have fixed this bookmarklet to calibrate with only mouse so you can use it with worry
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) { 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(); },
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.innerHTML = "";
else if (tri.off.checked) tri.cssDynamic.innerHTML = "* { 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.innerHTML = `* {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")).innerHTML = 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")).innerHTML = 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).innerHTML = `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();})();`;
Highlight all of this, and drag it to your bookmark bar
lol jk but yeah