Lava Silk Flow

HTML

CSS

JS

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let time = 0;
let mouse = { x: 0, y: 0 };
function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
window.onresize = resize;
window.onmousemove = (e) => { mouse.x = e.clientX; mouse.y = e.clientY; };
resize();
function draw() {
  ctx.fillStyle = 'rgba(5, 5, 5, 0.15)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  const step = 8;
  const amplitude = 100;
  for (let x = 0; x < canvas.width; x += step) {
    const hue = (x / canvas.width * 60) + 240 + Math.sin(time) * 30;
    ctx.strokeStyle = `hsla(${hue}, 80%, 50%, 0.4)`;
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(x, 0);
    for (let y = 0; y < canvas.height; y += 20) {
      const distortion = Math.sin(y * 0.005 + time + (x * 0.002)) * amplitude;
      const mouseEffect = Math.atan2(mouse.y - y, mouse.x - x) * 20;
      const offsetX = x + distortion + mouseEffect;
      ctx.lineTo(offsetX, y);
    }
    ctx.stroke();
  }
  time += 0.015;
  requestAnimationFrame(draw);
}
draw();

Ad #1

Ad #2