* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 40%,
      #18233e 0%,
      #090d18 45%,
      #020308 100%
    );
  font-family: Arial, Helvetica, sans-serif;
}

#scene {
  position: fixed;
  inset: 0;
}

canvas {
  display: block;
}

.title {
  position: fixed;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  text-align: center;
  z-index: 10;
  pointer-events: none;
}

.title h1 {
  font-size: clamp(22px, 4vw, 42px);
  font-weight: 300;
  letter-spacing: 8px;
  text-transform: uppercase;

text-shadow:
    0 0 10px rgba(255, 255, 255, 0.4),
    0 0 30px rgba(80, 150, 255, 0.4);
}

.title p {
  margin-top: 8px;
  opacity: 0.55;
  font-size: 12px;
  letter-spacing: 3px;
}

.hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);

color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  letter-spacing: 2px;

pointer-events: none;
  z-index: 10;
}

// ========================================
// SCENE
// ========================================

var scene = new THREE.Scene();

scene.fog = new THREE.FogExp2(
  0x05070d,
  0.045
);

// ========================================
// CAMERA
// ========================================

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

camera.position.set(0, 2, 12);

// ========================================
// RENDERER
// ========================================

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

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

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

renderer.setClearColor(0x000000, 0);

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

// ========================================
// CONTROLS
// ========================================

var controls = new THREE.OrbitControls(
  camera,
  renderer.domElement
);

controls.enableDamping = true;
controls.dampingFactor = 0.06;

controls.enablePan = false;

controls.minDistance = 7;
controls.maxDistance = 20;

// ========================================
// LIGHTING
// ========================================

var ambient = new THREE.AmbientLight(
  0xffffff,
  0.5
);

scene.add(ambient);

var blueLight = new THREE.PointLight(
  0x3366ff,
  3,
  30
);

blueLight.position.set(-6, 5, 5);

scene.add(blueLight);

var purpleLight = new THREE.PointLight(
  0xaa33ff,
  4,
  30
);

purpleLight.position.set(6, 3, 4);

scene.add(purpleLight);

var cyanLight = new THREE.PointLight(
  0x00ffff,
  3,
  30
);

cyanLight.position.set(0, -4, -5);

scene.add(cyanLight);

var spot = new THREE.SpotLight(
  0xffffff,
  3
);

spot.position.set(0, 10, 5);

spot.angle = Math.PI / 5;
spot.penumbra = 1;

scene.add(spot);

// ========================================
// MAIN GROUP
// ========================================

var world = new THREE.Group();

scene.add(world);

// ========================================
// MATERIALS
// ========================================

var metallicBlue =
  new THREE.MeshPhysicalMaterial({
    color: 0x1769ff,
    metalness: 0.85,
    roughness: 0.18,
    clearcoat: 1,
    clearcoatRoughness: 0.08
  });

var metallicPurple =
  new THREE.MeshPhysicalMaterial({
    color: 0x9b38ff,
    metalness: 0.75,
    roughness: 0.18,
    clearcoat: 1
  });

var crystalMaterial =
  new THREE.MeshPhysicalMaterial({
    color: 0x44ccff,
    transparent: true,
    opacity: 0.7,
    roughness: 0.05,
    metalness: 0.15,
    clearcoat: 1
  });

// ========================================
// LEFT OBJECT - TORUS KNOT
// ========================================

var knotGeometry =
  new THREE.TorusKnotGeometry(
    1.45,
    0.42,
    180,
    28
  );

var knot =
  new THREE.Mesh(
    knotGeometry,
    metallicBlue
  );

knot.position.x = -3.8;

world.add(knot);

// ========================================
// CENTER OBJECT - ICOSAHEDRON
// ========================================

var icoGeometry =
  new THREE.IcosahedronGeometry(
    1.7,
    2
  );

var ico =
  new THREE.Mesh(
    icoGeometry,
    metallicPurple
  );

world.add(ico);

// Wireframe overlay

var wireMaterial =
  new THREE.MeshBasicMaterial({
    color: 0xffffff,
    wireframe: true,
    transparent: true,
    opacity: 0.12
  });

var icoWire =
  new THREE.Mesh(
    icoGeometry,
    wireMaterial
  );

