3D Creative Studio Hero with Custom Cursor

<div class="relative w-full h-screen overflow-hidden bg-[#0a0a0a] text-white select-none"
  style="--c-accent: #a855f7; --font-serif: 'Playfair Display', serif; --font-mono: 'Space Mono', monospace;">
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
      }
    }
  </script>

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Italianno&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Space+Mono:wght@400;700&display=swap');

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

    @keyframes fadeIn {
      from {
        opacity: 0;
        filter: blur(10px);
      }

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

    @keyframes pulse-glow {

      0%,
      100% {
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
      }

      50% {
        box-shadow: 0 0 40px rgba(192, 132, 252, 0.7);
      }
    }

    @keyframes bounce-custom {

      0%,
      20%,
      50%,
      80%,
      100% {
        transform: translate(-50%, 0);
      }

      40% {
        transform: translate(-50%, -10px);
      }
    }

    .animate-slow {
      animation: fadeIn 3s cubic-bezier(0.2, 0, 0.2, 1) forwards;
    }
  </style>

  <div id="three-canvas-container" class="fixed inset-0 z-0">
    <script type="module">
      import * as THREE from 'three';
      import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
      import { PCDLoader } from 'three/addons/loaders/PCDLoader.js';

      const container = document.getElementById('three-canvas-container');
      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);

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 100);
      camera.position.set(0, 0, 1.2);

      const controls = new OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;
      controls.autoRotate = true;
      controls.autoRotateSpeed = 0.5;
      controls.enablePan = false;

      const loader = new PCDLoader();
      loader.load('https://threejs.org/examples/models/pcd/binary/Zaghetto.pcd', (points) => {
        points.geometry.center();
        points.geometry.rotateX(Math.PI);
        points.material.size = 0.0025;
        points.material.color.setHex(0xa855f7);
        scene.add(points);
      }, undefined, () => {
        const geo = new THREE.SphereGeometry(0.4, 64, 64);
        const mat = new THREE.PointsMaterial({ size: 0.002, color: 0xa855f7, transparent: true, opacity: 0.6 });
        scene.add(new THREE.Points(geo, mat));
      });

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

      function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
      }
      animate();
    </script>
  </div>

  <div class="absolute inset-0 z-10 pointer-events-none backdrop-blur-[20px] blur-mask transition-[backdrop-filter]">
  </div>
  <div class="absolute inset-0 z-20 pointer-events-none opacity-10 mix-blend-overlay"
    style="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.6\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23n)\'/%3E%3C/svg%3E');">
  </div>

  <div class="relative z-30 flex flex-col justify-between w-full h-full p-8 md:p-16 pointer-events-none">
    <header class="flex justify-between items-center border-b border-white/10 pb-6">
      <a href="#" class="pointer-events-auto text-2xl uppercase italic tracking-tighter"
        style="font-family: var(--font-serif);">LUMO studios</a>
      <nav class="hidden md:flex gap-12">
        <a href="#"
          class="pointer-events-auto text-[0.7rem] uppercase tracking-widest hover:text-[#a855f7] transition-colors"
          style="font-family: var(--font-mono);">Projects</a>
        <a href="#"
          class="pointer-events-auto text-[0.7rem] uppercase tracking-widest hover:text-[#a855f7] transition-colors"
          style="font-family: var(--font-mono);">Capabilities</a>
      </nav>
    </header>

    <main class="text-center">
      <h1 class="animate-slow text-6xl md:text-9xl uppercase leading-[0.85] tracking-tighter mb-8"
        style="font-family: var(--font-serif); animation-delay: 0.5s;">Creative<br>Production</h1>
      <p class="animate-slow text-[0.7rem] uppercase tracking-[0.2em] text-[#a855f7] mb-12"
        style="font-family: var(--font-mono); animation-delay: 1.2s;">Defining the visual edge of tomorrow</p>
      <div class="animate-slow flex flex-col md:flex-row justify-center gap-6 pointer-events-auto"
        style="animation-delay: 1.8s;">
        <a href="#"
          class="px-10 py-4 bg-[#a855f7] text-white font-bold text-[0.7rem] uppercase tracking-widest hover:translate-y-[-2px] transition-all hover:shadow-[0_0_30px_rgba(168,85,247,0.6)]"
          style="font-family: var(--font-mono); animation: pulse-glow 2s infinite;">Start Free Trial</a>
        <a href="#"
          class="px-10 py-4 border border-white/30 text-white text-[0.7rem] uppercase tracking-widest hover:bg-[#a855f7]/10 hover:border-[#a855f7] hover:translate-y-[-2px] transition-all"
          style="font-family: var(--font-mono);">View Demo</a>
      </div>
    </main>

    <div class="flex justify-between items-end">
      <div class="text-[0.7rem] border-l border-[#a855f7] pl-4 text-zinc-400 leading-relaxed"
        style="font-family: var(--font-mono);">
        <span class="block text-[#a855f7] opacity-80 mb-1">||| || | |||</span>
        EST. 2024 / STUDIO BLANC
      </div>
      <div class="absolute left-1/2 bottom-8 -translate-x-1/2 flex flex-col items-center opacity-70"
        style="animation: bounce-custom 2s infinite;">
        <div class="w-4 h-4 border-b-2 border-r-2 border-[#a855f7] rotate-45"></div>
      </div>
    </div>
  </div>

  <div id="custom-cursor" class="fixed top-0 left-0 pointer-events-none z-[9999]">
    <div class="dot absolute w-1 h-1 bg-[#a855f7] -translate-x-1/2 -translate-y-1/2"></div>
    <div
      class="outline absolute w-10 h-10 border border-[#a855f7]/50 rounded-full -translate-x-1/2 -translate-y-1/2 transition-[width,height] duration-200 flex items-center justify-center">
      <div class="absolute w-[140%] h-[1px] bg-[#a855f7]/20"></div>
      <div class="absolute h-[140%] w-[1px] bg-[#a855f7]/20"></div>
    </div>
    <script>
      const cursor = document.getElementById('custom-cursor');
      const outline = cursor.querySelector('.outline');
      const blurLayer = document.querySelector('.blur-mask');
      let mx = 0, my = 0, cx = 0, cy = 0;

      window.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; });
      
      function tick() {
        cx += (mx - cx) * 0.1;
        cy += (my - cy) * 0.1;
        cursor.style.transform = `translate(${mx}px, ${my}px)`;
        outline.style.transform = `translate(${cx - mx}px, ${cy - my}px)`;
        blurLayer.style.setProperty('--x', `${(cx / window.innerWidth) * 100}%`);
        blurLayer.style.setProperty('--y', `${(cy / window.innerHeight) * 100}%`);
        requestAnimationFrame(tick);
      }
      tick();

      document.querySelectorAll('a, button').forEach(el => {
        el.addEventListener('mouseenter', () => { outline.style.width = '60px'; outline.style.height = '60px'; outline.style.borderColor = '#a855f7'; });
        el.addEventListener('mouseleave', () => { outline.style.width = '40px'; outline.style.height = '40px'; outline.style.borderColor = 'rgba(168,85,247,0.5)'; });
      });
    </script>
  </div>
</div>