* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;

font-family:
    Arial,
    Helvetica,
    sans-serif;

background: #03050b;
}

/* ==============================
   SCENE
============================== */

.scene {
  position: relative;

width: 100vw;
  height: 100vh;

overflow: hidden;

background:
    radial-gradient(
      circle at 50% 50%,
      #101a32 0%,
      #070b17 42%,
      #020308 100%
    );
}

/* ==============================
   CANVAS
============================== */

#energyCanvas {
  position: absolute;

inset: 0;

width: 100%;
  height: 100%;
}

/* ==============================
   CENTER CONTENT
============================== */

.content {
  position: absolute;

left: 50%;
  top: 50%;

transform:
    translate(-50%, -50%);

text-align: center;

pointer-events: none;

z-index: 5;
}

/* ==============================
   BADGE
============================== */

.badge {
  display: inline-block;

margin-bottom: 20px;

padding:
    8px 14px;

border:
    1px solid rgba(120, 220, 255, .25);

border-radius: 30px;

background:
    rgba(30, 80, 120, .1);

color:
    rgba(150, 225, 255, .7);

font-size: 9px;

letter-spacing: 3px;

backdrop-filter:
    blur(8px);
}

/* ==============================
   TITLE
============================== */

h1 {
  margin: 0;

color: white;

font-size:
    clamp(55px, 10vw, 130px);

line-height: .8;

letter-spacing: -.07em;

font-weight: 900;

text-shadow:
    0 0 40px rgba(70, 180, 255, .18);
}

h1 span {
  display: block;

color: transparent;

-webkit-text-stroke:
    1px rgba(120, 210, 255, .5);

font-weight: 300;

letter-spacing: .08em;
}

.content p {
  margin-top: 30px;

color:
    rgba(200, 220, 240, .45);

font-size: 11px;

letter-spacing: 4px;

text-transform: uppercase;
}

/* ==============================
   INSTRUCTIONS
============================== */

.instructions {
  position: absolute;

bottom: 30px;

left: 50%;

transform:
    translateX(-50%);

display: flex;

align-items: center;

gap: 14px;

color:
    rgba(180, 210, 230, .35);

font-size: 8px;

letter-spacing: 2px;

white-space: nowrap;

z-index: 5;
}

.instructions span {
  width: 3px;
  height: 3px;

border-radius: 50%;

background: #65dcff;

box-shadow:
    0 0 8px #65dcff;
}

const canvas =
  document.getElementById("energyCanvas");

const ctx =
  canvas.getContext("2d");

let width;
let height;

let particles = [];

const mouse = {
  x: null,
  y: null,
  radius: 180
};

/* =====================================
   RESIZE
===================================== */

function resize() {

width =
    canvas.width =
    window.innerWidth;

height =
    canvas.height =
    window.innerHeight;

}

resize();

window.addEventListener(
  "resize",
  resize
);

/* =====================================
   MOUSE
===================================== */

window.addEventListener(
  "mousemove",
  function(e) {

mouse.x = e.clientX;
    mouse.y = e.clientY;

}
);

window.addEventListener(
  "mouseleave",
  function() {

mouse.x = null;
    mouse.y = null;

}
);

/* =====================================
   PARTICLE
===================================== */

