Skip to content
This repository was archived by the owner on Jun 3, 2026. It is now read-only.

Commit e4fbd13

Browse files
ishaanxguptaishaanxgupta
committed
modularize the codebase
1 parent 4494796 commit e4fbd13

22 files changed

Lines changed: 2702 additions & 2781 deletions

‎client/src/components/shared/RevealSection.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { useRef } from "react";
2+
import { motion, useInView } from "framer-motion";
3+
4+
export function RevealSection({
5+
children,
6+
className = "",
7+
delay = 0,
8+
}: {
9+
children: React.ReactNode;
10+
className?: string;
11+
delay?: number;
12+
}) {
13+
const ref = useRef<HTMLDivElement>(null);
14+
const isInView = useInView(ref, { once: true, margin: "-80px" });
15+
16+
return (
17+
<motion.div
18+
ref={ref}
19+
initial={{ opacity: 0, y: 50 }}
20+
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
21+
transition={{ duration: 0.8, delay, ease: [0.21, 0.47, 0.32, 0.98] }}
22+
className={className}
23+
>
24+
{children}
25+
</motion.div>
26+
);
27+
}

‎client/src/components/three-d/AgentNetwork.tsx‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import { useRef, useMemo } from "react";
2+
import { useFrame, useThree } from "@react-three/fiber";
3+
import * as THREE from "three";
4+
5+
function Tendril({ index }: { index: number }) {
6+
const lineRef = useRef<THREE.Line>(null);
7+
const tipRef = useRef<THREE.Mesh>(null);
8+
9+
const { geometry, lastPoint, randomOffset } = useMemo(() => {
10+
const angle = Math.random() * Math.PI * 2;
11+
const radius = Math.random() * 3 + 0.5;
12+
const x = Math.cos(angle) * radius;
13+
const z = Math.sin(angle) * radius;
14+
const y = Math.random() * 3 + 1.5;
15+
16+
const points = [];
17+
const numPoints = 20;
18+
const startY = -4;
19+
const midXOffset = (Math.random() - 0.5) * 2;
20+
const midZOffset = (Math.random() - 0.5) * 2;
21+
22+
for (let j = 0; j <= numPoints; j++) {
23+
const t = j / numPoints;
24+
const spread = 1 - Math.pow(1 - t, 4);
25+
26+
const px = x * spread + Math.sin(t * Math.PI) * midXOffset;
27+
const py = startY + (y - startY) * t;
28+
const pz = z * spread + Math.sin(t * Math.PI) * midZOffset;
29+
30+
points.push(new THREE.Vector3(px, py, pz));
31+
}
32+
33+
const curve = new THREE.CatmullRomCurve3(points);
34+
const pts = curve.getPoints(50);
35+
const geo = new THREE.BufferGeometry().setFromPoints(pts);
36+
37+
const colorArray: number[] = [];
38+
for (let i = 0; i <= 50; i++) {
39+
const t = i / 50;
40+
const c = new THREE.Color();
41+
c.lerpColors(new THREE.Color("#0a38ff"), new THREE.Color("#ff1a55"), t);
42+
colorArray.push(c.r, c.g, c.b);
43+
}
44+
geo.setAttribute(
45+
"color",
46+
new THREE.BufferAttribute(new Float32Array(colorArray), 3),
47+
);
48+
49+
return {
50+
geometry: geo,
51+
lastPoint: pts[50],
52+
randomOffset: Math.random() * Math.PI * 2,
53+
};
54+
}, []);
55+
56+
useFrame((state) => {
57+
const t = state.clock.elapsedTime;
58+
if (lineRef.current) {
59+
lineRef.current.rotation.y = Math.sin(t * 0.2 + randomOffset) * 0.1;
60+
}
61+
if (tipRef.current) {
62+
const s = 1 + Math.sin(t * 3 + randomOffset) * 0.4;
63+
tipRef.current.scale.set(s, s, s);
64+
}
65+
});
66+
67+
return (
68+
// @ts-expect-error - React types conflict with ThreeJS line element
69+
<line ref={lineRef as any} geometry={geometry}>
70+
<lineBasicMaterial vertexColors transparent opacity={0.6} />
71+
<mesh ref={tipRef} position={[lastPoint.x, lastPoint.y, lastPoint.z]}>
72+
<sphereGeometry args={[0.04, 8, 8]} />
73+
<meshBasicMaterial color="#ffc2d1" />
74+
</mesh>
75+
</line>
76+
);
77+
}
78+
79+
function FloatingParticle() {
80+
const ref = useRef<THREE.Mesh>(null);
81+
const initialPos = useMemo(
82+
() =>
83+
new THREE.Vector3(
84+
(Math.random() - 0.5) * 10,
85+
Math.random() * 10 - 5,
86+
(Math.random() - 0.5) * 10,
87+
),
88+
[],
89+
);
90+
const speed = useMemo(() => Math.random() * 0.5 + 0.2, []);
91+
const isPink = useMemo(() => Math.random() > 0.5, []);
92+
const offset = useMemo(() => Math.random() * Math.PI * 2, []);
93+
94+
useFrame((state) => {
95+
if (!ref.current) return;
96+
const t = state.clock.elapsedTime;
97+
ref.current.position.y = initialPos.y + Math.sin(t * speed + offset) * 0.5;
98+
ref.current.position.x =
99+
initialPos.x + Math.cos(t * speed * 0.5 + offset) * 0.2;
100+
});
101+
102+
return (
103+
<mesh ref={ref} position={initialPos}>
104+
<sphereGeometry args={[Math.random() * 0.03 + 0.01, 8, 8]} />
105+
<meshBasicMaterial
106+
color={isPink ? "#ff1a55" : "#ffffff"}
107+
transparent
108+
opacity={0.5}
109+
/>
110+
</mesh>
111+
);
112+
}
113+
114+
export function AgentNetworkScene() {
115+
const groupRef = useRef<THREE.Group>(null);
116+
const { mouse } = useThree();
117+
118+
useFrame((state) => {
119+
if (!groupRef.current) return;
120+
groupRef.current.rotation.y = THREE.MathUtils.lerp(
121+
groupRef.current.rotation.y,
122+
mouse.x * 0.4 + state.clock.elapsedTime * 0.05,
123+
0.05,
124+
);
125+
groupRef.current.rotation.x = THREE.MathUtils.lerp(
126+
groupRef.current.rotation.x,
127+
mouse.y * -0.2 + 0.2,
128+
0.05,
129+
);
130+
});
131+
132+
return (
133+
<group ref={groupRef} position={[0, -1, 0]}>
134+
{Array.from({ length: 90 }).map((_, i) => (
135+
<Tendril key={i} index={i} />
136+
))}
137+
{Array.from({ length: 200 }).map((_, i) => (
138+
<FloatingParticle key={`p-${i}`} />
139+
))}
140+
</group>
141+
);
142+
}

