<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Number Universe</title>

<body>

<div class="eyebrow">
      LIVE DATA STREAM
    </div>

<div class="stat">
        <span class="label">VELOCITY</span>
        <span class="value" id="velocity">0</span>
      </div>

<div class="stat">
        <span class="label">PARTICLES</span>
        <span class="value">500</span>
      </div>

<div class="stat">
        <span class="label">SIGNAL</span>
        <span class="value" id="signal">98.4%</span>
      </div>

</div>

<div class="hint">
      MOVE YOUR MOUSE
    </div>

</div>

</body>
</html>

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050505;
  font-family:
    "Courier New",
    monospace;
}

#canvas-container {
  position: fixed;
  inset: 0;
}

/* UI */

.interface {
  position: fixed;
  inset: 0;

display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

pointer-events: none;

color: white;
}

/* tiny heading */

.eyebrow {
  font-size: 11px;
  letter-spacing: 5px;

margin-bottom: 20px;

opacity: .45;
}

/* MAIN NUMBER */

.number-container {
  position: relative;
}

#main-number {
  font-size: clamp(
    70px,
    14vw,
    200px
  );

font-weight: 700;

letter-spacing: -10px;

line-height: .85;

text-shadow:
    0 0 30px rgba(255,255,255,.15);
}

/* horizontal line */

.number-container::after {
  content: "";

position: absolute;

left: 50%;
  bottom: -25px;

width: 80px;
  height: 1px;

transform:
    translateX(-50%);

background:
    rgba(255,255,255,.5);
}

/* STATS */

.stats {
  display: flex;

gap: 70px;

margin-top: 65px;
}

.stat {
  display: flex;
  flex-direction: column;

text-align: center;

gap: 7px;
}

.label {
  font-size: 9px;

letter-spacing: 3px;

opacity: .35;
}

.value {
  font-size: 16px;

letter-spacing: 1px;
}

/* Mouse hint */

.hint {
  position: absolute;

bottom: 40px;

font-size: 9px;

letter-spacing: 4px;

opacity: .25;
}

/* subtle vignette */

body::after {
  content: "";

position: fixed;

inset: 0;

pointer-events: none;

background:
    radial-gradient(
      circle,
      transparent 30%,
      rgba(0,0,0,.8) 100%
    );
}

/* =============================
   THREE.JS SETUP
============================= */

const container =
  document.getElementById(
    "canvas-container"
  );

const scene =
  new THREE.Scene();

scene.fog =
  new THREE.FogExp2(
    0x050505,
    0.025
  );

const camera =
  new THREE.PerspectiveCamera(
    70,
    window.innerWidth /
    window.innerHeight,
    0.1,
    1000
  );

camera.position.z = 35;

/* Renderer */

const renderer =
  new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
  });

renderer.setSize(
  window.innerWidth,
  window.innerHeight
);

renderer.setPixelRatio(
  Math.min(
    window.devicePixelRatio,
    2
  )
);

container.appendChild(
  renderer.domElement
);

/* =============================
   NUMBER TEXTURES
============================= */

function createNumberTexture(number) {

const canvas =
    document.createElement("canvas");

canvas.width = 128;
  canvas.height = 128;

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

ctx.clearRect(
    0,
    0,
    128,
    128
  );

ctx.font =
    "bold 60px Courier New";

ctx.textAlign =
    "center";

ctx.textBaseline =
    "middle";

ctx.fillStyle =
    "white";

ctx.fillText(
    number,
    64,
    64
  );

return new THREE.CanvasTexture(
    canvas
  );
}

/* Create textures 0–9 */

const textures = [];

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

textures.push(
    createNumberTexture(i)
  );

}

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

const numbers = [];

const NUMBER_COUNT = 500;

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

const randomNumber =
    Math.floor(
      Math.random() * 10
    );

const material =
    new THREE.SpriteMaterial({

map:
        textures[randomNumber],

transparent: true,

opacity:
        Math.random() * .6 + .1

});

const sprite =
    new THREE.Sprite(
      material
    );

/* random 3D position */

sprite.position.set(

(Math.random() - .5) * 80,

(Math.random() - .5) * 50,

(Math.random() - .5) * 80

);

const size =
    Math.random() * 1.2 + .25;

sprite.scale.set(
    size,
    size,
    size
  );

sprite.userData.speed =
    Math.random() * .025
    + .005;

scene.add(sprite);

numbers.push(sprite);

}

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

let mouseX = 0;
let mouseY = 0;

document.addEventListener(
  "mousemove",
  (event) => {

mouseX =
      (event.clientX /
      window.innerWidth - .5);

mouseY =
      (event.clientY /
      window.innerHeight - .5);

}
);

/* =============================
   MAIN NUMBER COUNTER
============================= */

const mainNumber =
  document.getElementById(
    "main-number"
  );

const counter = {
  value: 0
};

gsap.to(
  counter,
  {

value: 999999,

duration: 30000,

repeat: -1,

ease: "none",

onUpdate: () => {

mainNumber.textContent =
        Math.floor(
          counter.value
        )
        .toString()
        .padStart(
          6,
          "0"
        );

}

}
);

/* =============================
   RANDOM SIGNAL
============================= */

const signal =
  document.getElementById(
    "signal"
  );

setInterval(() => {

const value =
    95 +
    Math.random() * 5;

signal.textContent =
    value.toFixed(1)
    + "%";

}, 700);

/* =============================
   VELOCITY
============================= */

const velocity =
  document.getElementById(
    "velocity"
  );

setInterval(() => {

velocity.textContent =
    Math.floor(
      800 +
      Math.random() * 500
    );

}, 120);

/* =============================
   MAIN ANIMATION LOOP
============================= */

function animate() {

requestAnimationFrame(
    animate
  );

/* Move number particles */

numbers.forEach(
    number => {

number.position.z +=
        number.userData.speed;

/*
       recycle numbers
       when they reach camera
      */

if (
        number.position.z > 30
      ) {

number.position.z =
          -50;

}

}
  );

/* Mouse controlled camera */

camera.position.x +=
    (
      mouseX * 5 -
      camera.position.x
    ) * .03;

camera.position.y +=
    (
      -mouseY * 3 -
      camera.position.y
    ) * .03;

camera.lookAt(
    scene.position
  );

renderer.render(
    scene,
    camera
  );

}

animate();

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

window.addEventListener(
  "resize",
  () => {

camera.aspect =
      window.innerWidth /
      window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(
      window.innerWidth,
      window.innerHeight
    );

}
);

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