如何为 StackOverflow 单词设置动画

let s = 620;

document.body.innerHTML += `<canvas id="canvas" 
    width="${s}" height="${s/4}" ></canvas>`;
    
let ctx = canvas.getContext('2d');
let dots = [];
let mouse = {x:0, y:0}
let startedAt = Date.now();

ctx.font = 'bold '+(s/7.5)+'px Arial';
ctx.fillStyle = 'red';
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.fillText('Стековерфлоу', s/2, s/8);

let mask = ctx.getImageData(0,0,s,s/4);
for (let i = 0; dots.length < 3000; i++){
    let x = s*Math.random();
    let y1 = s*Math.random();
    let y2 = -s*Math.random();
    let offset = parseInt(y1)*s*4 + parseInt(x)*4;
    if (mask.data[offset])
        dots.push({x, y1, y2, speed: {x:0, y:0}, i})
}

ctx.fillStyle = 'black';

requestAnimationFrame(function draw(){
    let t = Date.now() - startedAt;
    ctx.clearRect(0,0,s,s);
    dots.forEach(dot => {
        let t1 = Math.min(1,(t-dot.x*4)/(500+2000*Math.abs(Math.sin(dot.i*4))));
        t1 = t1*t1*t1
        let x = dot.x;
        let y = dot.y2 + (dot.y1-dot.y2) * t1;
        let dx = mouse.x-x;
        let dy = mouse.y-y;
        let lenSq = dx*dx + dy*dy;
        if (lenSq < 900) {
            let d = 30-Math.sqrt(lenSq);
            dot.speed.x += dx/30*d;
            dot.speed.y += dy/30*d;
        }
        x += dot.speed.x;
        y += dot.speed.y;
        dot.speed.x *= 0.92;
        dot.speed.y *= 0.92;
        ctx.fillRect(x-0.75, y-0.75, 1.5, 1.5);
    });

    requestAnimationFrame(draw);
});

addEventListener('mousemove', e => {
    let bb = canvas.getBoundingClientRect();
    mouse.x = e.x - bb.x;
    mouse.y = e.y - bb.y;
});

['click','touchstart'].forEach(type =>
  addEventListener(type, () => startedAt = Date.now()));

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100vh;

  perspective: 1000px;
  overflow: hidden;

  background-color: #212121;
  font-family: 'Roboto', sans-serif;
}

h1 {
  --cb: cubic-bezier(0.71, 0.73, 0.58, 0.83);
  --adur: 4s;

  position: relative;

  font-size: 10vw;
  color: white;
  -webkit-box-reflect: below 10px
    linear-gradient(transparent, rgba(255, 255, 255, 0.1));

  display: flex;

  animation: whole_heading_animation var(--cb) var(--adur);

  perspective: 1000px;
}

h1::after {
  content: '';

  position: absolute;
  bottom: -10%;
  left: 0;

  display: block;
  width: 100%;
  height: 0.7vw;

  background-color: #b3e5fc;

  animation: draw_line 1.5s var(--adur) both;
}

span {
  --cb-span: ease-out;

  position: relative;
  margin: 0 0.5vw;

  animation-timing-function: var(--cb);
  animation-duration: var(--adur);
  transform-style: preserve-3d;
}

span::after,
span::before {
  position: absolute;
  left: 0;
  top: 0;
}

span::after {
  animation: after_animation var(--cb-span) var(--adur) both;
}

span::before {
  animation: before_animation var(--cb-span) var(--adur) both;
}

span:nth-child(1) {
  --tx-1: 30vw;
  --ty-1: -10vw;
  --tz-1: -3000px;
  --rz-1: 1080deg;
  --ry-1: 0deg;
  --rx-1: 620deg;
  animation-name: letter_1_animation;
}

span:nth-child(1)::after,
span:nth-child(1)::before {
  content: 'S';
}

span:nth-child(2) {
  --tx-2: 26vw;
  --ty-2: 10vw;
  --tz-2: -2600px;
  --rz-2: 0deg;
  --ry-2: -70deg;
  --rx-2: -620deg;
  animation-name: letter_2_animation;
}

span:nth-child(2)::after,
span:nth-child(2)::before {
  content: 't';
}

span:nth-child(3) {
  --tx-3: 22vw;
  --ty-3: -8vw;
  --tz-3: -2200px;
  --rz-3: 0deg;
  --ry-3: 40deg;
  --rx-3: 750deg;
  animation-name: letter_3_animation;
}

span:nth-child(3)::after,
span:nth-child(3)::before {
  content: 'a';
}

span:nth-child(4) {
  --tx-4: 18vw;
  --ty-4: 10vw;
  --tz-4: -1800px;
  --rz-4: 0deg;
  --ry-4: -50deg;
  --rx-4: -900deg;
  animation-name: letter_4_animation;
}

span:nth-child(4)::after,
span:nth-child(4)::before {
  content: 'c';
}

span:nth-child(5) {
  --tx-5: 14vw;
  --ty-5: 0vw;
  --tz-5: -1400px;
  --rz-5: 80deg;
  --ry-5: 1080deg;
  --rx-5: -620deg;
  animation-name: letter_5_animation;
}

span:nth-child(5)::after,
span:nth-child(5)::before {
  content: 'k';
}

span:nth-child(6) {
  --tx-6: 10vw;
  --ty-6: -8vw;
  --tz-6: -1000px;
  --rz-6: 100deg;
  --ry-6: 920deg;
  --rx-6: -720deg;
  animation-name: letter_6_animation;
}

span:nth-child(6)::after,
span:nth-child(6)::before {
  content: 'O';
}

span:nth-child(7) {
  --tx-7: 0vw;
  --ty-7: -5vw;
  --tz-7: -1000px;
  --rz-7: 380deg;
  --ry-7: -600deg;
  --rx-7: 0deg;
  animation-name: letter_7_animation;
}

span:nth-child(7)::after,
span:nth-child(7)::before {
  content: 'v';
}

