portifolio-evandrodevbr/app/components/cinematic/HeroScene.tsx

"use client";

import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { useEffect, useMemo, useRef } from "react";
import * as THREE from "three";

type HeroSceneVariant =
  | "command"
  | "launch"
  | "rescue"
  | "signal"
  | "diagnostic"
  | "portrait";

function GridFloor() {
  const meshRef = useRef<THREE.Mesh>(null);

  useFrame((state) => {
    if (meshRef.current) {
      const material = meshRef.current.material as THREE.ShaderMaterial;
      if (material.uniforms) {
        material.uniforms.uTime.value = state.clock.elapsedTime;
      }
    }
  });

  const gridShader = useMemo(
    () => ({
      uniforms: {
        uTime: { value: 0 },
        uColor: { value: new THREE.Color("#ccff00") },
      },
      vertexShader: `
        varying vec2 vUv;
        varying vec3 vPosition;
        void main() {
          vUv = uv;
          vPosition = position;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
      `,
      fragmentShader: `
        uniform float uTime;
        uniform vec3 uColor;
        varying vec2 vUv;
        varying vec3 vPosition;

        void main() {
          vec2 grid = abs(fract(vPosition.xz * 0.5) - 0.5) / fwidth(vPosition.xz * 0.5);
          float line = min(grid.x, grid.y);
          float alpha = 1.0 - min(line, 1.0);

          // Distance fade
          float dist = length(vPosition.xz) * 0.08;
          alpha *= max(0.0, 1.0 - dist);
          alpha *= 0.12;

          // Pulse wave
          float wave = sin(length(vPosition.xz) * 0.3 - uTime * 0.8) * 0.5 + 0.5;
          alpha *= 0.5 + wave * 0.5;

          gl_FragColor = vec4(uColor, alpha);
        }
      `,
    }),
    [],
  );

  return (
    <mesh ref={meshRef} rotation={[-Math.PI / 2, 0, 0]} position={[0, -4, 0]}>
      <planeGeometry args={[40, 40, 1, 1]} />
      <shaderMaterial
        {...gridShader}
        transparent
        side={THREE.DoubleSide}
        depthWrite={false}
      />
    </mesh>
  );
}

function CameraRig() {
  const { camera } = useThree();
  const mouseRef = useRef({ x: 0, y: 0 });

  useFrame(() => {
    const targetX = mouseRef.current.x * 0.5;
    const targetY = mouseRef.current.y * 0.3 + 0.5;
    camera.position.x += (targetX - camera.position.x) * 0.02;
    camera.position.y += (targetY - camera.position.y) * 0.02;
    camera.lookAt(0, 0, 0);
  });

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      mouseRef.current.x = (e.clientX / window.innerWidth) * 2 - 1;
      mouseRef.current.y = -(e.clientY / window.innerHeight) * 2 + 1;
    };
    window.addEventListener("mousemove", handler);
    return () => window.removeEventListener("mousemove", handler);
  }, []);

  return null;
}

export default function HeroScene({ variant }: { variant?: HeroSceneVariant }) {
  void variant;
  return (
    <div
      className="absolute inset-0 z-0"
      style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}
    >
      <Canvas
        camera={{ position: [0, 0.5, 8], fov: 60, near: 0.1, far: 100 }}
        dpr={[1, 1.5]}
        gl={{
          antialias: false,
          alpha: true,
          powerPreference: "high-performance",
        }}
        style={{
          background: "transparent",
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          display: "block",
        }}
      >
        <fog attach="fog" args={["#0a0a0a", 8, 30]} />
        <ambientLight intensity={0.25} />
        <directionalLight
          position={[5, 5, 5]}
          intensity={0.4}
          color="#ccff00"
        />
        <pointLight position={[-5, 3, -5]} intensity={0.2} color="#ffffff" />

        <CameraRig />
        <GridFloor />
      </Canvas>
    </div>
  );
}