script.js

import * as THREE from 'https://unpkg.com/three@0.165.0/build/three.module.js';

const canvas = document.querySelector('#scene');

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 7);

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);

const geometry = new THREE.IcosahedronGeometry(1.8, 1);
const material = new THREE.MeshStandardMaterial({
  color: 0x7cf9ff,
  emissive: 0x3e3a90,
  roughness: 0.2,
  metalness: 0.85,
  wireframe: true,
});
const orb = new THREE.Mesh(geometry, material);
scene.add(orb);

const ambientLight = new THREE.AmbientLight(0xffffff, 0.45);
const keyLight = new THREE.PointLight(0x8f6dff, 1.2, 100);
keyLight.position.set(2, 3, 4);
scene.add(ambientLight, keyLight);

const pointer = { x: 0, y: 0 };
window.addEventListener('pointermove', (event) => {
  pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
  pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
});

const clock = new THREE.Clock();
const animate = () => {
  const elapsed = clock.getElapsedTime();

  orb.rotation.x = elapsed * 0.25 + pointer.y * 0.6;
  orb.rotation.y = elapsed * 0.35 + pointer.x * 0.6;
  orb.position.y = Math.sin(elapsed * 1.1) * 0.2;

  renderer.render(scene, camera);
  requestAnimationFrame(animate);
};
animate();

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
      }
    });
  },
  { threshold: 0.18 }
);
reveals.forEach((item) => observer.observe(item));