ico.add(icoWire);

// ========================================
// RIGHT OBJECT - CRYSTAL
// ========================================

var crystalGeometry =
  new THREE.OctahedronGeometry(
    1.55,
    0
  );

var crystal =
  new THREE.Mesh(
    crystalGeometry,
    crystalMaterial
  );

crystal.position.x = 3.8;

crystal.scale.y = 1.5;

world.add(crystal);

// ========================================
// FLOATING ORBITAL RINGS
// ========================================

var rings =
  new THREE.Group();

world.add(rings);

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

var ringGeometry =
    new THREE.TorusGeometry(
      5.5 + i * 0.6,
      0.015,
      8,
      160
    );

var ringMaterial =
    new THREE.MeshBasicMaterial({
      color:
        i % 2 === 0
          ? 0x3355ff
          : 0xaa44ff,

transparent: true,
      opacity: 0.18
    });

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

ring.rotation.x =
    Math.PI / 2 +
    Math.random() * 0.25;

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

rings.add(ring);
}

// ========================================
// STAR FIELD
// ========================================

var particleCount = 1800;

var particleGeometry =
  new THREE.BufferGeometry();

var positions =
  new Float32Array(
    particleCount * 3
  );

for (
  var p = 0;
  p < particleCount * 3;
  p += 3
) {

positions[p] =
    (Math.random() - 0.5) * 45;

positions[p + 1] =
    (Math.random() - 0.5) * 30;

positions[p + 2] =
    (Math.random() - 0.5) * 35;
}

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

var particleMaterial =
  new THREE.PointsMaterial({
    color: 0xffffff,
    size: 0.035,
    transparent: true,
    opacity: 0.7
  });

var particles =
  new THREE.Points(
    particleGeometry,
    particleMaterial
  );

scene.add(particles);

// ========================================
// FLOOR
// ========================================

var floorGeometry =
  new THREE.CircleGeometry(
    12,
    100
  );

var floorMaterial =
  new THREE.MeshBasicMaterial({
    color: 0x102040,
    transparent: true,
    opacity: 0.12,
    side: THREE.DoubleSide
  });

var floor =
  new THREE.Mesh(
    floorGeometry,
    floorMaterial
  );

floor.rotation.x =
  -Math.PI / 2;

floor.position.y =
  -2.8;

scene.add(floor);

// ========================================
// MOUSE PARALLAX
// ========================================

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 CLOCK
// ========================================

var clock = new THREE.Clock();

// ========================================
// ANIMATION LOOP
// ========================================

function animate() {

requestAnimationFrame(animate);

var time =
    clock.getElapsedTime();

// Torus knot

knot.rotation.x =
    time * 0.35;

knot.rotation.y =
    time * 0.55;

knot.position.y =
    Math.sin(time * 1.2) * 0.35;

// Center object

ico.rotation.x =
    time * 0.22;

ico.rotation.y =
    time * 0.45;

ico.rotation.z =
    time * 0.15;

ico.position.y =
    Math.sin(
      time * 1.4 + 2
    ) * 0.25;

// Crystal

crystal.rotation.x =
    time * 0.25;

crystal.rotation.y =
    -time * 0.5;

crystal.position.y =
    Math.sin(
      time * 1.1 + 4
    ) * 0.4;

// Orbital rings

rings.rotation.z =
    time * 0.025;

rings.rotation.y =
    time * 0.04;

// Star field

particles.rotation.y =
    time * 0.008;

// Mouse parallax

world.rotation.y +=
    (
      mouseX * 0.15 -
      world.rotation.y
    ) * 0.015;

world.rotation.x +=
    (
      mouseY * 0.07 -
      world.rotation.x
    ) * 0.015;

// Moving lights

blueLight.position.x =
    Math.sin(time * 0.8) * 6;

blueLight.position.z =
    Math.cos(time * 0.8) * 6;

purpleLight.position.x =
    Math.cos(time * 0.65) * 6;

purpleLight.position.z =
    Math.sin(time * 0.65) * 6;

controls.update();

renderer.render(
    scene,
    camera
  );
}

animate();

// ========================================
// RESPONSIVE 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