Interactive Hero with 3D Particle Background

<div id="lumo-root" class="relative w-full h-screen overflow-hidden bg-[#0a0a0a] text-white selection:bg-purple-500/30"
  style="font-family: 'Playfair Display', serif;">
  <!-- Fonts Import -->
  <link
    href="https://fonts.googleapis.com/css2?family=Italianno&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Space+Mono:wght@400;700&display=swap"
    rel="stylesheet">

  <!-- Custom Styles for Masking & Animations -->
  <style>
    @keyframes fadeIn {
      from {
        opacity: 0;
        filter: blur(10px);
      }

      to {
        opacity: 1;
        filter: blur(0);
      }
    }

    @keyframes pulse-slow {

      0%,
      100% {
        opacity: 0.3;
      }

      50% {
        opacity: 0.6;
      }
    }

    .mask-layer {
      mask-image: radial-gradient(circle 220px at var(--mouse-x, 50%) var(--mouse-y, 50%), transparent 0%, black 100%);
      -webkit-mask-image: radial-gradient(circle 220px at var(--mouse-x, 50%) var(--mouse-y, 50%), transparent 0%, black 100%);
    }

    .mono-text {
      font-family: 'Space Mono', monospace;
    }

    .script-text {
      font-family: 'Italianno', cursive;
    }

    .noise-bg {
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
  </style>

  <!-- Canvas Background -->
  <div id="three-canvas-container" class="absolute inset-0 z-0"></div>

  <!-- Blur Overlay (The "Fog" that reveals via mask) -->
  <div
    class="mask-layer absolute inset-0 z-10 backdrop-blur-2xl bg-[#0a0a0a]/40 pointer-events-none transition-all duration-75">
  </div>

  <!-- Visual Noise Overlay -->
  <div class="noise-bg absolute inset-0 z-20 opacity-[0.03] pointer-events-none mix-blend-overlay"></div>

  <!-- UI Layer -->
  <div class="relative z-30 h-full flex flex-col justify-between p-8 md:p-16 pointer-events-none">
    <!-- Top Navigation -->
    <header class="flex justify-between items-center border-b border-white/10 pb-6 pointer-events-auto">
      <div class="text-2xl italic font-semibold tracking-tighter">LUMO<span class="text-purple-400">.</span></div>
      <nav class="hidden md:flex gap-12 items-center">
        <a href="#"
          class="mono-text text-[10px] uppercase tracking-widest hover:text-purple-400 transition-colors">Portfolios</a>
        <a href="#" class="mono-text text-[10px] uppercase tracking-widest hover:text-purple-400 transition-colors">The
          Studio</a>
        <a href="#"
          class="px-5 py-2 border border-white/20 mono-text text-[10px] hover:bg-white hover:text-black transition-all">Contact</a>
      </nav>
    </header>

    <!-- Hero Content -->
    <main class="text-center md:text-left">
      <div class="overflow-hidden">
        <h1 class="text-6xl md:text-[10rem] leading-[0.85] tracking-tighter uppercase mb-6"
          style="animation: fadeIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;">
          Creative<br><span class="script-text lowercase text-purple-300 normal-case opacity-80">Production</span>
        </h1>
      </div>
      <div class="flex flex-col md:flex-row gap-8 items-center pointer-events-auto"
        style="animation: fadeIn 2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s;">
        <p class="mono-text text-[11px] uppercase tracking-[0.3em] text-white/50 max-w-xs leading-relaxed">
          Engineering digital experiences through light, motion, and code.
        </p>
        <div class="flex gap-4">
          <button class="px-8 py-4 bg-purple-600 text-white mono-text text-[10px] font-bold hover:bg-purple-500 hover:shadow-[0_0_30px_rgba(168,85,247,0.4)] transition-all uppercase">Explore Works</button>
          <button class="px-8 py-4 border border-white/10 hover:border-white/40 mono-text text-[10px] transition-all uppercase">Reel '24</button>
        </div>
      </div>
    </main>

    <!-- Footer Stats -->
    <footer class="flex justify-between items-end border-t border-white/10 pt-6 pointer-events-auto">
      <div class="mono-text text-[9px] text-white/30 uppercase tracking-widest flex flex-col gap-1">
        <span>Coordinates: 40.7128° N, 74.0060° W</span>
        <span>Current Phase: Iteration_04</span>
      </div>
      <div class="flex flex-col items-end gap-2">
        <div class="w-12 h-[1px] bg-purple-500/50"></div>
        <div class="mono-text text-[9px] uppercase tracking-widest">Est. MMXXIV</div>
      </div>
    </footer>
  </div>

  <!-- Custom Cursor -->
  <div id="cursor-ring"
    class="fixed w-10 h-10 border border-purple-400/50 rounded-full pointer-events-none z-[9999] transition-transform duration-300 ease-out flex items-center justify-center">
    <div class="w-1 h-1 bg-purple-400 rounded-full"></div>
  </div>

  <!-- Scripts -->
  <script type="module">
    import * as THREE from 'https://cdn.skypack.dev/three@0.150.0';

        const container = document.getElementById('three-canvas-container');
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        container.appendChild(renderer.domElement);

        // Geometry: Floating Particle Cloud
        const particlesGeometry = new THREE.BufferGeometry();
        const count = 4000;
        const positions = new Float32Array(count * 3);
        const colors = new Float32Array(count * 3);

        for(let i = 0; i < count * 3; i++) {
            positions[i] = (Math.random() - 0.5) * 12;
            colors[i] = Math.random();
        }

        particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
        particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

        const particlesMaterial = new THREE.PointsMaterial({
            size: 0.015,
            sizeAttenuation: true,
            vertexColors: true,
            transparent: true,
            opacity: 0.6,
            blending: THREE.AdditiveBlending
        });

        const particles = new THREE.Points(particlesGeometry, particlesMaterial);
        scene.add(particles);

        camera.position.z = 4;

        // Interaction Logic
        const root = document.getElementById('lumo-root');
        const ring = document.getElementById('cursor-ring');
        let targetX = 0, targetY = 0;
        let currentX = 0, currentY = 0;

        window.addEventListener('mousemove', (e) => {
            const x = (e.clientX / window.innerWidth) * 100;
            const y = (e.clientY / window.innerHeight) * 100;
            root.style.setProperty('--mouse-x', `${x}%`);
            root.style.setProperty('--mouse-y', `${y}%`);
            
            targetX = e.clientX;
            targetY = e.clientY;

            // Subtle parallax for 3D
            particles.rotation.y = (e.clientX / window.innerWidth - 0.5) * 0.4;
            particles.rotation.x = (e.clientY / window.innerHeight - 0.5) * 0.4;
        });

        function animate() {
            requestAnimationFrame(animate);
            particles.rotation.y += 0.001;
            
            // Smooth cursor follow
            currentX += (targetX - currentX) * 0.15;
            currentY += (targetY - currentY) * 0.15;
            ring.style.transform = `translate(${currentX - 20}px, ${currentY - 20}px)`;

            renderer.render(scene, camera);
        }

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

        animate();

        // Cursor scaling on buttons
        document.querySelectorAll('button, a').forEach(el => {
            el.addEventListener('mouseenter', () => ring.style.transform += ' scale(2)');
            el.addEventListener('mouseleave', () => ring.style.transform = ring.style.transform.replace(' scale(2)', ''));
        });
  </script>
</div>