‎client/src/components/three-d/ArchitectureScene.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { useRef } from "react";
2+
import { useFrame } from "@react-three/fiber";
3+
import { Float } from "@react-three/drei";
4+
import * as THREE from "three";
5+
6+
export function ArchitectureScene() {
7+
const groupRef = useRef<THREE.Group>(null);
8+
useFrame((state) => {
9+
if (!groupRef.current) return;
10+
groupRef.current.rotation.y = state.clock.elapsedTime * 0.2;
11+
});
12+
13+
return (
14+
<group ref={groupRef}>
15+
<Float speed={2} rotationIntensity={0.3} floatIntensity={0.5}>
16+
<mesh position={[0, 1.5, 0]}>
17+
<boxGeometry args={[1.5, 0.3, 0.8]} />
18+
<meshStandardMaterial
19+
color="#ffffff"
20+
emissive="#888888"
21+
emissiveIntensity={0.3}
22+
metalness={0.8}
23+
roughness={0.2}
24+
/>
25+
</mesh>
26+
<mesh position={[0, 0, 0]}>
27+
<boxGeometry args={[2, 0.4, 1.2]} />
28+
<meshStandardMaterial
29+
color="#dddddd"
30+
emissive="#555555"
31+
emissiveIntensity={0.4}
32+
metalness={0.9}
33+
roughness={0.1}
34+
/>
35+
</mesh>
36+
<mesh position={[0, -1.5, 0]}>
37+
<boxGeometry args={[1.5, 0.3, 0.8]} />
38+
<meshStandardMaterial
39+
color="#ffffff"
40+
emissive="#888888"
41+
emissiveIntensity={0.3}
42+
metalness={0.8}
43+
roughness={0.2}
44+
/>
45+
</mesh>
46+
{[-0.4, 0, 0.4].map((x, i) => (
47+
<mesh key={i} position={[x, 0.75, 0]}>
48+
<cylinderGeometry args={[0.02, 0.02, 0.9, 8]} />
49+
<meshStandardMaterial
50+
color="#ffffff"
51+
emissive="#ffffff"
52+
emissiveIntensity={0.6}
53+
transparent
54+
opacity={0.7}
55+
/>
56+
</mesh>
57+
))}
58+
{[-0.4, 0, 0.4].map((x, i) => (
59+
<mesh key={i} position={[x, -0.75, 0]}>
60+
<cylinderGeometry args={[0.02, 0.02, 0.9, 8]} />
61+
<meshStandardMaterial
62+
color="#ffffff"
63+
emissive="#ffffff"
64+
emissiveIntensity={0.6}
65+
transparent
66+
opacity={0.7}
67+
/>
68+
</mesh>
69+
))}
70+
</Float>
71+
<ambientLight intensity={0.5} />
72+
<pointLight position={[5, 5, 5]} intensity={1.5} color="#ffffff" />
73+
<pointLight position={[-5, -5, -5]} intensity={0.6} color="#666666" />
74+
</group>
75+
);
76+
}

0 commit comments

Comments
 (0)