102 lines
3.5 KiB
TypeScript
102 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { Canvas, useFrame, useThree } from "@react-three/fiber";
|
|
import { useRef, useMemo } from "react";
|
|
import * as THREE from "three";
|
|
import { Float, PerspectiveCamera } from "@react-three/drei";
|
|
|
|
function DNAParticles() {
|
|
const points = useMemo(() => {
|
|
const p = [];
|
|
const count = 120; // Reduced density for simplicity
|
|
const radius = 2.5;
|
|
const height = 20;
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
const angle = (i / count) * Math.PI * 6;
|
|
const x = Math.cos(angle) * radius;
|
|
const y = (i / count) * height - height / 2;
|
|
const z = Math.sin(angle) * radius;
|
|
|
|
// Simple Monochromatic Strands
|
|
p.push({ pos: new THREE.Vector3(x, y, z), color: "#ffffff" });
|
|
p.push({ pos: new THREE.Vector3(-x, y, -z), color: "#71717a" }); // Zinc-400 equivalent
|
|
|
|
// Minimalist Rungs
|
|
if (i % 6 === 0) {
|
|
const rungPoints = 6;
|
|
for (let j = 1; j < rungPoints; j++) {
|
|
const t = j / rungPoints;
|
|
p.push({
|
|
pos: new THREE.Vector3(x * (1 - 2 * t), y, z * (1 - 2 * t)),
|
|
color: "#3f3f46" // Zinc-600 equivalent
|
|
});
|
|
}
|
|
}
|
|
}
|
|
return p;
|
|
}, []);
|
|
|
|
const groupRef = useRef<THREE.Group>(null);
|
|
const { mouse } = useThree();
|
|
|
|
useFrame(() => {
|
|
if (groupRef.current) {
|
|
groupRef.current.rotation.y += 0.0015; // Slower, more professional rotation
|
|
groupRef.current.rotation.x = THREE.MathUtils.lerp(groupRef.current.rotation.x, mouse.y * 0.1, 0.05);
|
|
groupRef.current.rotation.z = THREE.MathUtils.lerp(groupRef.current.rotation.z, -mouse.x * 0.05, 0.05);
|
|
}
|
|
});
|
|
|
|
return (
|
|
<group ref={groupRef}>
|
|
{points.map((p, i) => (
|
|
<mesh key={i} position={p.pos}>
|
|
<sphereGeometry args={[p.color === "#ffffff" ? 0.03 : 0.015, 8, 8]} />
|
|
<meshStandardMaterial
|
|
color={p.color}
|
|
emissive={p.color}
|
|
emissiveIntensity={p.color === "#ffffff" ? 0.8 : 0.2}
|
|
transparent
|
|
opacity={0.6}
|
|
/>
|
|
</mesh>
|
|
))}
|
|
</group>
|
|
);
|
|
}
|
|
|
|
function GridOverlay() {
|
|
return (
|
|
<gridHelper
|
|
args={[100, 40, "#ffffff", "#18181b"]}
|
|
position={[0, -12, 0]}
|
|
rotation={[0, 0, 0]}
|
|
>
|
|
<meshBasicMaterial attach="material" transparent opacity={0.03} />
|
|
</gridHelper>
|
|
);
|
|
}
|
|
|
|
export default function DNAHeroBackground() {
|
|
return (
|
|
<div className="fixed inset-0 -z-10 bg-black overflow-hidden">
|
|
<div className="noise-overlay" />
|
|
<Canvas dpr={[1, 2]}>
|
|
<PerspectiveCamera makeDefault position={[0, 0, 15]} fov={45} />
|
|
|
|
<ambientLight intensity={0.4} />
|
|
<pointLight position={[10, 10, 10]} intensity={0.5} color="#ffffff" />
|
|
<pointLight position={[-10, -10, -10]} intensity={0.3} color="#ffffff" />
|
|
|
|
<GridOverlay />
|
|
|
|
<Float speed={0.8} rotationIntensity={0.05} floatIntensity={0.2}>
|
|
<DNAParticles />
|
|
</Float>
|
|
</Canvas>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black pointer-events-none" />
|
|
</div>
|
|
);
|
|
}
|