1npm install framer-motion clsx tailwind-merge

1"use client";
2
3import { useRef, useState } from "react";
4import { Canvas, useFrame } from "@react-three/fiber";
5import { Float, Environment, ContactShadows } from "@react-three/drei";
6import { motion } from "framer-motion";
7
8const InteractiveShape = () => {
9  const mesh = useRef();
10  const [hovered, setHover] = useState(false);
11
12  useFrame((state) => {
13    if (mesh.current) {
14      mesh.current.rotation.x = state.clock.getElapsedTime() * 0.2;
15      mesh.current.rotation.y = state.clock.getElapsedTime() * 0.3;
16      
17      // Gentle scale pulsing when hovered
18      const targetScale = hovered ? 1.1 : 1;
19      mesh.current.scale.lerp({ x: targetScale, y: targetScale, z: targetScale }, 0.1);
20    }
21  });
22
23  return (
24    <Float speed={2} rotationIntensity={1} floatIntensity={2}>
25      <mesh 
26        ref={mesh}
27        onPointerOver={() => setHover(true)}
28        onPointerOut={() => setHover(false)}
29      >
30        <torusKnotGeometry args={[1, 0.3, 128, 32]} />
31        <meshPhysicalMaterial 
32          color={hovered ? "#ff00ff" : "#00f0ff"}
33          metalness={0.9}
34          roughness={0.1}
35          clearcoat={1}
36          clearcoatRoughness={0.1}
37          transmission={0.5}
38          thickness={0.5}
39        />
40      </mesh>
41    </Float>
42  );
43};
44
45export default function Interactive3DHero() {
46  return (
47    <div className="relative w-full min-h-[600px] flex items-center justify-center overflow-hidden rounded-3xl bg-gradient-to-b from-[#0a0a0a] to-[#000000] border border-white/5">
48      
49      {/* 3D Canvas Background */}
50      <div className="absolute inset-0 z-0">
51        <Canvas camera={{ position: [0, 0, 5], fov: 45 }}>
52          <ambientLight intensity={0.5} />
53          <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
54          <pointLight position={[-10, -10, -10]} />
55          <InteractiveShape />
56          <ContactShadows position={[0, -2, 0]} opacity={0.5} scale={10} blur={2} far={4} />
57          <Environment preset="city" />
58        </Canvas>
59      </div>
60
61      {/* Foreground Content */}
62      <div className="relative z-10 flex flex-col items-center text-center px-6 max-w-2xl pointer-events-none mt-40">
63        <motion.h1 
64          initial={{ opacity: 0, y: 20 }}
65          animate={{ opacity: 1, y: 0 }}
66          transition={{ duration: 0.8, ease: "easeOut" }}
67          className="text-5xl md:text-7xl font-extrabold tracking-tight text-white mb-6 drop-shadow-2xl"
68        >
69          Spatial Computing for the Web.
70        </motion.h1>
71        
72        <motion.p 
73          initial={{ opacity: 0, y: 20 }}
74          animate={{ opacity: 1, y: 0 }}
75          transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
76          className="text-lg text-gray-300 drop-shadow-md mb-8"
77        >
78          Integrate high-fidelity 3D models and interactive experiences directly into your React applications with zero friction.
79        </motion.p>
80        
81        <motion.button 
82          initial={{ opacity: 0, y: 20 }}
83          animate={{ opacity: 1, y: 0 }}
84          transition={{ duration: 0.8, delay: 0.4, ease: "easeOut" }}
85          className="pointer-events-auto px-8 py-4 bg-white/10 hover:bg-white/20 backdrop-blur-md border border-white/20 text-white rounded-full font-medium transition-colors"
86        >
87          Explore the 3D Engine
88        </motion.button>
89      </div>
90    </div>
91  );
92}
93