Remove Unwanted Files and restrcit the animation view in Mobile screen
This commit is contained in:
@@ -1,192 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useMemo, useRef, useState } from "react";
|
|
||||||
import { Canvas, useFrame, useThree } from "@react-three/fiber";
|
|
||||||
import { MeshDistortMaterial, Sphere, Preload, Float } from "@react-three/drei";
|
|
||||||
import * as THREE from "three";
|
|
||||||
|
|
||||||
// --- CONFIGURATION ---
|
|
||||||
const NEURON_COUNT = 18; // Fewer, but more detailed neurons
|
|
||||||
const CONNECTION_DISTANCE = 5.5; // Distance to form a synapse
|
|
||||||
const PULSE_SPEED = 2.5; // Speed of the electric signal
|
|
||||||
|
|
||||||
// 1. SINGLE NEURON CELL (The Soma)
|
|
||||||
// We use a distorted sphere to make it look like organic tissue
|
|
||||||
function NeuronCell({ position }: { position: [number, number, number] }) {
|
|
||||||
const meshRef = useRef<THREE.Mesh>(null!);
|
|
||||||
const [hovered, setHover] = useState(false);
|
|
||||||
|
|
||||||
// Randomize size slightly for variety
|
|
||||||
const scale = useMemo(() => 0.6 + Math.random() * 0.4, []);
|
|
||||||
|
|
||||||
useFrame((state) => {
|
|
||||||
// Gentle heartbeat pulsation
|
|
||||||
const t = state.clock.getElapsedTime();
|
|
||||||
const pulse = Math.sin(t * 3) * 0.05 + 1;
|
|
||||||
if (meshRef.current) {
|
|
||||||
meshRef.current.scale.set(scale * pulse, scale * pulse, scale * pulse);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Float speed={2} rotationIntensity={0.5} floatIntensity={0.5}>
|
|
||||||
<Sphere
|
|
||||||
ref={meshRef}
|
|
||||||
args={[1, 32, 32]} // Geometry args
|
|
||||||
position={position}
|
|
||||||
onPointerOver={() => setHover(true)}
|
|
||||||
onPointerOut={() => setHover(false)}
|
|
||||||
>
|
|
||||||
<MeshDistortMaterial
|
|
||||||
color={hovered ? "#06b6d4" : "#22d3ee"} // Cyan 500 to 400
|
|
||||||
emissive={hovered ? "#0891b2" : "#0e7490"}
|
|
||||||
emissiveIntensity={0.6}
|
|
||||||
roughness={0.2}
|
|
||||||
metalness={0.1}
|
|
||||||
distort={0.4} // The "wobble" amount (0-1)
|
|
||||||
speed={2} // Speed of the wobble
|
|
||||||
/>
|
|
||||||
<pointLight distance={3} intensity={2} color="#22d3ee" />
|
|
||||||
</Sphere>
|
|
||||||
</Float>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. SYNAPSE (The Connection & The Impulse)
|
|
||||||
// Draws a curved organic line and a traveling light pulse
|
|
||||||
function Synapse({ start, end }: { start: THREE.Vector3; end: THREE.Vector3 }) {
|
|
||||||
const curve = useMemo(() => {
|
|
||||||
// Create a quadratic bezier curve for a natural "tendon" look
|
|
||||||
// Control point is midway but offset randomly to create the curve
|
|
||||||
const mid = new THREE.Vector3().lerpVectors(start, end, 0.5);
|
|
||||||
mid.x += (Math.random() - 0.5) * 2;
|
|
||||||
mid.y += (Math.random() - 0.5) * 2;
|
|
||||||
mid.z += (Math.random() - 0.5) * 2;
|
|
||||||
return new THREE.QuadraticBezierCurve3(start, mid, end);
|
|
||||||
}, [start, end]);
|
|
||||||
|
|
||||||
// Create points for the line geometry
|
|
||||||
const points = useMemo(() => curve.getPoints(20), [curve]);
|
|
||||||
|
|
||||||
// The traveling impulse ref
|
|
||||||
const impulseRef = useRef<THREE.Mesh>(null!);
|
|
||||||
|
|
||||||
useFrame((state) => {
|
|
||||||
// Move the impulse along the curve
|
|
||||||
const t = (state.clock.getElapsedTime() * PULSE_SPEED) % 1; // 0 to 1 loop
|
|
||||||
if (impulseRef.current) {
|
|
||||||
const pos = curve.getPointAt(t);
|
|
||||||
impulseRef.current.position.copy(pos);
|
|
||||||
|
|
||||||
// Scale impulse based on position (fade in/out at ends)
|
|
||||||
const scale = Math.sin(t * Math.PI);
|
|
||||||
impulseRef.current.scale.setScalar(scale * 0.15);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<group>
|
|
||||||
{/* The Axon (Line) */}
|
|
||||||
<line>
|
|
||||||
<bufferGeometry>
|
|
||||||
<bufferAttribute
|
|
||||||
attach="attributes-position"
|
|
||||||
count={points.length}
|
|
||||||
array={new Float32Array(points.flatMap((p) => [p.x, p.y, p.z]))}
|
|
||||||
itemSize={3}
|
|
||||||
/>
|
|
||||||
</bufferGeometry>
|
|
||||||
<lineBasicMaterial
|
|
||||||
color="#155e75" // Dark Cyan
|
|
||||||
transparent
|
|
||||||
opacity={0.3}
|
|
||||||
linewidth={1}
|
|
||||||
/>
|
|
||||||
</line>
|
|
||||||
|
|
||||||
{/* The Electric Impulse (Glowing Dot) */}
|
|
||||||
<mesh ref={impulseRef}>
|
|
||||||
<sphereGeometry args={[1, 8, 8]} />
|
|
||||||
<meshBasicMaterial color="#ecfeff" toneMapped={false} />
|
|
||||||
<pointLight distance={2} intensity={2} color="#22d3ee" decay={2} />
|
|
||||||
</mesh>
|
|
||||||
</group>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. MAIN SCENE CONTROLLER
|
|
||||||
function NeuralNetworkScene() {
|
|
||||||
const { viewport } = useThree();
|
|
||||||
const mouse = useRef(new THREE.Vector2());
|
|
||||||
|
|
||||||
// Generate Neurons
|
|
||||||
const neurons = useMemo(() => {
|
|
||||||
const temp = [];
|
|
||||||
for (let i = 0; i < NEURON_COUNT; i++) {
|
|
||||||
temp.push({
|
|
||||||
position: new THREE.Vector3(
|
|
||||||
(Math.random() - 0.5) * 20,
|
|
||||||
(Math.random() - 0.5) * 20,
|
|
||||||
(Math.random() - 0.5) * 10
|
|
||||||
),
|
|
||||||
id: i,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return temp;
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Generate Connections (Proximity based)
|
|
||||||
const connections = useMemo(() => {
|
|
||||||
const conns = [];
|
|
||||||
for (let i = 0; i < neurons.length; i++) {
|
|
||||||
for (let j = i + 1; j < neurons.length; j++) {
|
|
||||||
const dist = neurons[i].position.distanceTo(neurons[j].position);
|
|
||||||
if (dist < CONNECTION_DISTANCE) {
|
|
||||||
conns.push({ start: neurons[i].position, end: neurons[j].position, key: `${i}-${j}` });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return conns;
|
|
||||||
}, [neurons]);
|
|
||||||
|
|
||||||
useFrame((state) => {
|
|
||||||
// Soft camera movement based on mouse
|
|
||||||
const x = (state.pointer.x * viewport.width) / 10;
|
|
||||||
const y = (state.pointer.y * viewport.height) / 10;
|
|
||||||
|
|
||||||
state.camera.position.x = THREE.MathUtils.lerp(state.camera.position.x, x, 0.05);
|
|
||||||
state.camera.position.y = THREE.MathUtils.lerp(state.camera.position.y, y, 0.05);
|
|
||||||
state.camera.lookAt(0, 0, 0);
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<group>
|
|
||||||
{/* Draw Neurons */}
|
|
||||||
{neurons.map((n) => (
|
|
||||||
<NeuronCell key={n.id} position={[n.position.x, n.position.y, n.position.z]} />
|
|
||||||
))}
|
|
||||||
|
|
||||||
{/* Draw Synapses */}
|
|
||||||
{connections.map((c) => (
|
|
||||||
<Synapse key={c.key} start={c.start} end={c.end} />
|
|
||||||
))}
|
|
||||||
</group>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function BioNeurons() {
|
|
||||||
return (
|
|
||||||
<div className="absolute inset-0 z-0 h-full w-full">
|
|
||||||
<Canvas
|
|
||||||
camera={{ position: [0, 0, 14], fov: 45 }}
|
|
||||||
gl={{ alpha: true, antialias: true }}
|
|
||||||
dpr={[1, 2]}
|
|
||||||
>
|
|
||||||
<ambientLight intensity={0.2} />
|
|
||||||
<pointLight position={[10, 10, 10]} intensity={1} color="#06b6d4" />
|
|
||||||
<NeuralNetworkScene />
|
|
||||||
<Preload all />
|
|
||||||
</Canvas>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,183 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useMemo, useRef } from "react";
|
|
||||||
import { Canvas, useFrame, useThree } from "@react-three/fiber";
|
|
||||||
import * as THREE from "three";
|
|
||||||
import { Preload } from "@react-three/drei";
|
|
||||||
|
|
||||||
// CONFIGURATION
|
|
||||||
const PARTICLE_COUNT = 80;
|
|
||||||
const CONNECT_DISTANCE = 3.5;
|
|
||||||
const MOUSE_INFLUENCE_RADIUS = 6; // Radius of the mouse wave
|
|
||||||
const WAVE_AMPLITUDE = 1.5; // How high the wave ripples (Z-axis)
|
|
||||||
|
|
||||||
function NeuralMesh() {
|
|
||||||
const groupRef = useRef<THREE.Group>(null);
|
|
||||||
const particlesRef = useRef<THREE.Points>(null);
|
|
||||||
const linesRef = useRef<THREE.LineSegments>(null);
|
|
||||||
|
|
||||||
// Get viewport to map mouse coordinates correctly to world space
|
|
||||||
const { viewport } = useThree();
|
|
||||||
|
|
||||||
// 1. Generate Initial Random Positions & Velocities
|
|
||||||
// We store "original positions" to calculate the wave offset from
|
|
||||||
const [positions, velocities, originalPositions] = useMemo(() => {
|
|
||||||
const pos = new Float32Array(PARTICLE_COUNT * 3);
|
|
||||||
const origPos = new Float32Array(PARTICLE_COUNT * 3);
|
|
||||||
const vel = [];
|
|
||||||
|
|
||||||
for (let i = 0; i < PARTICLE_COUNT; i++) {
|
|
||||||
const x = (Math.random() - 0.5) * 18;
|
|
||||||
const y = (Math.random() - 0.5) * 18;
|
|
||||||
const z = (Math.random() - 0.5) * 10;
|
|
||||||
|
|
||||||
pos[i * 3] = x;
|
|
||||||
pos[i * 3 + 1] = y;
|
|
||||||
pos[i * 3 + 2] = z;
|
|
||||||
|
|
||||||
origPos[i * 3] = x;
|
|
||||||
origPos[i * 3 + 1] = y;
|
|
||||||
origPos[i * 3 + 2] = z;
|
|
||||||
|
|
||||||
vel.push({
|
|
||||||
x: (Math.random() - 0.5) * 0.05, // Slower natural drift
|
|
||||||
y: (Math.random() - 0.5) * 0.05,
|
|
||||||
z: (Math.random() - 0.5) * 0.05,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return [pos, vel, origPos];
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useFrame((state, delta) => {
|
|
||||||
// 2. Map Mouse to World Coordinates
|
|
||||||
// state.pointer is normalized (-1 to 1). Convert to world units using viewport.
|
|
||||||
const mouseX = (state.pointer.x * viewport.width) / 2;
|
|
||||||
const mouseY = (state.pointer.y * viewport.height) / 2;
|
|
||||||
|
|
||||||
if (particlesRef.current && linesRef.current) {
|
|
||||||
const positionsAttr = particlesRef.current.geometry.attributes.position;
|
|
||||||
const currentPositions = positionsAttr.array as Float32Array;
|
|
||||||
|
|
||||||
// 3. Update Particles
|
|
||||||
for (let i = 0; i < PARTICLE_COUNT; i++) {
|
|
||||||
const i3 = i * 3;
|
|
||||||
|
|
||||||
// A. Natural Drift (Gravity)
|
|
||||||
// We use the "original" position as an anchor to prevent them from flying away too far
|
|
||||||
// but we add the velocity to keep them moving organically.
|
|
||||||
originalPositions[i3] += velocities[i].x * delta * 2;
|
|
||||||
originalPositions[i3 + 1] += velocities[i].y * delta * 2;
|
|
||||||
|
|
||||||
// Bounce logic for the anchor points
|
|
||||||
if (Math.abs(originalPositions[i3]) > 10) velocities[i].x *= -1;
|
|
||||||
if (Math.abs(originalPositions[i3 + 1]) > 10) velocities[i].y *= -1;
|
|
||||||
|
|
||||||
// B. Mouse Interaction (The Wave)
|
|
||||||
// Calculate distance from particle to mouse
|
|
||||||
const dx = mouseX - originalPositions[i3];
|
|
||||||
const dy = mouseY - originalPositions[i3 + 1];
|
|
||||||
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
||||||
|
|
||||||
// Apply Wave Effect
|
|
||||||
// If the mouse is close, we disturb the position
|
|
||||||
let xOffset = 0;
|
|
||||||
let yOffset = 0;
|
|
||||||
let zOffset = 0;
|
|
||||||
|
|
||||||
if (dist < MOUSE_INFLUENCE_RADIUS) {
|
|
||||||
// 1. Repulsion force (XY Plane) - pushes them slightly aside
|
|
||||||
const force = (MOUSE_INFLUENCE_RADIUS - dist) / MOUSE_INFLUENCE_RADIUS;
|
|
||||||
const angle = Math.atan2(dy, dx);
|
|
||||||
|
|
||||||
xOffset = -Math.cos(angle) * force * 2; // Push away X
|
|
||||||
yOffset = -Math.sin(angle) * force * 2; // Push away Y
|
|
||||||
|
|
||||||
// 2. Wave Ripple (Z Plane) - Sine wave based on distance and time
|
|
||||||
// This creates the "water ripple" effect in 3D depth
|
|
||||||
zOffset = Math.sin(dist * 1.5 - state.clock.elapsedTime * 3) * WAVE_AMPLITUDE * force;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Apply calculated positions
|
|
||||||
currentPositions[i3] = originalPositions[i3] + xOffset;
|
|
||||||
currentPositions[i3 + 1] = originalPositions[i3 + 1] + yOffset;
|
|
||||||
currentPositions[i3 + 2] = originalPositions[i3 + 2] + zOffset;
|
|
||||||
}
|
|
||||||
positionsAttr.needsUpdate = true;
|
|
||||||
|
|
||||||
// 4. Update Connections (Plexus)
|
|
||||||
// Re-calculate lines based on the NEW modified positions
|
|
||||||
const linePositions: number[] = [];
|
|
||||||
|
|
||||||
for (let i = 0; i < PARTICLE_COUNT; i++) {
|
|
||||||
for (let j = i + 1; j < PARTICLE_COUNT; j++) {
|
|
||||||
const x1 = currentPositions[i * 3];
|
|
||||||
const y1 = currentPositions[i * 3 + 1];
|
|
||||||
const z1 = currentPositions[i * 3 + 2];
|
|
||||||
|
|
||||||
const x2 = currentPositions[j * 3];
|
|
||||||
const y2 = currentPositions[j * 3 + 1];
|
|
||||||
const z2 = currentPositions[j * 3 + 2];
|
|
||||||
|
|
||||||
const dist = Math.sqrt(
|
|
||||||
Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2) + Math.pow(z2 - z1, 2)
|
|
||||||
);
|
|
||||||
|
|
||||||
if (dist < CONNECT_DISTANCE) {
|
|
||||||
linePositions.push(x1, y1, z1, x2, y2, z2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
linesRef.current.geometry.setAttribute(
|
|
||||||
"position",
|
|
||||||
new THREE.Float32BufferAttribute(linePositions, 3)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<group ref={groupRef}>
|
|
||||||
<points ref={particlesRef}>
|
|
||||||
<bufferGeometry>
|
|
||||||
<bufferAttribute
|
|
||||||
attach="attributes-position"
|
|
||||||
count={PARTICLE_COUNT}
|
|
||||||
array={positions}
|
|
||||||
itemSize={3}
|
|
||||||
/>
|
|
||||||
</bufferGeometry>
|
|
||||||
<pointsMaterial
|
|
||||||
size={0.15}
|
|
||||||
color="#22d3ee" // Cyan
|
|
||||||
sizeAttenuation={true}
|
|
||||||
transparent
|
|
||||||
opacity={0.8}
|
|
||||||
/>
|
|
||||||
</points>
|
|
||||||
|
|
||||||
<lineSegments ref={linesRef}>
|
|
||||||
<bufferGeometry />
|
|
||||||
<lineBasicMaterial
|
|
||||||
color="#0891b2" // Cyan-600
|
|
||||||
transparent
|
|
||||||
opacity={0.15}
|
|
||||||
/>
|
|
||||||
</lineSegments>
|
|
||||||
</group>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function NeuronsGravity() {
|
|
||||||
return (
|
|
||||||
<div className="absolute inset-0 z-0 h-full w-full">
|
|
||||||
<Canvas
|
|
||||||
camera={{ position: [0, 0, 12], fov: 50 }}
|
|
||||||
gl={{ alpha: true, antialias: true }}
|
|
||||||
dpr={[1, 2]}
|
|
||||||
>
|
|
||||||
<NeuralMesh />
|
|
||||||
<Preload all />
|
|
||||||
</Canvas>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,259 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useMemo, useRef } from "react";
|
|
||||||
import { Canvas, useFrame, useThree } from "@react-three/fiber";
|
|
||||||
import { MeshDistortMaterial, Sphere, Preload, Float } from "@react-three/drei";
|
|
||||||
import { EffectComposer, Bloom, Vignette } from "@react-three/postprocessing";
|
|
||||||
import * as THREE from "three";
|
|
||||||
|
|
||||||
// --- CONFIGURATION ---
|
|
||||||
const NEURON_COUNT = 15; // Keep low for high-quality geometry
|
|
||||||
const CONNECTION_DISTANCE = 6.5;
|
|
||||||
const PULSE_SPEED = 1.8;
|
|
||||||
|
|
||||||
// 1. REALISTIC CELL (Soma + Nucleus)
|
|
||||||
function NeuronCell({ position }: { position: [number, number, number] }) {
|
|
||||||
const membraneRef = useRef<THREE.Mesh>(null!);
|
|
||||||
const nucleusRef = useRef<THREE.Mesh>(null!);
|
|
||||||
|
|
||||||
// Randomize biology
|
|
||||||
const size = useMemo(() => 0.5 + Math.random() * 0.3, []);
|
|
||||||
|
|
||||||
useFrame((state) => {
|
|
||||||
const t = state.clock.getElapsedTime();
|
|
||||||
|
|
||||||
// Biological breathing/pulsing
|
|
||||||
if (membraneRef.current) {
|
|
||||||
const scale = size + Math.sin(t * 2 + position[0]) * 0.05;
|
|
||||||
membraneRef.current.scale.setScalar(scale);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Nucleus gentle pulse (faster)
|
|
||||||
if (nucleusRef.current) {
|
|
||||||
const nScale = (size * 0.4) + Math.sin(t * 4) * 0.02;
|
|
||||||
nucleusRef.current.scale.setScalar(nScale);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Float speed={1.5} rotationIntensity={0.6} floatIntensity={0.8}>
|
|
||||||
<group position={position}>
|
|
||||||
|
|
||||||
{/* A. The Membrane (Outer Shell) */}
|
|
||||||
<Sphere ref={membraneRef} args={[1, 64, 64]}>
|
|
||||||
<MeshDistortMaterial
|
|
||||||
color="#083344" // Deep blue-black (organic tissue)
|
|
||||||
emissive="#155e75" // Cyan glow from within
|
|
||||||
emissiveIntensity={0.2}
|
|
||||||
roughness={0.1}
|
|
||||||
metalness={0.8}
|
|
||||||
distort={0.5} // High distortion for "blobby" look
|
|
||||||
speed={2}
|
|
||||||
transparent
|
|
||||||
opacity={0.7}
|
|
||||||
/>
|
|
||||||
</Sphere>
|
|
||||||
|
|
||||||
{/* B. The Nucleus (Inner Core) */}
|
|
||||||
<Sphere ref={nucleusRef} args={[1, 32, 32]}>
|
|
||||||
<meshStandardMaterial
|
|
||||||
color="#a5f3fc" // Bright Cyan
|
|
||||||
emissive="#22d3ee" // Strong Glow
|
|
||||||
emissiveIntensity={2} // Push this high for Bloom to pick it up
|
|
||||||
toneMapped={false}
|
|
||||||
/>
|
|
||||||
<pointLight distance={4} intensity={2} color="#22d3ee" decay={2} />
|
|
||||||
</Sphere>
|
|
||||||
|
|
||||||
</group>
|
|
||||||
</Float>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. SYNAPSE (Axon + Electric Pulse)
|
|
||||||
function Synapse({ start, end }: { start: THREE.Vector3; end: THREE.Vector3 }) {
|
|
||||||
const curve = useMemo(() => {
|
|
||||||
// Create organic curve
|
|
||||||
const mid = new THREE.Vector3().lerpVectors(start, end, 0.5);
|
|
||||||
// Randomize control point for "tendon" shape
|
|
||||||
mid.add(new THREE.Vector3(
|
|
||||||
(Math.random() - 0.5) * 3,
|
|
||||||
(Math.random() - 0.5) * 3,
|
|
||||||
(Math.random() - 0.5) * 3
|
|
||||||
));
|
|
||||||
return new THREE.QuadraticBezierCurve3(start, mid, end);
|
|
||||||
}, [start, end]);
|
|
||||||
|
|
||||||
const points = useMemo(() => curve.getPoints(30), [curve]);
|
|
||||||
const impulseRef = useRef<THREE.Mesh>(null!);
|
|
||||||
|
|
||||||
useFrame((state) => {
|
|
||||||
// Move electric pulse
|
|
||||||
const t = (state.clock.getElapsedTime() * PULSE_SPEED) % 1;
|
|
||||||
if (impulseRef.current) {
|
|
||||||
const pos = curve.getPointAt(t);
|
|
||||||
impulseRef.current.position.copy(pos);
|
|
||||||
|
|
||||||
// Stretch effect for speed illusion
|
|
||||||
const tangent = curve.getTangent(t).normalize();
|
|
||||||
impulseRef.current.lookAt(pos.clone().add(tangent));
|
|
||||||
impulseRef.current.scale.set(0.6, 0.6, 2.5); // Stretch Z
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<group>
|
|
||||||
{/* The physical connection (Axon) */}
|
|
||||||
<line>
|
|
||||||
<bufferGeometry>
|
|
||||||
<bufferAttribute
|
|
||||||
attach="attributes-position"
|
|
||||||
count={points.length}
|
|
||||||
array={new Float32Array(points.flatMap(p => [p.x, p.y, p.z]))}
|
|
||||||
itemSize={3}
|
|
||||||
/>
|
|
||||||
</bufferGeometry>
|
|
||||||
<lineBasicMaterial color="#0e7490" transparent opacity={0.15} />
|
|
||||||
</line>
|
|
||||||
|
|
||||||
{/* The Traveling Spark (Electricity) */}
|
|
||||||
<mesh ref={impulseRef}>
|
|
||||||
<sphereGeometry args={[0.08, 8, 8]} />
|
|
||||||
<meshBasicMaterial color="#ccfbf1" />
|
|
||||||
<pointLight distance={3} intensity={3} color="#22d3ee" decay={2} />
|
|
||||||
</mesh>
|
|
||||||
</group>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. BACKGROUND PARTICLES (Neurotransmitters)
|
|
||||||
function NeuroDust() {
|
|
||||||
const count = 200;
|
|
||||||
const mesh = useRef<THREE.InstancedMesh>(null!);
|
|
||||||
|
|
||||||
const particles = useMemo(() => {
|
|
||||||
const temp = [];
|
|
||||||
for(let i=0; i<count; i++) {
|
|
||||||
const t = Math.random() * 100;
|
|
||||||
const factor = 20 + Math.random() * 10;
|
|
||||||
const speed = 0.01 + Math.random() / 200;
|
|
||||||
const x = (Math.random() - 0.5) * 30;
|
|
||||||
const y = (Math.random() - 0.5) * 30;
|
|
||||||
const z = (Math.random() - 0.5) * 15;
|
|
||||||
temp.push({ t, factor, speed, x, y, z, mx: 0, my: 0 });
|
|
||||||
}
|
|
||||||
return temp;
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const dummy = useMemo(() => new THREE.Object3D(), []);
|
|
||||||
|
|
||||||
useFrame((state) => {
|
|
||||||
particles.forEach((particle, i) => {
|
|
||||||
let { t, factor, speed, x, y, z } = particle;
|
|
||||||
t = particle.t += speed / 2;
|
|
||||||
const a = Math.cos(t) + Math.sin(t * 1) / 10;
|
|
||||||
const b = Math.sin(t) + Math.cos(t * 2) / 10;
|
|
||||||
const s = Math.cos(t);
|
|
||||||
|
|
||||||
dummy.position.set(
|
|
||||||
x + Math.cos(t) + Math.sin(t) * 2,
|
|
||||||
y + Math.sin(t) + Math.cos(t) * 2,
|
|
||||||
z + Math.cos(t)
|
|
||||||
);
|
|
||||||
dummy.scale.setScalar(s * 0.03); // Tiny dust
|
|
||||||
dummy.rotation.set(s * 5, s * 5, s * 5);
|
|
||||||
dummy.updateMatrix();
|
|
||||||
|
|
||||||
if (mesh.current) mesh.current.setMatrixAt(i, dummy.matrix);
|
|
||||||
});
|
|
||||||
if (mesh.current) mesh.current.instanceMatrix.needsUpdate = true;
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<instancedMesh ref={mesh} args={[undefined, undefined, count]}>
|
|
||||||
<dodecahedronGeometry args={[0.2, 0]} />
|
|
||||||
<meshPhongMaterial color="#0891b2" emissive="#06b6d4" transparent opacity={0.4} />
|
|
||||||
</instancedMesh>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 4. MAIN SCENE
|
|
||||||
function Scene() {
|
|
||||||
const { viewport } = useThree();
|
|
||||||
|
|
||||||
// Generate random positions for neurons
|
|
||||||
const neurons = useMemo(() => {
|
|
||||||
const temp = [];
|
|
||||||
for (let i = 0; i < NEURON_COUNT; i++) {
|
|
||||||
temp.push({
|
|
||||||
position: new THREE.Vector3(
|
|
||||||
(Math.random() - 0.5) * 22,
|
|
||||||
(Math.random() - 0.5) * 22,
|
|
||||||
(Math.random() - 0.5) * 10
|
|
||||||
),
|
|
||||||
id: i
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return temp;
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Connect them
|
|
||||||
const connections = useMemo(() => {
|
|
||||||
const conns = [];
|
|
||||||
for(let i=0; i<neurons.length; i++) {
|
|
||||||
for(let j=i+1; j<neurons.length; j++) {
|
|
||||||
if(neurons[i].position.distanceTo(neurons[j].position) < CONNECTION_DISTANCE) {
|
|
||||||
conns.push({ start: neurons[i].position, end: neurons[j].position, key: `${i}-${j}` });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return conns;
|
|
||||||
}, [neurons]);
|
|
||||||
|
|
||||||
useFrame((state) => {
|
|
||||||
// Subtle Camera Parallax based on Mouse
|
|
||||||
const x = (state.pointer.x * viewport.width) / 12;
|
|
||||||
const y = (state.pointer.y * viewport.height) / 12;
|
|
||||||
state.camera.position.x = THREE.MathUtils.lerp(state.camera.position.x, x, 0.02);
|
|
||||||
state.camera.position.y = THREE.MathUtils.lerp(state.camera.position.y, y, 0.02);
|
|
||||||
state.camera.lookAt(0,0,0);
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<color attach="background" args={["#020617"]} /> {/* Match gray-950 */}
|
|
||||||
<ambientLight intensity={0.2} />
|
|
||||||
<pointLight position={[10, 10, 10]} intensity={1} color="#22d3ee" />
|
|
||||||
|
|
||||||
{neurons.map(n => <NeuronCell key={n.id} position={[n.position.x, n.position.y, n.position.z]} />)}
|
|
||||||
{connections.map(c => <Synapse key={c.key} start={c.start} end={c.end} />)}
|
|
||||||
<NeuroDust />
|
|
||||||
|
|
||||||
{/* POST PROCESSING - The Secret Sauce for Realism */}
|
|
||||||
<EffectComposer disableNormalPass>
|
|
||||||
<Bloom
|
|
||||||
luminanceThreshold={1} // Only very bright things glow
|
|
||||||
mipmapBlur
|
|
||||||
intensity={1.5} // Strength of the glow
|
|
||||||
radius={0.6}
|
|
||||||
/>
|
|
||||||
<Vignette eskil={false} offset={0.1} darkness={1.1} />
|
|
||||||
</EffectComposer>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function RealisticNeurons() {
|
|
||||||
return (
|
|
||||||
<div className="absolute inset-0 z-0 h-full w-full">
|
|
||||||
<Canvas
|
|
||||||
camera={{ position: [0, 0, 16], fov: 40 }}
|
|
||||||
gl={{ alpha: false, antialias: false, toneMapping: THREE.ReinhardToneMapping }}
|
|
||||||
dpr={[1, 1.5]} // Limit DPR for performance with post-processing
|
|
||||||
>
|
|
||||||
<Scene />
|
|
||||||
<Preload all />
|
|
||||||
</Canvas>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -45,7 +45,6 @@ export default function Home() {
|
|||||||
|
|
||||||
<main className="relative z-10 flex flex-col items-center w-full">
|
<main className="relative z-10 flex flex-col items-center w-full">
|
||||||
|
|
||||||
{/* HERO SECTION */}
|
|
||||||
<section className="relative min-h-screen w-full flex flex-col items-center justify-center pt-20 px-6 overflow-hidden">
|
<section className="relative min-h-screen w-full flex flex-col items-center justify-center pt-20 px-6 overflow-hidden">
|
||||||
|
|
||||||
<div className="absolute inset-0 z-0">
|
<div className="absolute inset-0 z-0">
|
||||||
@@ -106,12 +105,10 @@ export default function Home() {
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* CONTENT SECTIONS CONTAINER */}
|
|
||||||
<div className="w-full relative bg-gray-950">
|
<div className="w-full relative bg-gray-950">
|
||||||
|
|
||||||
<div className="relative z-30 space-y-32 py-24">
|
<div className="relative z-30 space-y-32 py-24">
|
||||||
|
|
||||||
{/* === 1. AI VOICE SOAP SECTION === */}
|
|
||||||
<section className="relative w-full overflow-hidden">
|
<section className="relative w-full overflow-hidden">
|
||||||
<div className="absolute inset-0 z-0">
|
<div className="absolute inset-0 z-0">
|
||||||
<img
|
<img
|
||||||
@@ -126,7 +123,6 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* === 2. DEVICE SHOWCASE SECTION (Modified) === */}
|
|
||||||
<section className="relative w-full overflow-hidden">
|
<section className="relative w-full overflow-hidden">
|
||||||
<div className="absolute inset-0 z-0">
|
<div className="absolute inset-0 z-0">
|
||||||
<img
|
<img
|
||||||
@@ -141,7 +137,6 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* === 3. AI DIAGNOSIS SECTION === */}
|
|
||||||
<section className="relative w-full overflow-hidden">
|
<section className="relative w-full overflow-hidden">
|
||||||
<div className="absolute inset-0 z-0">
|
<div className="absolute inset-0 z-0">
|
||||||
<img
|
<img
|
||||||
@@ -156,7 +151,6 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* === 4. APP ECOSYSTEM SECTION === */}
|
|
||||||
<section className="relative w-full overflow-hidden">
|
<section className="relative w-full overflow-hidden">
|
||||||
<div className="absolute inset-0 z-0">
|
<div className="absolute inset-0 z-0">
|
||||||
<img
|
<img
|
||||||
|
|||||||
Reference in New Issue
Block a user