span:nth-child(8) {
  --tx-8: -4vw;
  --ty-8: 8vw;
  --tz-8: -1400px;
  --rz-8: 20deg;
  --ry-8: 0deg;
  --rx-8: 820deg;
  animation-name: letter_8_animation;
}

span:nth-child(8)::after,
span:nth-child(8)::before {
  content: 'e';
}

span:nth-child(9) {
  --tx-9: -8vw;
  --ty-9: 0vw;
  --tz-9: -1800px;
  --rz-9: -100deg;
  --ry-9: 0deg;
  --rx-9: -1020deg;
  animation-name: letter_9_animation;
}

span:nth-child(9)::after,
span:nth-child(9)::before {
  content: 'r';
}

span:nth-child(10) {
  --tx-10: -12vw;
  --ty-10: -4vw;
  --tz-10: -2200px;
  --rz-10: 100deg;
  --ry-10: -500deg;
  --rx-10: 1000deg;
  animation-name: letter_10_animation;
}

span:nth-child(10)::after,
span:nth-child(10)::before {
  content: 'f';
}

span:nth-child(11) {
  --tx-11: -16vw;
  --ty-11: -15vw;
  --tz-11: -2600px;
  --rz-11: 0deg;
  --ry-11: 10deg;
  --rx-11: -1020deg;
  animation-name: letter_11_animation;
}

span:nth-child(11)::after,
span:nth-child(11)::before {
  content: 'l';
}

span:nth-child(12) {
  --tx-12: -20vw;
  --ty-12: 0vw;
  --tz-12: -3000px;
  --rz-12: 0deg;
  --ry-12: 60deg;
  --rx-12: -620deg;
  animation-name: letter_12_animation;
}

span:nth-child(12)::after,
span:nth-child(12)::before {
  content: 'o';
}

span:nth-child(13) {
  --tx-13: -24vw;
  --ty-13: 10vw;
  --tz-13: -3400px;
  --rz-13: -1080deg;
  --ry-13: 200deg;
  --rx-13: 0deg;
  animation-name: letter_13_animation;
}

span:nth-child(13)::after,
span:nth-child(13)::before {
  content: 'w';
}

@keyframes whole_heading_animation {
  from {
    transform: translateZ(-8000px) scale(0);
    opacity: 0;
  }

  25% {
    transform: translateZ(-500px);
    opacity: 1;
  }

  to {
    transform: translateZ(0);
  }
}

@keyframes draw_line {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
  }
}

@keyframes letter_1_animation {
  from {
    transform: translate3d(var(--tx-1), var(--ty-1), var(--tz-1))
      rotateX(var(--rx-1)) rotateY(var(--ry-1)) rotateZ(var(--rz-1));
  }

  35% {
    transform: translate3d(
        calc(var(--tx-1) / 3),
        calc(var(--ty-1) / 3),
        calc(var(--tz-1) / 3)
      )
      rotateX(calc(var(--rx-1) / 3)) rotateY(calc(var(--ry-1) / 3))
      rotateZ(calc(var(--rz-1) / 3));
  }
}

@keyframes letter_2_animation {
  from {
    transform: translate3d(var(--tx-2), var(--ty-2), var(--tz-2))
      rotateX(var(--rx-2)) rotateY(var(--ry-2)) rotateZ(var(--rz-2));
  }

  35% {
    transform: translate3d(
        calc(var(--tx-2) / 3),
        calc(var(--ty-2) / 3),
        calc(var(--tz-2) / 3)
      )
      rotateX(calc(var(--rx-2) / 3)) rotateY(calc(var(--ry-2) / 3))
      rotateZ(calc(var(--rz-2) / 3));
  }
}

@keyframes letter_3_animation {
  from {
    transform: translate3d(var(--tx-3), var(--ty-3), var(--tz-3))
      rotateX(var(--rx-3)) rotateY(var(--ry-3)) rotateZ(var(--rz-3));
  }

  35% {
    transform: translate3d(
        calc(var(--tx-3) / 3),
        calc(var(--ty-3) / 3),
        calc(var(--tz-3) / 3)
      )
      rotateX(calc(var(--rx-3) / 3)) rotateY(calc(var(--ry-3) / 3))
      rotateZ(calc(var(--rz-3) / 3));
  }
}

@keyframes letter_4_animation {
  from {
    transform: translate3d(var(--tx-4), var(--ty-4), var(--tz-4))
      rotateX(var(--rx-4)) rotateY(var(--ry-4)) rotateZ(var(--rz-4));
  }

  35% {
    transform: translate3d(
        calc(var(--tx-4) / 3),
        calc(var(--ty-4) / 3),
        calc(var(--tz-4) / 3)
      )
      rotateX(calc(var(--rx-4) / 3)) rotateY(calc(var(--ry-4) / 3))
      rotateZ(calc(var(--rz-4) / 3));
  }
}

@keyframes letter_5_animation {
  from {
    transform: translate3d(var(--tx-5), var(--ty-5), var(--tz-5))
      rotateX(var(--rx-5)) rotateY(var(--ry-5)) rotateZ(var(--rz-5));
  }

  35% {
    transform: translate3d(
        calc(var(--tx-5) / 3),
        calc(var(--ty-5) / 3),
        calc(var(--tz-5) / 3)
      )
      rotateX(calc(var(--rx-5) / 3)) rotateY(calc(var(--ry-5) / 3))
      rotateZ(calc(var(--rz-5) / 3));
  }
}

@keyframes letter_6_animation {
  from {
    transform: translate3d(var(--tx-6), var(--ty-6), var(--tz-6))
      rotateX(var(--rx-6)) rotateY(var(--ry-6)) rotateZ(var(--rz-6));
  }

  35% {
    transform: translate3d(
        calc(var(--tx-6) / 3),
        calc(var(--ty-6) / 3),
        calc(var(--tz-6) / 3)
      )
      rotateX(calc(var(--rx-6) / 3)) rotateY(calc(var(--ry-6) / 3))
      rotateZ(calc(var(--rz-6) / 3));
  }
}

