EXLYRA Clone

I'll help you create a complete EXLYRA clone with Three.js and GSAP. Here's the full setup: EXLYRA Clone

Section 1

Section 2

Section 3

// Three.js scene setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#bg'), antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); camera.position.setZ(30); // Particles const particlesGeometry = new THREE.BufferGeometry(); const particleCount = 5000; const posArray = new Float32Array(particleCount * 3); for(let i = 0; i < particleCount * 3; i++) { posArray[i] = (Math.random() - 0.5) * 100; } particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3)); const particlesMaterial = new THREE.PointsMaterial({ size: 0.1, color: 0xffffff, transparent: true, opacity: 0.8 }); const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial); scene.add(particlesMesh); // Animation loop function animate() { requestAnimationFrame(animate); particlesMesh.rotation.x += 0.0005; particlesMesh.rotation.y += 0.0005; renderer.render(scene, camera); } animate(); // Scroll animation const sections = document.querySelectorAll('.section'); let currentSection = 0; window.addEventListener('wheel', (e) => { if(e.deltaY > 0) { currentSection = Math.min(currentSection + 1, sections.length - 1); } else { currentSection = Math.max(currentSection - 1, 0); } gsap.to(window, { duration: 1, scrollTo: {y: sections[currentSection].offsetTop, autoKill: false}, ease: 'power2.inOut' }); }); // Handle resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); body { margin: 0; padding: 0; overflow-x: hidden; } .section { height: 100vh; display: flex; justify-content: center; align-items: center; color: white; font-size: 3rem; text-align: center; position: relative; z-index: 1; }