class Particle {

constructor() {

this.x =
      Math.random() * width;

this.y =
      Math.random() * height;

this.size =
      Math.random() * 2.2 + .6;

this.baseSpeedX =
      (Math.random() - .5) * .6;

this.baseSpeedY =
      (Math.random() - .5) * .6;

this.vx =
      this.baseSpeedX;

this.vy =
      this.baseSpeedY;

this.hue =
      Math.random() * 70 + 180;

}

update() {

/* gentle natural drift */

this.vx +=
      (this.baseSpeedX - this.vx) * .01;

this.vy +=
      (this.baseSpeedY - this.vy) * .01;

/* mouse attraction */

if (
      mouse.x !== null &&
      mouse.y !== null
    ) {

const dx =
        mouse.x - this.x;

const dy =
        mouse.y - this.y;

const distance =
        Math.sqrt(
          dx * dx +
          dy * dy
        );

if (
        distance <
        mouse.radius
      ) {

const force =
          (
            mouse.radius -
            distance
          ) /
          mouse.radius;

const angle =
          Math.atan2(
            dy,
            dx
          );

this.vx +=
          Math.cos(angle) *
          force *
          .06;

this.vy +=
          Math.sin(angle) *
          force *
          .06;

}

this.x += this.vx;
    this.y += this.vy;

/* wrap around screen */

if (this.x < -20)
      this.x = width + 20;

if (this.x > width + 20)
      this.x = -20;

if (this.y < -20)
      this.y = height + 20;

if (this.y > height + 20)
      this.y = -20;

}

draw() {

ctx.beginPath();

ctx.arc(
      this.x,
      this.y,
      this.size,
      0,
      Math.PI * 2
    );

ctx.fillStyle =
      `hsla(
        ${this.hue},
        100%,
        72%,
        .9
      )`;

ctx.shadowBlur = 12;

ctx.shadowColor =
      `hsl(
        ${this.hue},
        100%,
        60%
      )`;

ctx.fill();

ctx.shadowBlur = 0;

}

/* =====================================
   CREATE PARTICLES
===================================== */

function createParticles() {

particles = [];

const amount =
    Math.min(
      150,
      Math.floor(
        width * height /
        7500
      )
    );

for (
    let i = 0;
    i < amount;
    i++
  ) {

particles.push(
      new Particle()
    );

}

createParticles();

/* =====================================
   CONNECT PARTICLES
===================================== */

function connectParticles() {

for (
    let a = 0;
    a < particles.length;
    a++
  ) {

for (
      let b = a + 1;
      b < particles.length;
      b++
    ) {

const dx =
        particles[a].x -
        particles[b].x;

const dy =
        particles[a].y -
        particles[b].y;

const distance =
        Math.sqrt(
          dx * dx +
          dy * dy
        );

const maxDistance = 110;

if (
        distance <
        maxDistance
      ) {

const opacity =
          1 -
          distance /
          maxDistance;

ctx.beginPath();

ctx.moveTo(
          particles[a].x,
          particles[a].y
        );

ctx.lineTo(
          particles[b].x,
          particles[b].y
        );

ctx.strokeStyle =
          `rgba(
            80,
            190,
            255,
            ${opacity * .16}
          )`;

ctx.lineWidth = .7;

ctx.stroke();

}

/* =====================================
   MOUSE ENERGY RING
===================================== */

function drawMouseField() {

if (
    mouse.x === null ||
    mouse.y === null
  ) return;

const gradient =
    ctx.createRadialGradient(
      mouse.x,
      mouse.y,
      0,

mouse.x,
      mouse.y,
      mouse.radius
    );

gradient.addColorStop(
    0,
    "rgba(80,220,255,.08)"
  );

gradient.addColorStop(
    .45,
    "rgba(90,120,255,.035)"
  );

gradient.addColorStop(
    1,
    "rgba(0,0,0,0)"
  );

ctx.beginPath();

ctx.arc(
    mouse.x,
    mouse.y,
    mouse.radius,
    0,
    Math.PI * 2
  );

ctx.fillStyle = gradient;

ctx.fill();

}

/* =====================================
   CLICK EXPLOSION
===================================== */

window.addEventListener(
  "mousedown",
  function(e) {

particles.forEach(
      particle => {

const dx =
          particle.x -
          e.clientX;

const dy =
          particle.y -
          e.clientY;

const distance =
          Math.sqrt(
            dx * dx +
            dy * dy
          );

if (
          distance < 250
        ) {

const force =
            (
              250 -
              distance
            ) /
            250;

const angle =
            Math.atan2(
              dy,
              dx
            );

particle.vx +=
            Math.cos(angle) *
            force *
            12;

particle.vy +=
            Math.sin(angle) *
            force *
            12;

}

}
    );

}
);

/* =====================================
   ANIMATION
===================================== */

function animate() {

ctx.clearRect(
    0,
    0,
    width,
    height
  );

drawMouseField();

particles.forEach(
    particle => {

particle.update();
      particle.draw();

}
  );

connectParticles();

requestAnimationFrame(
    animate
  );

}

animate();

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground