Untitled

<!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Secretly</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Tomorrow:wght@200&family=Anton&family=Lexend+Tera&family=Major+Mono+Display&display=swap" rel="stylesheet">
    <style>
    body, html {
      background:transparent;
      margin:0px;
      padding:0px;
      overflow:hidden;
      height:100%;
    }
    </style>
    <script>
    var fontName = "Lexend Tera";
    var useFrame = 1;
    var useFrameBackground = 1;
    var useTextShadow = 1;
    var pixelPerSecond = 62.7682;
    var positionOffset = 0;
    var nthFrame = 8;
    var c, g, text, textFrame, speedMultiplier, curFrame = 0;
    function calcHue(val) {
      while(val > 360) {
        val -= 360;
      }
      return(val);
    }
    function generateHue(graphics, inverted, timeOffset, speed, brightness) {
      var currentHUEoffset = 360 * ((timeOffset / 1000) * speed % 1);
      if(inverted) {
        currentHUEoffset = 360 * (1 - (timeOffset / 1000) * speed % 1);
      }
      var grd = graphics.createLinearGradient(0, 0, c.width, 0);
      grd.addColorStop(0.000, "hsl(" + calcHue(  0 + currentHUEoffset) + ", 100%, " + brightness + "%)");
      grd.addColorStop(0.125, "hsl(" + calcHue( 45 + currentHUEoffset) + ", 100%, " + brightness + "%)");
      grd.addColorStop(0.250, "hsl(" + calcHue( 90 + currentHUEoffset) + ", 100%, " + brightness + "%)");
      grd.addColorStop(0.375, "hsl(" + calcHue(135 + currentHUEoffset) + ", 100%, " + brightness + "%)");
      grd.addColorStop(0.500, "hsl(" + calcHue(180 + currentHUEoffset) + ", 100%, " + brightness + "%)");
      grd.addColorStop(0.625, "hsl(" + calcHue(225 + currentHUEoffset) + ", 100%, " + brightness + "%)");
      grd.addColorStop(0.750, "hsl(" + calcHue(270 + currentHUEoffset) + ", 100%, " + brightness + "%)");
      grd.addColorStop(0.875, "hsl(" + calcHue(315 + currentHUEoffset) + ", 100%, " + brightness + "%)");
      grd.addColorStop(1.000, "hsl(" + calcHue(360 + currentHUEoffset) + ", 100%, " + brightness + "%)");
      return(grd);
    }
    function grabTextWidth(graphics, font, text) {
      graphics.font = font;
      return graphics.measureText(text);
    }
    function initialize() {
      c = document.createElement("canvas");
      c.width = Math.max(100, Math.min(1920*2, document.body.offsetWidth));
      c.height = Math.max(25, Math.min(250, document.body.offsetHeight));
      document.body.appendChild(c);
      g = c.getContext("2d");
      g.font = Math.floor(c.height * 0.65) + "px " + fontName;
      g.textAlign = "left";
      g.textBaseline = "middle";
      speedMultiplier = Math.max(1, Math.min(10, ((1 / 25) * c.height)));
    }
    function drawIt(timeOffset) {
      curFrame++;
      if(curFrame >= nthFrame) {
        curFrame = 0;
        textFrame = grabTextWidth(g, g.font, text);
        g.lineWidth = Math.max(1, c.height * 0.025);

        var grd = generateHue(g, true, timeOffset, 0.15, 50);
        var grd2 = generateHue(g, false, timeOffset, 0.04, 70);
        var grd3 = generateHue(g, false, timeOffset, 0.24, 30);

        var x_offset = (c.width - textFrame.width) / 2;
        if(textFrame.width > c.width) {
          x_offset = (timeOffset / 1000) * pixelPerSecond * speedMultiplier;
          x_offset = (c.width + textFrame.width) - (x_offset % (c.width + textFrame.width));
          x_offset -= textFrame.width;
        }

        g.clearRect(0, 0, c.width, c.height);

        g.fillStyle = grd2;
        g.strokeStyle = grd2;
        if(useFrameBackground) {
          g.globalAlpha = 0.15;
          g.fillRect(0, 0, c.width, c.height);
          g.globalAlpha = 1.00;
        }

        if(useTextShadow) {
          g.lineWidth = Math.max(1, c.height * 0.085);
          g.strokeStyle = grd3;
          g.globalAlpha = 0.3;
          g.strokeText(text, x_offset, (c.height / 2));
          g.globalAlpha = 1.0;
        }
        g.fillStyle = grd;
        g.fillText(text, x_offset, (c.height / 2));

        if(useFrame) {
          g.lineWidth = Math.max(1, c.height * 0.025);
          g.strokeStyle = grd2;
          g.beginPath();
          g.rect(0, 0, c.width, c.height);
          g.closePath();
          g.stroke();
        }
      }
      requestAnimationFrame(drawIt);
    }
    window.addEventListener("load", () => {
      initialize();

      var textData = location.search.substr(1);
      var b = parseInt(textData[0]).toString(2);
      while(b.length < 3) {b = "0" + b;};
      b = b.split("");

      useFrame = (b[0] == "1");
      useFrameBackground = (b[1] == "1");
      useTextShadow = (b[2] == "1");

      text = decodeURIComponent(textData.substr(1));
      textFrame = grabTextWidth(g, g.font, text);

      requestAnimationFrame(drawIt);
    }, true);
    </script>
  </head>
  <body>
  </body>
</html>