@keyframes letter_7_animation {
  from {
    transform: translate3d(var(--tx-7), var(--ty-7), var(--tz-7))
      rotateX(var(--rx-7)) rotateY(var(--ry-7)) rotateZ(var(--rz-7));
  }

  35% {
    transform: translate3d(
        calc(var(--tx-7) / 3),
        calc(var(--ty-7) / 3),
        calc(var(--tz-7) / 3)
      )
      rotateX(calc(var(--rx-7) / 3)) rotateY(calc(var(--ry-7) / 3))
      rotateZ(calc(var(--rz-7) / 3));
  }
}

@keyframes letter_8_animation {
  from {
    transform: translate3d(var(--tx-8), var(--ty-8), var(--tz-8))
      rotateX(var(--rx-8)) rotateY(var(--ry-8)) rotateZ(var(--rz-8));
  }

  35% {
    transform: translate3d(
        calc(var(--tx-8) / 3),
        calc(var(--ty-8) / 3),
        calc(var(--tz-8) / 3)
      )
      rotateX(calc(var(--rx-8) / 3)) rotateY(calc(var(--ry-8) / 3))
      rotateZ(calc(var(--rz-8) / 3));
  }
}

@keyframes letter_9_animation {
  from {
    transform: translate3d(var(--tx-9), var(--ty-9), var(--tz-9))
      rotateX(var(--rx-9)) rotateY(var(--ry-9)) rotateZ(var(--rz-9));
  }

  35% {
    transform: translate3d(
        calc(var(--tx-9) / 3),
        calc(var(--ty-9) / 3),
        calc(var(--tz-9) / 3)
      )
      rotateX(calc(var(--rx-9) / 3)) rotateY(calc(var(--ry-9) / 3))
      rotateZ(calc(var(--rz-9) / 3));
  }
}

@keyframes letter_10_animation {
  from {
    transform: translate3d(var(--tx-10), var(--ty-10), var(--tz-10))
      rotateX(var(--rx-10)) rotateY(var(--ry-10)) rotateZ(var(--rz-10));
  }

  35% {
    transform: translate3d(
        calc(var(--tx-10) / 3),
        calc(var(--ty-10) / 3),
        calc(var(--tz-10) / 3)
      )
      rotateX(calc(var(--rx-10) / 3)) rotateY(calc(var(--ry-10) / 3))
      rotateZ(calc(var(--rz-10) / 3));
  }
}

@keyframes letter_11_animation {
  from {
    transform: translate3d(var(--tx-11), var(--ty-11), var(--tz-11))
      rotateX(var(--rx-11)) rotateY(var(--ry-11)) rotateZ(var(--rz-11));
  }

  35% {
    transform: translate3d(
        calc(var(--tx-11) / 3),
        calc(var(--ty-11) / 3),
        calc(var(--tz-11) / 3)
      )
      rotateX(calc(var(--rx-11) / 3)) rotateY(calc(var(--ry-11) / 3))
      rotateZ(calc(var(--rz-11) / 3));
  }
}

@keyframes letter_12_animation {
  from {
    transform: translate3d(var(--tx-12), var(--ty-12), var(--tz-12))
      rotateX(var(--rx-12)) rotateY(var(--ry-12)) rotateZ(var(--rz-12));
  }

  35% {
    transform: translate3d(
        calc(var(--tx-12) / 3),
        calc(var(--ty-12) / 3),
        calc(var(--tz-12) / 3)
      )
      rotateX(calc(var(--rx-12) / 3)) rotateY(calc(var(--ry-12) / 3))
      rotateZ(calc(var(--rz-12) / 3));
  }
}

@keyframes letter_13_animation {
  from {
    transform: translate3d(var(--tx-13), var(--ty-13), var(--tz-13))
      rotateX(var(--rx-13)) rotateY(var(--ry-13)) rotateZ(var(--rz-13));
  }

  35% {
    transform: translate3d(
        calc(var(--tx-13) / 3),
        calc(var(--ty-13) / 3),
        calc(var(--tz-13) / 3)
      )
      rotateX(calc(var(--rx-13) / 3)) rotateY(calc(var(--ry-13) / 3))
      rotateZ(calc(var(--rz-13) / 3));
  }
}

@keyframes before_animation {
  10% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  70% {
    transform: translate3d(-0, -10vw, -3vw) scale(0.9) skew(-20deg);
    opacity: 0.1;
  }

  to {
    transform: translate3d(-0.4vw, -0.4vw, -0.4vw) scale(1);
  }
}

@keyframes after_animation {
  10% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  70% {
    transform: translate3d(2vw, 0, 3vw) scale(2) skew(-20deg);
    opacity: 0.5;
  }

  to {
    transform: translate3d(0.4vw, 0.4vw, 0.4vw) scale(1);
  }
}

<h1>
  <span>S</span>
  <span>t</span>
  <span>a</span>
  <span>c</span>
  <span>k</span>
  <span>O</span>
  <span>v</span>
  <span>e</span>
  <span>r</span>
  <span>f</span>
  <span>l</span>
  <span>o</span>
  <span>w</span>
</h1>

