3D Particle Hero with Custom Cursor

<div
  style="--c-bg-base: #0a0b0c; --c-bg-overlay: rgba(255, 255, 255, 0.05); --c-text-main: #e2e8e4; --c-text-muted: #8a948e; --c-accent: #c5a059; --c-secondary-accent: #1a1d1b; --ease-fluid: cubic-bezier(0.2, 0.0, 0.2, 1); --font-mono: 'Space Mono', monospace; background-color: var(--c-bg-base); color: var(--c-text-main); height: 100vh; width: 100vw; overflow: hidden; position: relative; font-family: -apple-system, BlinkMacSystemFont, sans-serif;">

  <style>
    .layer-blur {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
      z-index: 2;
      pointer-events: none;
      mask-image: radial-gradient(circle 220px at var(--x, 50%) var(--y, 50%), transparent 0%, black 100%);
      -webkit-mask-image: radial-gradient(circle 220px at var(--x, 50%) var(--y, 50%), transparent 0%, black 100%);
    }

    .noise-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 3;
      opacity: 0.08;
      pointer-events: none;
      mix-blend-mode: overlay;
      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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .nav-link {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--c-text-main);
      text-decoration: none;
      transition: 0.3s;
      pointer-events: auto;
    }

    .nav-link:hover {
      color: var(--c-accent);
      text-shadow: 0 0 10px rgba(197, 160, 89, 0.5);
    }

    .hero-title {
      font-size: 7.5rem;
      line-height: 0.8;
      font-weight: 300;
      letter-spacing: -0.04em;
      text-transform: uppercase;
      opacity: 0;
      animation: reveal 2.5s var(--ease-fluid) forwards 0.3s;
    }

    @keyframes reveal {
      from {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(10px);
      }

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

    .btn-gold {
      background: var(--c-accent);
      color: #000;
      font-family: var(--font-mono);
      font-weight: 700;
      transition: 0.4s var(--ease-fluid);
    }

    .btn-gold:hover {
      background: #fff;
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(197, 160, 89, 0.3);
    }

    .cursor-outline {
      position: fixed;
      top: 0;
      left: 0;
      width: 45px;
      height: 45px;
      border: 1px solid rgba(197, 160, 89, 0.4);
      border-radius: 50%;
      z-index: 9999;
      pointer-events: none;
      transform: translate(-50%, -50%);
      transition: width 0.3s, height 0.3s;
    }
  </style>

  <div id="three-canvas-container" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;">
    <script type="module">
      import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js';
            const container = document.getElementById('three-canvas-container');
            const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            container.appendChild(renderer.domElement);
            const scene = new THREE.Scene();
            scene.background = new THREE.Color(0x0a0b0c);
            const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 100);
            camera.position.z = 2;
            const points = [];
            const pCount = 12000;
            const pos = new Float32Array(pCount * 3);
            for(let i=0; i<pCount*3; i++) pos[i] = (Math.random() - 0.5) * 2.5;
            const geo = new THREE.BufferGeometry();
            geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
            const mat = new THREE.PointsMaterial({ size: 0.002, color: 0xc5a059, transparent: true, opacity: 0.6 });
            const cloud = new THREE.Points(geo, mat);
            scene.add(cloud);
            function animate() {
                requestAnimationFrame(animate);
                cloud.rotation.y += 0.001;
                cloud.rotation.x += 0.0005;
                renderer.render(scene, camera);
            }
            animate();
            window.addEventListener('resize', () => {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            });
    </script>
  </div>

  <div class="layer-blur"></div>
  <div class="noise-overlay"></div>

  <div
    style="position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 4rem; pointer-events: none;">
    <header
      style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 2rem;">
      <a href="#" class="nav-link" style="font-size: 1.5rem; font-style: italic; letter-spacing: -0.02em;">AETHER
        studios</a>
      <nav style="display: flex; gap: 3rem;">
        <a href="#" class="nav-link">Artifacts</a>
        <a href="#" class="nav-link">Intelligence</a>
        <a href="#" class="nav-link">Contact</a>
      </nav>
    </header>

    <main style="text-align: center; width: 100%;">
      <h1 class="hero-title">Digital<br>Alchemy</h1>
      <p
        style="font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4em; color: var(--c-text-muted); margin-top: 2rem; opacity: 0; animation: reveal 2s ease forwards 1s;">
        Transcending the boundaries of light and space
      </p>
      <div
        style="margin-top: 4rem; display: flex; gap: 2rem; justify-content: center; pointer-events: auto; opacity: 0; animation: reveal 2s ease forwards 1.5s;">
        <a href="#" class="btn-gold"
          style="padding: 1.2rem 3rem; text-decoration: none; font-size: 0.7rem; letter-spacing: 0.2em;">BEGIN
          JOURNEY</a>
        <a href="#" class="nav-link"
          style="border: 1px solid rgba(255,255,255,0.2); padding: 1.2rem 3rem; font-size: 0.7rem;">CASE STUDIES</a>
      </div>
    </main>

    <footer style="display: flex; justify-content: space-between; align-items: flex-end;">
      <div
        style="font-family: var(--font-mono); font-size: 0.65rem; color: var(--c-text-muted); border-left: 2px solid var(--c-accent); padding-left: 1.5rem;">
        COORD: 40.7128° N, 74.0060° W<br>
                STATUS: OPERATIONAL // V.2.0.4
      </div>
      <div style="font-family: var(--font-mono); font-size: 0.65rem; color: var(--c-text-muted); opacity: 0.5;">
        SCROLL TO NAVIGATE
      </div>
    </footer>
  </div>

  <div class="cursor-dot"
    style="position: fixed; top: 0; left: 0; width: 4px; height: 4px; background: var(--c-accent); border-radius: 50%; z-index: 10000; pointer-events: none; transform: translate(-50%, -50%);">
  </div>
  <div class="cursor-outline"></div>

  <script>
    const blur = document.querySelector('.layer-blur');
        const dot = document.querySelector('.cursor-dot');
        const outline = document.querySelector('.cursor-outline');
        let mx = 0, my = 0, ox = 0, oy = 0;

        window.addEventListener('mousemove', e => {
            mx = e.clientX; my = e.clientY;
            dot.style.transform = `translate(${mx}px, ${my}px)`;
            const xp = (mx / window.innerWidth) * 100;
            const yp = (my / window.innerHeight) * 100;
            blur.style.setProperty('--x', xp + '%');
            blur.style.setProperty('--y', yp + '%');
        });

        function tick() {
            ox += (mx - ox) * 0.15;
            oy += (my - oy) * 0.15;
            outline.style.transform = `translate(${ox}px, ${oy}px)`;
            requestAnimationFrame(tick);
        }
        tick();

        document.querySelectorAll('a').forEach(el => {
            el.addEventListener('mouseenter', () => { outline.style.width = '70px'; outline.style.height = '70px'; outline.style.background = 'rgba(197, 160, 89, 0.1)'; });
            el.addEventListener('mouseleave', () => { outline.style.width = '45px'; outline.style.height = '45px'; outline.style.background = 'transparent'; });
        });
  </script>
</div>