* {
  box-sizing: border-box;
}

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

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

background:
    radial-gradient(circle at center, #18203a 0%, #090c18 45%, #020309 100%);

font-family: Arial, sans-serif;
}

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

.scene {
  position: relative;
  width: 320px;
  height: 320px;

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

animation: float 4s ease-in-out infinite;
}

/* ==============================
   ENERGY CORE
============================== */

.core {
  position: relative;
  width: 140px;
  height: 140px;

animation: rotate-core 12s linear infinite;
}

/* ==============================
   LAYERED SQUARES
============================== */

.square {
  position: absolute;
  top: 50%;
  left: 50%;

width: 100px;
  height: 100px;

border: 2px solid rgba(100, 220, 255, 0.8);

transform-origin: center;

box-shadow:
    0 0 12px rgba(70, 200, 255, 0.7),
    inset 0 0 20px rgba(70, 200, 255, 0.15);
}

.square-1 {
  transform:
    translate(-50%, -50%)
    rotate(0deg);

animation:
    square-spin-1 5s linear infinite;
}

.square-2 {
  width: 80px;
  height: 80px;

border-color:
    rgba(180, 100, 255, 0.9);

box-shadow:
    0 0 15px rgba(180, 100, 255, 0.8);

animation:
    square-spin-2 4s linear infinite reverse;
}

.square-3 {
  width: 60px;
  height: 60px;

border-color:
    rgba(80, 255, 210, 0.9);

box-shadow:
    0 0 15px rgba(80, 255, 210, 0.8);

animation:
    square-spin-3 3s linear infinite;
}

.square-4 {
  width: 28px;
  height: 28px;

background:
    radial-gradient(
      circle,
      #ffffff 0%,
      #78eaff 30%,
      #6b63ff 65%,
      transparent 70%
    );

border: none;

border-radius: 6px;

box-shadow:
    0 0 20px #78eaff,
    0 0 45px #6b63ff,
    0 0 70px rgba(107, 99, 255, 0.8);

animation:
    pulse 1.8s ease-in-out infinite;
}

/* ==============================
   ORBITAL RINGS
============================== */

.orbital-ring {
  position: absolute;

border: 1px solid
    rgba(100, 180, 255, 0.25);

border-radius: 50%;

pointer-events: none;
}

.ring-1 {
  width: 230px;
  height: 110px;

transform: rotate(20deg);

animation:
    ring-spin-1 9s linear infinite;
}

.ring-2 {
  width: 260px;
  height: 90px;

border-color:
    rgba(190, 90, 255, 0.22);

transform: rotate(-35deg);

animation:
    ring-spin-2 12s linear infinite reverse;
}

/* ==============================
   FLOATING DOTS
============================== */

.dot {
  position: absolute;

width: 8px;
  height: 8px;

border-radius: 50%;

background: white;

box-shadow:
    0 0 8px white,
    0 0 18px #4ddcff;
}

.dot-1 {
  top: -35px;
  left: 65px;

animation:
    dot-pulse 1.5s ease-in-out infinite;
}

.dot-2 {
  bottom: -25px;
  left: 25px;

background: #ca67ff;

box-shadow:
    0 0 8px #ca67ff,
    0 0 20px #ca67ff;

animation:
    dot-pulse 2s ease-in-out infinite;
}

.dot-3 {
  top: 60px;
  right: -40px;

background: #62ffca;

box-shadow:
    0 0 8px #62ffca,
    0 0 20px #62ffca;

animation:
    dot-pulse 1.2s ease-in-out infinite;
}

/* ==============================
   SHADOW
============================== */

.shadow {
  position: absolute;

bottom: -25px;

width: 150px;
  height: 24px;

border-radius: 50%;

background:
    rgba(70, 120, 255, 0.2);

filter: blur(12px);

animation:
    shadow-pulse 4s ease-in-out infinite;
}

/* ==============================
   ANIMATIONS
============================== */

@keyframes float {

0%,
  100% {
    transform:
      translateY(-8px);
  }

50% {
    transform:
      translateY(12px);
  }
}

@keyframes rotate-core {

from {
    transform:
      rotate(0deg);
  }

to {
    transform:
      rotate(360deg);
  }
}

@keyframes square-spin-1 {

from {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }
}

@keyframes square-spin-2 {

from {
    transform:
      translate(-50%, -50%)
      rotate(45deg);
  }

to {
    transform:
      translate(-50%, -50%)
      rotate(405deg);
  }
}

@keyframes square-spin-3 {

from {
    transform:
      translate(-50%, -50%)
      rotate(20deg);
  }

to {
    transform:
      translate(-50%, -50%)
      rotate(380deg);
  }
}

@keyframes pulse {

0%,
  100% {
    transform:
      translate(-50%, -50%)
      scale(0.8);

opacity: 0.7;
  }

50% {
    transform:
      translate(-50%, -50%)
      scale(1.35);

opacity: 1;
  }
}

@keyframes ring-spin-1 {

from {
    transform:
      rotate(20deg);
  }

to {
    transform:
      rotate(380deg);
  }
}