var ImageParticles = {
  density: 0,

  produceDistance: 0,
  baseRadius: 0,
  maxLineThickness: 0,
  reactionSensitivity: 0,
  lineThickness: 0,

  particles: [],
  mouse: {
    x: -1000,
    y: -1000,
    down: false
  },

  animation: null,

  canvas: null,
  context: null,
  bgImage: null,
  bgCanvas: null,
  bgContext: null,
  bgContextPixelData: null,

  initialize: function(canvas_id, imageData, densityPara = 6, produceDistancePara = 28, baseRadiusPara = 2, maxLineThicknessPara = 1, reactionSensitivityPara = 2, lineThicknessPara = 1) {
    this.canvas = document.getElementById(canvas_id);
    this.context = canvas.getContext('2d');
    this.context.globalCompositeOperation = "lighter";
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.canvas.style.display = 'block'
    this.canvas.addEventListener('mousemove', this.pointerMove, false);
    this.canvas.addEventListener('mousedown', this.pointerDown, false);
    this.canvas.addEventListener('mouseup', this.pointerUp, false);
    this.canvas.addEventListener('mouseout', this.pointerOut, false);
    this.density = densityPara;
    this.produceDistance = produceDistancePara;
    this.baseRadius = baseRadiusPara;
    this.maxLineThickness = maxLineThicknessPara;
    this.reactionSensitivity = reactionSensitivityPara;
    window.onresize = function(event) {
      ImageParticles.canvas.width = window.innerWidth;
      ImageParticles.canvas.height = window.innerHeight;
      ImageParticles.onWindowResize();
    }
    this.getImageData(imageData);
  },

  makeParticles: function() {
    this.particles = [];

    var width, height, i, j;

    var colors = this.bgContextPixelData.data;

    for (i = 0; i < this.canvas.height; i += this.density) {

      for (j = 0; j < this.canvas.width; j += this.density) {

        var pixelPosition = (j + i * this.bgContextPixelData.width) * 4;
        if (colors[pixelPosition] > 200 && (colors[pixelPosition + 1]) > 200 && (colors[pixelPosition + 2]) > 200 || colors[pixelPosition + 3] === 0) {
          continue;
        }

        var color = 'rgba(' + colors[pixelPosition] + ',' + colors[pixelPosition + 2] + ',' + colors[pixelPosition + 3] + ',' + '1)';
        this.particles.push({
          x: j,
          y: i,
          originalX: j,
          originalY: i,
          color: color
        });

      }
    }
  },

  updateparticles: function() {

    var i, currentPoint, theta, distance;

    for (i = 0; i < this.particles.length; i++) {

      currentPoint = this.particles[i];

      theta = Math.atan2(currentPoint.y - this.mouse.y, currentPoint.x - this.mouse.x);

      if (this.mouse.down) {
        distance = this.reactionSensitivity * 200 / Math.sqrt((this.mouse.x - currentPoint.x) * (this.mouse.x - currentPoint.x) +
          (this.mouse.y - currentPoint.y) * (this.mouse.y - currentPoint.y));
      } else {
        distance = this.reactionSensitivity * 100 / Math.sqrt((this.mouse.x - currentPoint.x) * (this.mouse.x - currentPoint.x) +
          (this.mouse.y - currentPoint.y) * (this.mouse.y - currentPoint.y));
      }


      currentPoint.x += Math.cos(theta) * distance + (currentPoint.originalX - currentPoint.x) * 0.10;
      currentPoint.y += Math.sin(theta) * distance + (currentPoint.originalY - currentPoint.y) * 0.10;

    }
  },

  produceLines: function() {

    var i, j, currentPoint, otherPoint, distance, lineThickness;

    for (i = 0; i < this.particles.length; i++) {

      currentPoint = this.particles[i];
      this.context.fillStyle = currentPoint.color;

      for (j = 0; j < this.particles.length; j++) {
        otherPoint = this.particles[j];

        if (otherPoint == currentPoint) {
          continue;
        }

        distance = Math.sqrt((otherPoint.x - currentPoint.x) * (otherPoint.x - currentPoint.x) +
          (otherPoint.y - currentPoint.y) * (otherPoint.y - currentPoint.y));

        if (distance <= this.produceDistance) {
          this.context.beginPath();
          this.context.moveTo(currentPoint.x, currentPoint.y);
        }
      }
    }
  },

  produceparticles: function() {

    var i, currentPoint;

    for (i = 0; i < this.particles.length; i++) {

      currentPoint = this.particles[i];
      this.context.fillStyle = currentPoint.color;

      this.context.beginPath();
      this.context.arc(currentPoint.x, currentPoint.y, this.baseRadius, 0, Math.PI * 2, true);
      this.context.closePath();
      this.context.fill();

    }
  },

  produce: function() {
    this.animation = requestAnimationFrame(function() {
      ImageParticles.produce()
    });

    this.remove();
    this.updateparticles();
    this.produceparticles();

  },

  remove: function() {
    this.canvas.width = this.canvas.width;
  },
  getImageData: function(data) {

    this.bgImage = new Image;
    this.bgImage.src = data;

    this.bgImage.onload = function() {
      ImageParticles.produceImageParticles();
    }
  },
  produceImageParticles: function() {

    this.bgCanvas = document.createElement('canvas');
    this.bgCanvas.width = this.canvas.width;
    this.bgCanvas.height = this.canvas.height;

    var newWidth, newHeight;
    if (this.bgImage.width > this.bgCanvas.width - 100 || this.bgImage.height > this.bgCanvas.height - 100) {

      var maxRatio = Math.max(this.bgImage.width / (this.bgCanvas.width - 100), this.bgImage.height / (this.bgCanvas.height - 100));
      newWidth = this.bgImage.width / maxRatio;
      newHeight = this.bgImage.height / maxRatio;

    } else {
      newWidth = this.bgImage.width;
      newHeight = this.bgImage.height;
    }
    this.bgContext = this.bgCanvas.getContext('2d');
    this.bgContext.drawImage(this.bgImage, (this.canvas.width - newWidth) / 2, (this.canvas.height - newHeight) / 2, newWidth, newHeight);
    this.bgContextPixelData = this.bgContext.getImageData(0, 0, this.bgCanvas.width, this.bgCanvas.height);

    this.makeParticles();
    this.produce();
  },

  pointerDown: function(event) {
    ImageParticles.mouse.down = true;
  },

  pointerUp: function(event) {
    ImageParticles.mouse.down = false;
  },

  pointerMove: function(event) {
    ImageParticles.mouse.x = event.offsetX || (event.layerX - ImageParticles.canvas.offsetLeft);
    ImageParticles.mouse.y = event.offsetY || (event.layerY - ImageParticles.canvas.offsetTop);
  },

  pointerOut: function(event) {
    ImageParticles.mouse.x = -1000;
    ImageParticles.mouse.y = -1000;
    ImageParticles.mouse.down = false;
  },
  onWindowResize: function() {
    cancelAnimationFrame(this.animation);
    this.produceImageParticles();
  }
}

