<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>birdy is waiting</title><style>body{background:hsla(0,0%,5%,1);cursor:move}span{position:relative;color:hsla(52,95%,55%,1);cusor:move}pre{top:50%;left:55%;position:absolute;transform:translate(-50%,-50%);width:20%;padding-left:2em;font-family:Mona;font-size:1em;background:hsla(0,0%,5%,1);line-height:1.1em}</style></head><body><pre class="ascii">
{{ .--"-↦-,
/ _ _ \
\ {{@ @}} /
( _{{=}} _ )
`)(_
/((_`)_,
\__(/-"
__|||__
((__|__))
</pre><script>document.addEventListener("DOMContentLoaded", function () {
const asciis = document.querySelectorAll(".ascii");
asciis.forEach(function (ascii) {
let i = ascii.innerHTML;
i = i.replace(/{/g, "<span>").replace(/}/g, "</span>");
ascii.innerHTML = i;
ascii.addEventListener("mousemove", moveHandler);
ascii.addEventListener("touchmove", moveHandler);
function moveHandler(e) {
let x;
if (e.type === "mousemove") {
x = e.pageX - ascii.offsetLeft;
} else if (e.type === "touchmove") {
x = e.touches[0].clientX - ascii.offsetLeft;
}
const diff = (x - 200) / 30;
const spans = ascii.querySelectorAll("span");
spans.forEach(function (span) {
span.style.left = diff + "px";
});
}
});
});</script></body></html>