Interactive Hero with WebGL Background and Typewriter

<div class="relative min-h-screen bg-gray-950 text-gray-50 font-sans overflow-x-hidden antialiased selection:bg-gray-800 selection:text-white">
    <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

    <!-- Spaced Out CSS Grid Background -->
    <div class="absolute inset-0 z-0 pointer-events-none" style="background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 160px 160px;"></div>

    <!-- Beam Animations Container -->
    <div id="beams-container" class="absolute inset-0 z-0 pointer-events-none overflow-hidden"></div>

    <!-- WebGL Canvas Container -->
    <canvas id="webgl-canvas" class="absolute inset-0 w-full h-full z-0 pointer-events-none"></canvas>

    <!-- Gradient Overlays for Blending -->
    <div class="absolute top-0 left-0 right-0 h-48 bg-gradient-to-b from-gray-950 via-gray-950/80 to-transparent z-0 pointer-events-none"></div>
    <div class="absolute bottom-0 left-0 right-0 h-48 bg-gradient-to-t from-gray-950 via-gray-950/80 to-transparent z-0 pointer-events-none"></div>

    <!-- Main Content -->
    <main class="relative z-10 flex flex-col items-center justify-center min-h-screen px-4 sm:px-6 lg:px-8 py-20">
        
        <div class="flex flex-col items-center text-center max-w-4xl mx-auto">
            <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extralight tracking-tight text-white mb-6 sm:mb-8 leading-[1.1] h-[120px] sm:h-[140px] md:h-[160px] lg:h-[180px]">
                Architect and deploy <br class="hidden sm:block" /> 
                <span id="typewriter" class="font-light text-gray-200"></span><span id="cursor" style="opacity: 1;" class="text-gray-400 font-light">|</span>
            </h1>
            
            <p class="text-base sm:text-lg md:text-xl text-gray-400 max-w-2xl mb-10 sm:mb-12 font-extralight leading-relaxed">
                Our platform provides the essential foundation needed to build, educate, and orchestrate intelligent agents with sophisticated logic and autonomy.
            </p>
            
            <div class="flex flex-col sm:flex-row items-center gap-4 w-full sm:w-auto">
                <button class="w-full sm:w-auto flex items-center justify-center gap-2 bg-white hover:bg-gray-100 text-gray-950 px-8 py-3.5 rounded-full text-sm font-extralight transition-all shadow-lg shadow-white/5 active:scale-95">
                    <iconify-icon icon="solar:play-linear" class="-rotate-90 text-xs" stroke-width="1.5"></iconify-icon>
                    Deploy Agent
                </button>
                
                <!-- Flashlight Border Hover Wrapper -->
                <div class="flashlight-wrapper relative group p-[1px] rounded-full overflow-hidden w-full sm:w-auto bg-gray-800 active:scale-95 transition-all cursor-pointer">
                    <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none z-0"
                         style="background: radial-gradient(circle 60px at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.7), transparent 100%);"></div>
                    <button class="relative z-10 w-full flex items-center justify-center bg-gray-950/90 backdrop-blur-md hover:bg-gray-900/90 text-white px-8 py-3.5 rounded-full text-sm font-extralight transition-colors">
                        Talk to Us
                    </button>
                </div>
            </div>
        </div>

    </main>

    <script>
        // --- Typewriter Animation ---
        const twWords = ["autonomous AI agents.", "smart neural networks.", "cognitive workflows."];
        let twIndex = 0;
        let twCharIndex = 0;
        let twIsDeleting = false;
        const twElement = document.getElementById('typewriter');
        
        function typeWriter() {
            const currentWord = twWords[twIndex % twWords.length];
            if (twIsDeleting) twCharIndex--;
            else twCharIndex++;
            
            twElement.textContent = currentWord.substring(0, twCharIndex);
            let speed = twIsDeleting ? 30 : 70;
            
            if (!twIsDeleting && twCharIndex === currentWord.length) {
                speed = 2500;
                twIsDeleting = true;
            } else if (twIsDeleting && twCharIndex === 0) {
                twIsDeleting = false;
                twIndex++;
                speed = 500;
            }
            setTimeout(typeWriter, speed);
        }
        typeWriter();
        
        setInterval(() => {
            const cursor = document.getElementById('cursor');
            cursor.style.opacity = cursor.style.opacity === '1' ? '0' : '1';
        }, 500);

        // --- Flashlight Hover Effect ---
        const flashlights = document.querySelectorAll('.flashlight-wrapper');
        flashlights.forEach(wrapper => {
            wrapper.addEventListener('mousemove', e => {
                const rect = wrapper.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                wrapper.style.setProperty('--x', `${x}px`);
                wrapper.style.setProperty('--y', `${y}px`);
            });
        });

        // --- Beam Animations Setup ---
        const beamsContainer = document.getElementById('beams-container');
        const beams = [];
        for(let j=1; j<=4; j++) {
            let line = document.createElement('div');
            line.className = "absolute left-0 right-0 h-[1px] bg-white/5";
            line.style.top = (j * 20) + "%";
            
            let beam = document.createElement('div');
            beam.className = "absolute top-0 bottom-0 w-64";
            beam.style.background = "linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent)";
            beam.style.transform = "translateX(-100%)";
            
            line.appendChild(beam);
            beamsContainer.appendChild(line);
            beams.push({ el: beam, pos: -400 - Math.random() * 800, speed: 1.5 + Math.random() * 2.5 });
        }

        // --- WebGL Scene Setup ---
        const canvas = document.getElementById('webgl-canvas');
        const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true, powerPreference: "high-performance" });
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); 
        renderer.setSize(window.innerWidth, window.innerHeight);

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 130;
        camera.position.y = 0;

        const triangleGroup = new THREE.Group();
        const triRadius = 40; 
        const triLineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.35 });
        
        const numNested = 120; 
        for(let i = 0; i < numNested; i++) {
            const scale = 1 - (i / numNested);
            const triGeo = new THREE.BufferGeometry();
            const currR = triRadius * scale;
            const yOffset = - (1 - scale) * 16; 
            
            const pts = new Float32Array([
                0, currR + yOffset, 0,
                -currR * 0.866, -currR * 0.5 + yOffset, 0,
                currR * 0.866, -currR * 0.5 + yOffset, 0,
                0, currR + yOffset, 0 
            ]);
            
            triGeo.setAttribute('position', new THREE.BufferAttribute(pts, 3));
            const triLine = new THREE.Line(triGeo, triLineMaterial);
            triLine.position.z = i * 0.01; 
            triangleGroup.add(triLine);
        }
        scene.add(triangleGroup);

        const particleCount = 600;
        const particleGeo = new THREE.BufferGeometry();
        const particlePos = new Float32Array(particleCount * 3);
        for(let i=0; i<particleCount * 3; i+=3) {
            particlePos[i] = (Math.random() - 0.5) * 350;
            particlePos[i+1] = (Math.random() - 0.5) * 350;
            particlePos[i+2] = (Math.random() - 0.5) * 120;
        }
        particleGeo.setAttribute('position', new THREE.BufferAttribute(particlePos, 3));
        const particleMat = new THREE.PointsMaterial({
            color: 0xaaaaaa, size: 1.2, transparent: true, opacity: 0.4, blending: THREE.AdditiveBlending
        });
        const particles = new THREE.Points(particleGeo, particleMat);
        scene.add(particles);

        let time = 0;
        let mouseX = 0;
        let mouseY = 0;
        let targetX = 0;
        let targetY = 0;

        document.addEventListener('mousemove', (event) => {
            mouseX = (event.clientX - window.innerWidth / 2) * 0.0005;
            mouseY = (event.clientY - window.innerHeight / 2) * 0.0005;
        });

        function animate() {
            requestAnimationFrame(animate);
            time += 0.002;

            targetX = targetX + (mouseX - targetX) * 0.05;
            targetY = targetY + (mouseY - targetY) * 0.05;
            
            const pulse = 1 + Math.sin(time * 3) * 0.01;
            triangleGroup.scale.set(pulse, pulse, pulse);
            triangleGroup.rotation.y = Math.sin(time * 1.5) * 0.05 + targetX;
            triangleGroup.rotation.x = targetY;

            particles.rotation.y = time * 0.15 + targetX * 1.5;
            particles.rotation.x = targetY * 1.5;
            particles.position.x = targetX * 30;
            particles.position.y = Math.sin(time) * 3 - targetY * 30;

            // Animate Beams
            beams.forEach(b => {
                b.pos += b.speed;
                if(b.pos > window.innerWidth + 400) b.pos = -400 - Math.random() * 800;
                b.el.style.transform = `translateX(${b.pos}px)`;
            });

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

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