ImageParticles.initialize('canvas', 'data:image/png;base64,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');

canvas {
  min-width: 100vw;
  height: 100vh;
  position: fixed;
}

<canvas id="canvas"></canvas>

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: #2da8cb;
  background: rgb(24, 139, 172);
  background: linear-gradient(45deg, gold 0%, lavender 99%);
}

div {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0 0 0 20px;
}

h1,
h2 {
  opacity: 1;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial;
  font-weight: 900;
  font-size: 6em;
  letter-spacing: 0.01em;
  line-height: 1em;
  text-transform: uppercase;
  text-shadow: 10px 10px 8px rgba(0, 0, 0, 0.15);
  background: linear-gradient(45deg, red, orange, yellow, yellow, chocolate, yellow, orange, red, orange, yellow, yellow, chocolate, yellow, orange, red);
  background-size: 250% 500%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: animate 5s ease-out infinite;
  animation: animate 5s ease-out infinite;
}

h2 {
  top: 20px;
  left: -100%;
  opacity: 1;
  font-size: 5em;
}

@keyframes animate {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

div:hover h1 {
  left: -100%;
  animation: animate 5s ease-out infinite, animate__hover__h1 2s ease-in-out;
}

div:hover h2 {
  left: 0;
  animation: animate 5s ease-out infinite, animate__hover__h2 4s ease-in-out;
}

@keyframes animate__hover__h1 {
  from {
    left: 0;
  }
  to {
    left: -100%;
  }
}

@keyframes animate__hover__h2 {
  from {
    left: -100%;
  }
  50% {
    left: -100%;
  }
  to {
    left: 0;
  }
}

<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><h1>Stack<br>Overflow</h1><h2>Спасибо<br>за участие</h2></div>

h1 {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes animate {
  0% {
    font-size: 60px;
    color: #f48024;
  }
  10% {
    font-size: 80px;
    color: #242729
  }
  40% {
    font-size: 40px;
    color: #f48024;
  }
  70% {
    font-size: 50px;
    color: #f48024;
  }
  100% {
    font-size: 60px;
    color: #f48024;
  }
}

h1>span {
  font-family: Helvetica, Arial;
  font-weight: 900;
  font-size: 60px;
  color: #f48024;
  animation: animate 2.5s ease infinite;
}

h1>span:nth-child(2) {
  animation-delay: .1s;
}

h1>span:nth-child(3) {
  animation-delay: .2s;
}

h1>span:nth-child(4) {
  animation-delay: .3s;
}

h1>span:nth-child(5) {
  animation-delay: .4s;
}

h1>span:nth-child(6) {
  animation-delay: .5s;
}

h1>span:nth-child(7) {
  animation-delay: .6s;
}

h1>span:nth-child(8) {
  animation-delay: .7s;
}

h1>span:nth-child(9) {
  animation-delay: .8s;
}

h1>span:nth-child(10) {
  animation-delay: .9s;
}

h1>span:nth-child(11) {
  animation-delay: 1s;
}

h1>span:nth-child(12) {
  animation-delay: 1.1s;
}

h1>span:nth-child(13) {
  animation-delay: 1.2s;
}

<h1><span>S</span><span>t</span><span>a</span><span>c</span><span>k</span><span>O</span><span>v</span><span>e</span><span>r</span><span>f</span><span>l</span><span>o</span><span>w</span></h1>

* {
  box-sizing: border-box;
}

html,
body,
.project {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.word-x {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -125px;
  margin-left: -125px;
  height: 250px;
  width: 250px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotateY(0deg) rotateZ(0deg) rotateX(0deg);
          transform: rotateY(0deg) rotateZ(0deg) rotateX(0deg);
  -webkit-animation: word-rotate 25s linear infinite;
          animation: word-rotate 25s linear infinite;
}
.word-x .word {
  position: absolute;
  width: 250px;
  height: 250px;
  margin-top: -125px;
  margin-left: -125px;
  top: 50%;
  left: 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
.word-x .word .s {
  position: absolute;
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  top: 0%;
  left: 0%;
}
.word-x .word .s svg {
  position: absolute;
  top: 0;
  left: 0%;
  width: 250px;
  height: 250px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
.word-x .word .s svg .p {
  fill: rgba(0, 0, 0, 0.1);
  stroke: rgba(0, 0, 0, 0.1);
  -webkit-animation: pulse 25s linear infinite;
          animation: pulse 25s linear infinite;
}

.word .s:nth-of-type(1) {
  -webkit-transform: rotateY(0deg) translateZ(1px);
          transform: rotateY(0deg) translateZ(1px);
}
.word .s:nth-of-type(1) .p {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.word .s:nth-of-type(2) {
  -webkit-transform: rotateY(0deg) translateZ(2px);
          transform: rotateY(0deg) translateZ(2px);
}
.word .s:nth-of-type(2) .p {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.word .s:nth-of-type(3) {
  -webkit-transform: rotateY(0deg) translateZ(3px);
          transform: rotateY(0deg) translateZ(3px);
}
.word .s:nth-of-type(3) .p {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.word .s:nth-of-type(4) {
  -webkit-transform: rotateY(0deg) translateZ(4px);
          transform: rotateY(0deg) translateZ(4px);
}
.word .s:nth-of-type(4) .p {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.word .s:nth-of-type(5) {
  -webkit-transform: rotateY(0deg) translateZ(5px);
          transform: rotateY(0deg) translateZ(5px);
}
.word .s:nth-of-type(5) .p {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.word .s:nth-of-type(6) {
  -webkit-transform: rotateY(0deg) translateZ(6px);
          transform: rotateY(0deg) translateZ(6px);
}
.word .s:nth-of-type(6) .p {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.word .s:nth-of-type(7) {
  -webkit-transform: rotateY(0deg) translateZ(7px);
          transform: rotateY(0deg) translateZ(7px);
}
.word .s:nth-of-type(7) .p {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.word .s:nth-of-type(8) {
  -webkit-transform: rotateY(0deg) translateZ(8px);
          transform: rotateY(0deg) translateZ(8px);
}
.word .s:nth-of-type(8) .p {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.word .s:nth-of-type(9) {
  -webkit-transform: rotateY(0deg) translateZ(9px);
          transform: rotateY(0deg) translateZ(9px);
}
.word .s:nth-of-type(9) .p {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.word .s:nth-of-type(10) {
  -webkit-transform: rotateY(0deg) translateZ(10px);
          transform: rotateY(0deg) translateZ(10px);
}
.word .s:nth-of-type(10) .p {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes pulse {
  50% {
    fill: rgba(0, 0, 0, 0.08);
    stroke: rgba(0, 0, 0, 0.08);
  }
}

@keyframes pulse {
  50% {
    fill: rgba(0, 0, 0, 0.08);
    stroke: rgba(0, 0, 0, 0.08);
  }
}
@-webkit-keyframes word-rotate {
  50% {
    -webkit-transform: rotateY(360deg) rotateZ(36deg) rotateX(18deg);
            transform: rotateY(360deg) rotateZ(36deg) rotateX(18deg);
  }
}
@keyframes word-rotate {
  50% {
    -webkit-transform: rotateY(360deg) rotateZ(36deg) rotateX(18deg);
            transform: rotateY(360deg) rotateZ(36deg) rotateX(18deg);
  }
}

<div class="project">
  <div class="word-x">
    <div class="word">
      <div class="s"><svg width="154" height="182" viewBox="0 0 154 182" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M129.781 165.477V116.945H145.958V181.656H0.461548V116.945H16.6379V165.477H129.781Z" fill="#BCBBBC"/>
<path d="M32.8323 149.298H113.714V133.122H32.8323V149.298ZM105.323 0.349084L92.3429 10.0028L140.614 74.9019L153.594 65.248L105.323 0.349084ZM65.2014 38.6106L127.352 90.3718L137.704 77.9411L75.5537 26.1802L65.2014 38.6106ZM44.9115 74.581L118.232 108.728L125.062 94.0641L51.7409 59.917L44.9115 74.581ZM34.4385 112.481L113.592 129.117L116.919 113.286L37.7655 96.6501L34.4385 112.481Z" fill="#F48023"/>
      </div>
      <div class="s"><svg width="154" height="182" viewBox="0 0 154 182" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M129.781 165.477V116.945H145.958V181.656H0.461548V116.945H16.6379V165.477H129.781Z" fill="#BCBBBC"/>
<path d="M32.8323 149.298H113.714V133.122H32.8323V149.298ZM105.323 0.349084L92.3429 10.0028L140.614 74.9019L153.594 65.248L105.323 0.349084ZM65.2014 38.6106L127.352 90.3718L137.704 77.9411L75.5537 26.1802L65.2014 38.6106ZM44.9115 74.581L118.232 108.728L125.062 94.0641L51.7409 59.917L44.9115 74.581ZM34.4385 112.481L113.592 129.117L116.919 113.286L37.7655 96.6501L34.4385 112.481Z" fill="#F48023"/>
      </div>
      <div class="s"><svg width="154" height="182" viewBox="0 0 154 182" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M129.781 165.477V116.945H145.958V181.656H0.461548V116.945H16.6379V165.477H129.781Z" fill="#BCBBBC"/>
<path d="M32.8323 149.298H113.714V133.122H32.8323V149.298ZM105.323 0.349084L92.3429 10.0028L140.614 74.9019L153.594 65.248L105.323 0.349084ZM65.2014 38.6106L127.352 90.3718L137.704 77.9411L75.5537 26.1802L65.2014 38.6106ZM44.9115 74.581L118.232 108.728L125.062 94.0641L51.7409 59.917L44.9115 74.581ZM34.4385 112.481L113.592 129.117L116.919 113.286L37.7655 96.6501L34.4385 112.481Z" fill="#F48023"/>
      </div>
      <div class="s"><svg width="154" height="182" viewBox="0 0 154 182" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M129.781 165.477V116.945H145.958V181.656H0.461548V116.945H16.6379V165.477H129.781Z" fill="#BCBBBC"/>
<path d="M32.8323 149.298H113.714V133.122H32.8323V149.298ZM105.323 0.349084L92.3429 10.0028L140.614 74.9019L153.594 65.248L105.323 0.349084ZM65.2014 38.6106L127.352 90.3718L137.704 77.9411L75.5537 26.1802L65.2014 38.6106ZM44.9115 74.581L118.232 108.728L125.062 94.0641L51.7409 59.917L44.9115 74.581ZM34.4385 112.481L113.592 129.117L116.919 113.286L37.7655 96.6501L34.4385 112.481Z" fill="#F48023"/>
      </div>
      <div class="s"><svg width="154" height="182" viewBox="0 0 154 182" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M129.781 165.477V116.945H145.958V181.656H0.461548V116.945H16.6379V165.477H129.781Z" fill="#BCBBBC"/>
<path d="M32.8323 149.298H113.714V133.122H32.8323V149.298ZM105.323 0.349084L92.3429 10.0028L140.614 74.9019L153.594 65.248L105.323 0.349084ZM65.2014 38.6106L127.352 90.3718L137.704 77.9411L75.5537 26.1802L65.2014 38.6106ZM44.9115 74.581L118.232 108.728L125.062 94.0641L51.7409 59.917L44.9115 74.581ZM34.4385 112.481L113.592 129.117L116.919 113.286L37.7655 96.6501L34.4385 112.481Z" fill="#F48023"/>
      </div>
      <div class="s"><svg width="154" height="182" viewBox="0 0 154 182" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M129.781 165.477V116.945H145.958V181.656H0.461548V116.945H16.6379V165.477H129.781Z" fill="#BCBBBC"/>
<path d="M32.8323 149.298H113.714V133.122H32.8323V149.298ZM105.323 0.349084L92.3429 10.0028L140.614 74.9019L153.594 65.248L105.323 0.349084ZM65.2014 38.6106L127.352 90.3718L137.704 77.9411L75.5537 26.1802L65.2014 38.6106ZM44.9115 74.581L118.232 108.728L125.062 94.0641L51.7409 59.917L44.9115 74.581ZM34.4385 112.481L113.592 129.117L116.919 113.286L37.7655 96.6501L34.4385 112.481Z" fill="#F48023"/>
      </div>
      <div class="s"><svg width="154" height="182" viewBox="0 0 154 182" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M129.781 165.477V116.945H145.958V181.656H0.461548V116.945H16.6379V165.477H129.781Z" fill="#BCBBBC"/>
<path d="M32.8323 149.298H113.714V133.122H32.8323V149.298ZM105.323 0.349084L92.3429 10.0028L140.614 74.9019L153.594 65.248L105.323 0.349084ZM65.2014 38.6106L127.352 90.3718L137.704 77.9411L75.5537 26.1802L65.2014 38.6106ZM44.9115 74.581L118.232 108.728L125.062 94.0641L51.7409 59.917L44.9115 74.581ZM34.4385 112.481L113.592 129.117L116.919 113.286L37.7655 96.6501L34.4385 112.481Z" fill="#F48023"/>
      </div>
      <div class="s"><svg width="154" height="182" viewBox="0 0 154 182" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M129.781 165.477V116.945H145.958V181.656H0.461548V116.945H16.6379V165.477H129.781Z" fill="#BCBBBC"/>
<path d="M32.8323 149.298H113.714V133.122H32.8323V149.298ZM105.323 0.349084L92.3429 10.0028L140.614 74.9019L153.594 65.248L105.323 0.349084ZM65.2014 38.6106L127.352 90.3718L137.704 77.9411L75.5537 26.1802L65.2014 38.6106ZM44.9115 74.581L118.232 108.728L125.062 94.0641L51.7409 59.917L44.9115 74.581ZM34.4385 112.481L113.592 129.117L116.919 113.286L37.7655 96.6501L34.4385 112.481Z" fill="#F48023"/>
      </div>
      <div class="s"><svg width="154" height="182" viewBox="0 0 154 182" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M129.781 165.477V116.945H145.958V181.656H0.461548V116.945H16.6379V165.477H129.781Z" fill="#BCBBBC"/>
<path d="M32.8323 149.298H113.714V133.122H32.8323V149.298ZM105.323 0.349084L92.3429 10.0028L140.614 74.9019L153.594 65.248L105.323 0.349084ZM65.2014 38.6106L127.352 90.3718L137.704 77.9411L75.5537 26.1802L65.2014 38.6106ZM44.9115 74.581L118.232 108.728L125.062 94.0641L51.7409 59.917L44.9115 74.581ZM34.4385 112.481L113.592 129.117L116.919 113.286L37.7655 96.6501L34.4385 112.481Z" fill="#F48023"/>
      </div>
      <div class="s"><svg width="154" height="182" viewBox="0 0 154 182" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M129.781 165.477V116.945H145.958V181.656H0.461548V116.945H16.6379V165.477H129.781Z" fill="#BCBBBC"/>
<path d="M32.8323 149.298H113.714V133.122H32.8323V149.298ZM105.323 0.349084L92.3429 10.0028L140.614 74.9019L153.594 65.248L105.323 0.349084ZM65.2014 38.6106L127.352 90.3718L137.704 77.9411L75.5537 26.1802L65.2014 38.6106ZM44.9115 74.581L118.232 108.728L125.062 94.0641L51.7409 59.917L44.9115 74.581ZM34.4385 112.481L113.592 129.117L116.919 113.286L37.7655 96.6501L34.4385 112.481Z" fill="#F48023"/>
      </div>
    </div>
  </div>
</div>

body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #000;
}
p{
    position: relative;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 2em;
    letter-spacing: 4px;
    overflow: hidden;
    background: linear-gradient(90deg, #000, #fff, #000);
    background-repeat: no-repeat;
    animation: animate 3s linear infinite;
    background-size: 80%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
}
@keyframes animate{
    0%
    {
        background-position: -500%;
    }
    100%
    {
        background-position: 500%;
    }
}

<p>StackOverflow</p>

body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #000;
}
p{
    position: relative;
    color: white;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 2em;
    letter-spacing: 4px;
    animation: animate 3s linear infinite;
    background-size: 80%;
}
@keyframes animate{
    50%{color: white;}
    50%{color: orange; text-shadow: 0 0 5px orange, 0 0 10px orange;}

	<img src="https://upload.wikimedia.org/wikipedia/commons/8/81/Stackoverflow_icon.png">
	<p>StackOverflow</p>

const h1 = document.querySelector('h1');
const h1Bound = h1.getBoundingClientRect();
charming(h1, {
	tagName: 'div',
	setClassName: () => {}
});
gsap.set(h1, {
	width: h1Bound.width,
	height: h1Bound.width
});

const divs = h1.querySelectorAll('div');
const angle = 360 / divs.length;

divs.forEach((div, index) => {
	charming(div, {
		tagName: 'span',
		setClassName: () => {}
	});
	const span = div.querySelector('span'); 
	gsap.set(div, { rotate: angle * index });
	
	gsap.set(span, {
		rotate: - angle * index,
		opacity: 0,
		scale: 0
	})
});

const circle = document.querySelector('.circle');

gsap.set(circle, {
	width: h1Bound.width,
	height: h1Bound.width
});

const inner = circle.querySelector('.inner');

const config = {
	holdDuration: 1 * 1000,
	holdStatus: false,
	holdComplete: false
};

circle.addEventListener('mouseenter', function() {
	if (config.holdComplete) return;
	gsap.to(this, {
		scale: 1.1,
		duration: 0.5
	});
	config.holdStatus = true;
	const date = Date.now();
	const callback = () => {
		const difference = Date.now() - date;
		const percentHold = 100 * difference / config.holdDuration;
		gsap.set(inner, {
			height: percentHold + '%'
		});
		if (percentHold >= 100) return holdHandle();
		if (config.holdStatus) requestAnimationFrame(callback);
	}
	requestAnimationFrame(callback);
});

circle.addEventListener('mouseleave', function() {
	if (config.holdComplete) return;
	gsap.to(this, {
		scale: 1,
		duration: 0.5,
		ease: "elastic.out(1, 0.4)"
	});
	config.holdStatus = false;
	gsap.to(inner, {
		duration: 0.1,
		height: 0
	});
});

const holdHandle = () => {
	config.holdComplete = true;
	config.holdStatus = false;
	const tl = new gsap.timeline({
		delay: 0.5
	});
	tl.resume();
	tl.add(gsap.to(inner, {
		duration: 1,
		opacity: 0
	}));
	tl.add(gsap.to(circle, {
		duration: 0.5,
		scale: 1,
		cursor: 'default'
	}), '-=1');
	divs.forEach(div => {
		const span = div.querySelector('span');
		tl.add(gsap.to(span, {
			duration: 0.3,
			opacity: 1,
			scale: 1,
			ease: "back.out(3)"
		}), '-=0.2');
	});
	tl.play();
}

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.circle {
  width: 25vw;
  height: 25vw;
  background-color: #bcbbbb;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle .logo {
  width: 50%;
  height: 50%;
  object-fit: contain;
  -webkit-mask-image: url("https://image.flaticon.com/icons/svg/2111/2111806.svg");
  -webkit-mask-size: contain;
  background-color: #f48023;
}
.circle .inner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background-color: #f48023;
}

h1 {
  /* display: none */
  font-weight: 800;
  font-size: 35px;
  transform-origin: center;
  transform-style: preserve-3d;
  position: absolute;
  pointer-events: none;
}
h1 div {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
}
h1 div span {
  display: block;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://bundle.run/charming"></script>

<div class="circle">
	<div class="logo"></div>
	<div class="inner"></div>
</div>
<h1>STACKOVERFLOW</h1>

const nearDist = 0.1;
const farDist = 30000;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75,
window.innerWidth / window.innerHeight, nearDist, farDist);
camera.position.x = farDist * -10;
camera.position.z = 500;
const renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.querySelector("#canvas-wrapper").appendChild(renderer.domElement);
const cubeSize = 200;
const radius = 4;  
const detail = 2;  
var rectLight = new THREE.RectAreaLight( 0xffffff50, 110, 110, 110 );
rectLight.position.set( 0, 5, 5 );
scene.add( rectLight );
const geometry = new THREE.TetrahedronBufferGeometry(radius, detail);
const material = new THREE.MeshNormalMaterial(); 
const group = new THREE.Group();
for (let i = 0; i < 4000; i++) 
{
const mesh = new THREE.Mesh(geometry, material);
const dist = farDist / 3;
const distDouble = dist * 2;
const tau = 2 * Math.PI; 
mesh.position.x = Math.random() * distDouble - dist;
mesh.position.y = Math.random() * distDouble - dist;
mesh.position.z = Math.random() * distDouble - dist;
mesh.rotation.x = Math.random() * tau;
mesh.rotation.y = Math.random() * tau;
mesh.rotation.z = Math.random() * tau;
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
group.add(mesh);
}

scene.add(group);
const loader = new THREE.FontLoader();
const textMesh = new THREE.Mesh();
const createTypo = font => {
  const word = "StackOverflow";
  const typoProperties = {
    font: font,
    size: cubeSize,
    height: cubeSize / 2,
    curveSegments: 20,
    bevelEnabled: true,
    bevelSize: 6,
    bevelOffset: 1,
    bevelSegments: 0 };



  const text = new THREE.TextGeometry(word, typoProperties, rectLight);
  textMesh.geometry = text;
  textMesh.material = material;
  textMesh.position.x = cubeSize * -2;
  textMesh.position.z = cubeSize * -1;
  scene.add(textMesh);
};


let mouseX = 0;
let mouseY = 0;
const mouseFX = {
  windowHalfX: window.innerWidth / 2,
  windowHalfY: window.innerHeight / 2,
  coordinates: function (coordX, coordY) {
    mouseX = (coordX - mouseFX.windowHalfX) * 10;
    mouseY = (coordY - mouseFX.windowHalfY) * 10;
  },
  onMouseMove: function (e) {
    mouseFX.coordinates(e.clientX, e.clientY);
  },
  onTouchMove: function (e) {
    mouseFX.coordinates(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
  } };
const render = () => {
  requestAnimationFrame(render);
  camera.position.x += (mouseX - camera.position.x) * 0.04;
  camera.position.y += (mouseY * -1 - camera.position.y) * 0.04;
  camera.lookAt(scene.position); 
  const t = Date.now() * 0.0005;
  const rx = Math.sin(t * 0.5) * 0.1;
  const ry = Math.sin(t * 0.0) * 0.1;
  const rz = Math.sin(t * 0.0) * 0.1;
  group.rotation.x = rx;
  group.rotation.y = ry;
  group.rotation.z = rz;
  textMesh.rotation.x = rx;
  textMesh.rotation.y = ry;
  textMesh.rotation.z = rx; 
  renderer.render(scene, camera);
};
render();

document.addEventListener("mousemove", mouseFX.onMouseMove, false);
document.addEventListener("touchmove", mouseFX.onTouchMove, false);
loader.load("https://threejs.org/examples/fonts/helvetiker_regular.typeface.json", createTypo);

body {
=
  margin: 0;
  padding: 0;
  overflow: hidden;
}

*{
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js'></script>
  <div id="canvas-wrapper">