@keyframes ring-spin-2 {

from {
    transform:
      rotate(-35deg);
  }

to {
    transform:
      rotate(325deg);
  }
}

@keyframes dot-pulse {

0%,
  100% {
    transform:
      scale(0.7);

opacity: 0.35;
  }

50% {
    transform:
      scale(1.5);

opacity: 1;
  }
}

@keyframes shadow-pulse {

0%,
  100% {
    transform:
      scaleX(0.8);

opacity: 0.25;
  }

50% {
    transform:
      scaleX(1.15);

opacity: 0.55;
  }
}

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth / window.innerHeight,
  0.1,
  100
);

camera.position.z = 5;

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

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

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

document
  .getElementById("orb")
  .appendChild(renderer.domElement);

// ===============================
// PARTICLE SPHERE
// ===============================

var count = 2200;

var positions =
  new Float32Array(count * 3);

var originalPositions =
  new Float32Array(count * 3);

for (var i = 0; i < count; i++) {

var phi =
    Math.acos(
      2 * Math.random() - 1
    );

var theta =
    Math.random() *
    Math.PI *
    2;

var radius =
    1.7 +
    Math.random() * 0.18;

var x =
    radius *
    Math.sin(phi) *
    Math.cos(theta);

var y =
    radius *
    Math.sin(phi) *
    Math.sin(theta);

var z =
    radius *
    Math.cos(phi);

positions[i * 3] = x;
  positions[i * 3 + 1] = y;
  positions[i * 3 + 2] = z;

originalPositions[i * 3] = x;
  originalPositions[i * 3 + 1] = y;
  originalPositions[i * 3 + 2] = z;
}

var geometry =
  new THREE.BufferGeometry();

geometry.setAttribute(
  "position",
  new THREE.BufferAttribute(
    positions,
    3
  )
);

var material =
  new THREE.PointsMaterial({
    color: 0x55ccff,
    size: 0.025,
    transparent: true,
    opacity: 0.9,
    blending: THREE.AdditiveBlending
  });

var sphere =
  new THREE.Points(
    geometry,
    material
  );

scene.add(sphere);

// ===============================
// INNER GLOW
// ===============================

var glowGeometry =
  new THREE.SphereGeometry(
    1.2,
    32,
    32
  );

var glowMaterial =
  new THREE.MeshBasicMaterial({
    color: 0x2244ff,
    transparent: true,
    opacity: 0.08
  });

var glow =
  new THREE.Mesh(
    glowGeometry,
    glowMaterial
  );

scene.add(glow);

// ===============================
// ORBIT RINGS
// ===============================

var ringMaterial =
  new THREE.MeshBasicMaterial({
    color: 0xaa55ff,
    transparent: true,
    opacity: 0.25,
    side: THREE.DoubleSide
  });

for (var r = 0; r < 3; r++) {

var ringGeometry =
    new THREE.TorusGeometry(
      2.15 + r * 0.18,
      0.006,
      8,
      160
    );

var ring =
    new THREE.Mesh(
      ringGeometry,
      ringMaterial
    );

ring.rotation.x =
    Math.random() * Math.PI;

ring.rotation.y =
    Math.random() * Math.PI;

sphere.add(ring);
}

// ===============================
// MOUSE
// ===============================

var mouseX = 0;
var mouseY = 0;

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

mouseX =
      event.clientX /
      window.innerWidth -
      0.5;

mouseY =
      event.clientY /
      window.innerHeight -
      0.5;
  }
);

// ===============================
// ANIMATION
// ===============================

var clock =
  new THREE.Clock();

function animate() {

requestAnimationFrame(animate);

var time =
    clock.getElapsedTime();

sphere.rotation.y += 0.0025;
  sphere.rotation.x += 0.0008;

// Mouse movement

sphere.rotation.y +=
    (
      mouseX * 0.35 -
      sphere.rotation.y * 0.02
    ) * 0.002;

sphere.rotation.x +=
    mouseY * 0.0007;

// Breathing / energy pulse

var scale =
    1 +
    Math.sin(time * 2) * 0.04;

sphere.scale.set(
    scale,
    scale,
    scale
  );

glow.scale.setScalar(
    1 +
    Math.sin(time * 2) * 0.08
  );

// Slightly distort particles

var pos =
    geometry.attributes.position.array;

for (
    var i = 0;
    i < count;
    i++
  ) {

var index = i * 3;

var ox =
      originalPositions[index];

var oy =
      originalPositions[index + 1];

var oz =
      originalPositions[index + 2];

var wave =
      Math.sin(
        time * 2 +
        oy * 3 +
        ox * 2
      ) * 0.025;

pos[index] =
      ox * (1 + wave);

pos[index + 1] =
      oy * (1 + wave);

pos[index + 2] =
      oz * (1 + wave);
  }

geometry.attributes.position.needsUpdate =
    true;

// Slowly shift hue

material.color.setHSL(
    0.52 +
    Math.sin(time * 0.35) * 0.08,
    0.9,
    0.65
  );

renderer.render(
    scene,
    camera
  );
}

animate();

// ===============================
// RESIZE
// ===============================

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

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

camera.updateProjectionMatrix();

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

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