Waves with blurred backdrop - JavaScript Segments

index.html

<canvas></canvas>
<section>
  <h1>32teeth</h1>
  <h2>this pen needs ❤</h2>
</section>
<div class='blur'></div>

script.js

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const blur = document.querySelector('.blur');

const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;

const lava = {
  count: 100,
  springs: [],
  d: 0.005,
  t: 0.05,
  y: 0,
  dy: 0,
  hit: false,
  init: () => {
    lava.y = 300;
    for (let n = 0; n < lava.count; n++) {
      lava.springs.push({
        x: ((width / lava.count) * n),
        y: lava.y,
        w: ((width / lava.count) * 2),
        p: 0,
        v: 0,
        step: 0,
        update: function (d, t) {
          this.v += (-(t * this.p) - (d * this.v));
          this.p += this.v;

          if (lava.y !== this.y && this.step < 20) {
            lava.y < this.y ? this.y -= lava.dy : this.y += lava.dy;
            this.step++;
          }

          if (this.step === 20) {
            this.y = lava.y;
            this.step = 0;
          }
        }
      });
    }
    setTimeout(() => {
      lava.reset();
      lava.drop(width / 2, 250);
    }, 1000);
  },
  draw: () => {
    for (let n = 0; n < lava.count; n++) {
      let p = lava.springs[n];
      if (n % 2 === 0) {
        ctx.beginPath();

        ctx.fillStyle = 'rgba(193, 216, 240, 0.3)';
        ctx.fillRect((p.x), p.y + p.p, p.w, height);

        ctx.fillStyle = 'rgba(193, 216, 240, 0.1)';
        let tops = 50;
        while (tops > 1) {
          tops /= 2;
          ctx.fillRect(p.x, p.y + p.p, p.w, tops);
        }

        ctx.fill();
        ctx.closePath();
      }
    }
    blur.style.top = `${lava.y + 2}px`;
  },
  update: (spread) => {
    for (let n = 0; n < lava.count; n++) {
      lava.springs[n].update(lava.d, lava.t);
    }

    let left = [];
    let right = [];

    for (let t = 0; t < 8; t++) {
      for (let i = 0; i < lava.count; i++) {
        if (i > 0) {
          left[i] = spread * (lava.springs[i].p - lava.springs[i - 1].p);
          lava.springs[i - 1].v += left[i];
        }
        if (i < lava.count - 1) {
          right[i] = spread * (lava.springs[i].p - lava.springs[i + 1].p);
          lava.springs[i + 1].v += right[i];
        }
      }

      for (let i = 0; i < lava.count; i++) {
        if (i > 0) {
          lava.springs[i - 1].p += left[i];
        }
        if (i < lava.count - 1) {
          lava.springs[i + 1].p += right[i];
        }
      }
    }

    lava.draw();
  },
  reset: () => {
    lava.hit = false;
    let dy = Math.floor(range(height / 2 + height / 10, height / 2 - height / 10));
    lava.dy = Math.floor(Math.abs(lava.y - dy)) / 5;
    lava.y = dy;

    return dy;
  },
  drop: (x, m) => {
    let seed = Math.floor(x / (width / lava.count));
    if (seed % 2 !== 0) {
      seed += 1;
    }
    lava.springs[seed].p = m;
  }
}

const range = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

setInterval(() => {
  lava.drop(range(0, width), range(100, 250));
  lava.reset();
}, 5000);


lava.init();
lava.drop(range(0, width), range(100, 250));
lava.reset();

(loop = () => {
  requestAnimationFrame(loop);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  lava.update(0.5);
})();

style.css

@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap:400,100,500,300italic,500italic,700italic,900,300');

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  font-family: 'Poppins';
  margin: 0;
  padding: 0;
}

canvas {
  position: absolute;
  width: 100vw;
  height: 100vh;
  border: solid;
  background: rgba(193,216,240, 0.1);
  z-index: 3;
}

.blur {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  backdrop-filter: blur(3px);
  z-index: 2;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1;
  transform: scale(1.25);
}

section h1, section h2 {
  font-size: 2rem;
  color: rgba(0, 0, 0, 0.5);
  margin: 0.25rem;
}

section h1 {
  border-style: solid;
  border-width: 2mm;
  border-radius: 10mm;
  font-size: 2rem;
  padding: 2mm 8mm;
}

section h2 {
  font-size: 1rem;
}

waves-with-blurred-backdrop-javascript-segments.markdown

Waves with blurred backdrop - JavaScript Segments

A Pen by Eugene Andruszczenko on CodePen.

License.