445 lines
14 KiB
JavaScript
445 lines
14 KiB
JavaScript
// "use client";
|
|
// import { Canvas } from "@react-three/fiber";
|
|
// import { OrbitControls } from "@react-three/drei";
|
|
// import { EffectComposer, Bloom } from "@react-three/postprocessing";
|
|
// import * as THREE from "three";
|
|
|
|
// function AISphere() {
|
|
// return (
|
|
// <mesh>
|
|
// {/* AI Core Sphere */}
|
|
// <sphereGeometry args={[1.2, 64, 64]} />
|
|
// <meshStandardMaterial
|
|
// color="#00f5d4"
|
|
// emissive="#00f5d4"
|
|
// emissiveIntensity={0.6}
|
|
// roughness={0.2}
|
|
// metalness={0.8}
|
|
// />
|
|
|
|
// {/* Wireframe overlay */}
|
|
// <lineSegments>
|
|
// <wireframeGeometry attach="geometry" args={[new THREE.SphereGeometry(1.21, 32, 32)]} />
|
|
// <lineBasicMaterial color="#0ff" linewidth={1} />
|
|
// </lineSegments>
|
|
// </mesh>
|
|
// );
|
|
// }
|
|
|
|
// export default function Hero3D() {
|
|
// return (
|
|
// <div className="w-full h-screen bg-black">
|
|
// <Canvas camera={{ position: [0, 0, 5], fov: 60 }}>
|
|
// <ambientLight intensity={0.3} />
|
|
// <pointLight position={[5, 5, 5]} intensity={2} color="#00f5d4" />
|
|
|
|
// {/* The futuristic AI sphere */}
|
|
// <AISphere />
|
|
|
|
// {/* Glow effects */}
|
|
// <EffectComposer>
|
|
// <Bloom intensity={1.2} luminanceThreshold={0.2} />
|
|
// </EffectComposer>
|
|
|
|
// <OrbitControls enableZoom={false} autoRotate autoRotateSpeed={1.5} />
|
|
// </Canvas>
|
|
// </div>
|
|
// );
|
|
// }
|
|
// import { Canvas } from "@react-three/fiber";
|
|
// import { OrbitControls } from "@react-three/drei";
|
|
// import { Sphere, Line } from "@react-three/drei";
|
|
// import { useRef } from "react";
|
|
// import { useFrame } from "@react-three/fiber";
|
|
// import { EffectComposer, Bloom } from "@react-three/postprocessing";
|
|
// import { motion } from "framer-motion";
|
|
// import { ReactTyped } from "react-typed";
|
|
// import Navbar from "./Navbar";
|
|
// const Glow = ({ className = "" }) => (
|
|
// <div
|
|
// className={`pointer-events-none absolute inset-0 -z-10 opacity-60 blur-2xl
|
|
// [background:radial-gradient(60%_60%_at_20%_0%,rgba(0,255,255,.15),transparent_60%),radial-gradient(50%_50%_at_90%_20%,rgba(0,255,200,.12),transparent_60%),radial-gradient(40%_40%_at_50%_120%,rgba(0,200,255,.1),transparent_60%)] ${className}`}
|
|
// />
|
|
// );
|
|
// function AnimatedNeuralNode({ position, color, size = 0.08 }) {
|
|
// const ref = useRef();
|
|
|
|
// useFrame((state) => {
|
|
// if (ref.current) {
|
|
// // Subtle pulsing animation
|
|
// ref.current.scale.x = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
|
|
// ref.current.scale.y = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
|
|
// ref.current.scale.z = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
|
|
// }
|
|
// });
|
|
|
|
// return (
|
|
// <Sphere ref={ref} args={[size, 64, 64]} position={position}>
|
|
// <meshStandardMaterial
|
|
// color={color}
|
|
// emissive={color}
|
|
// emissiveIntensity={2} // boost emissive
|
|
// toneMapped={false} // important for bright bloom
|
|
// />
|
|
// </Sphere>
|
|
// );
|
|
// }
|
|
|
|
// function NeuralStructure({
|
|
// position = [0, 0, 0],
|
|
// color = "#00faff",
|
|
// nodeCount = 8,
|
|
// }) {
|
|
// const nodes = useRef([]);
|
|
|
|
// if (nodes.current.length === 0) {
|
|
// for (let i = 0; i < nodeCount; i++) {
|
|
// nodes.current.push([
|
|
// (Math.random() - 0.5) * 3,
|
|
// (Math.random() - 0.5) * 3,
|
|
// (Math.random() - 0.5) * 3,
|
|
// ]);
|
|
// }
|
|
// }
|
|
|
|
// const connections = [];
|
|
// for (let i = 0; i < nodeCount; i++) {
|
|
// const connectionCount = 2 + Math.floor(Math.random() * 2);
|
|
// const connectedIndices = new Set();
|
|
|
|
// while (connectedIndices.size < connectionCount) {
|
|
// const targetIndex = Math.floor(Math.random() * nodeCount);
|
|
// if (targetIndex !== i) {
|
|
// connectedIndices.add(targetIndex);
|
|
// }
|
|
// }
|
|
|
|
// connectedIndices.forEach((targetIndex) => {
|
|
// connections.push([i, targetIndex]);
|
|
// });
|
|
// }
|
|
|
|
// return (
|
|
// <group position={position}>
|
|
// {nodes.current.map((pos, i) => (
|
|
// <AnimatedNeuralNode key={i} position={pos} color={color} />
|
|
// ))}
|
|
|
|
// {connections.map(([start, end], i) => (
|
|
// <Line
|
|
// key={i}
|
|
// points={[nodes.current[start], nodes.current[end]]}
|
|
// color={color}
|
|
// lineWidth={1}
|
|
// transparent
|
|
// opacity={0.6}
|
|
// toneMapped={false} // allow bloom on lines too
|
|
// />
|
|
// ))}
|
|
// </group>
|
|
// );
|
|
// }
|
|
|
|
// export default function Home() {
|
|
// const structures = [];
|
|
// const colors = [
|
|
// "#00faff",
|
|
// "#00d9ff",
|
|
// "#00bfff",
|
|
// "#1e90ff",
|
|
// "#007fff",
|
|
// "#4dffff",
|
|
// ];
|
|
|
|
// for (let i = 0; i < 12; i++) {
|
|
// structures.push({
|
|
// position: [
|
|
// (Math.random() - 0.5) * 15,
|
|
// (Math.random() - 0.5) * 15,
|
|
// (Math.random() - 0.5) * 15,
|
|
// ],
|
|
// color: colors[i % colors.length],
|
|
// nodeCount: 5 + Math.floor(Math.random() * 6),
|
|
// });
|
|
// }
|
|
|
|
// return (
|
|
// <div className="w-screen h-screen border-t border-cyan-500/20
|
|
// bg-[#0b1117]">
|
|
// <Navbar/>
|
|
// <div className="absolute inset-0 flex md:left-10 items-center justify-center z-10 pointer-events-none">
|
|
// <Glow />
|
|
// <motion.div
|
|
// initial={{ opacity: 0, scale: 0.9 }}
|
|
// animate={{ opacity: 1, scale: 1 }}
|
|
// transition={{ duration: 1, ease: "easeOut" }}
|
|
// className="px-8 py-6 rounded-2xl bg-white/10 backdrop-blur-lg border border-white/20 shadow-lg text-center pointer-events-auto"
|
|
// >
|
|
// <motion.h1
|
|
// initial={{ opacity: 0, y: -20 }}
|
|
// animate={{ opacity: 1, y: 0 }}
|
|
// transition={{ duration: 1, ease: "easeOut" }}
|
|
// className="text-4xl md:text-8xl font-bold text-cyan-200 drop-shadow-[0_0_15px_#00faff] special-font"
|
|
// // style={{ fontFamily: "Roboto, sans-serif" }}
|
|
// >
|
|
// <b>MACHINE LEARNING FOR EVERYONE</b> (<b>ML4E</b>)
|
|
// </motion.h1>
|
|
|
|
// <motion.p
|
|
// initial={{ opacity: 0, y: 20 }}
|
|
// animate={{ opacity: 1, y: 0 }}
|
|
// transition={{ delay: 0.5, duration: 1, ease: "easeOut" }}
|
|
// className="mt-2 text-lg md:text-2xl text-blue-300 drop-shadow-[0_0_10px_#00d9ff]"
|
|
// style={{ fontFamily: "Roboto, sans-serif" }}
|
|
// >
|
|
// <ReactTyped
|
|
// strings={["THE OFFICIAL MACHINE LEARNING CLUB OF NIT ROURKELA"]}
|
|
// typeSpeed={50}
|
|
// backSpeed={30}
|
|
// backDelay={1500}
|
|
// loop={false}
|
|
// showCursor={true}
|
|
// />
|
|
// </motion.p>
|
|
// </motion.div>
|
|
// </div>
|
|
|
|
// <Canvas camera={{ position: [0, 0, 10], fov: 30 }}>
|
|
// <color attach="background" args={["#000000"]} />
|
|
// <ambientLight intensity={0.3} />
|
|
// <pointLight position={[10, 10, 10]} intensity={2} />
|
|
|
|
// {structures.map((props, i) => (
|
|
// <NeuralStructure key={i} {...props} />
|
|
// ))}
|
|
|
|
// <OrbitControls
|
|
// enableZoom={true}
|
|
// autoRotate
|
|
// autoRotateSpeed={1.5} // adjust speed (default = 2.0)
|
|
// enablePan={false}
|
|
// enableRotate={window.innerWidth > 768}
|
|
// touches={{
|
|
// ONE: null,
|
|
// TWO: null
|
|
// }}
|
|
// />
|
|
|
|
// {/* 🌟 Bloom Effect for neon glow */}
|
|
// <EffectComposer>
|
|
// <Bloom
|
|
// intensity={2.5} // strength of glow
|
|
// kernelSize={3} // blur size
|
|
// luminanceThreshold={0.1} // what gets bloomed
|
|
// luminanceSmoothing={0.9}
|
|
// />
|
|
// </EffectComposer>
|
|
// </Canvas>
|
|
// </div>
|
|
// );
|
|
// }
|
|
import { Canvas } from "@react-three/fiber";
|
|
import { OrbitControls } from "@react-three/drei";
|
|
import { Sphere, Line } from "@react-three/drei";
|
|
import { useRef } from "react";
|
|
import { useFrame } from "@react-three/fiber";
|
|
import { EffectComposer, Bloom } from "@react-three/postprocessing";
|
|
import { motion } from "framer-motion";
|
|
import { ReactTyped } from "react-typed";
|
|
import Navbar from "./Navbar";
|
|
|
|
const Glow = ({ className = "" }) => (
|
|
<div
|
|
className={`pointer-events-none absolute inset-0 -z-10 opacity-60 blur-2xl
|
|
[background:radial-gradient(60%_60%_at_20%_0%,rgba(0,255,255,.15),transparent_60%),radial-gradient(50%_50%_at_90%_20%,rgba(0,255,200,.12),transparent_60%),radial-gradient(40%_40%_at_50%_120%,rgba(0,200,255,.1),transparent_60%)] ${className}`}
|
|
/>
|
|
);
|
|
|
|
function AnimatedNeuralNode({ position, color, size = 0.08 }) {
|
|
const ref = useRef();
|
|
|
|
useFrame((state) => {
|
|
if (ref.current) {
|
|
// Subtle pulsing animation
|
|
ref.current.scale.x = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
|
|
ref.current.scale.y = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
|
|
ref.current.scale.z = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
|
|
}
|
|
});
|
|
|
|
return (
|
|
<Sphere ref={ref} args={[size, 64, 64]} position={position}>
|
|
<meshStandardMaterial
|
|
color={color}
|
|
emissive={color}
|
|
emissiveIntensity={2}
|
|
toneMapped={false}
|
|
/>
|
|
</Sphere>
|
|
);
|
|
}
|
|
|
|
function NeuralStructure({
|
|
position = [0, 0, 0],
|
|
color = "#00faff",
|
|
nodeCount = 18, // Fixed node count instead of random
|
|
}) {
|
|
const nodes = useRef([]);
|
|
|
|
if (nodes.current.length === 0) {
|
|
for (let i = 0; i < nodeCount; i++) {
|
|
nodes.current.push([
|
|
(Math.random() - 0.5) * 3,
|
|
(Math.random() - 0.5) * 3,
|
|
(Math.random() - 0.5) * 3,
|
|
]);
|
|
}
|
|
}
|
|
|
|
const connections = [];
|
|
for (let i = 0; i < nodeCount; i++) {
|
|
const connectionCount = 2 + Math.floor(Math.random() * 2);
|
|
const connectedIndices = new Set();
|
|
|
|
while (connectedIndices.size < connectionCount) {
|
|
const targetIndex = Math.floor(Math.random() * nodeCount);
|
|
if (targetIndex !== i) {
|
|
connectedIndices.add(targetIndex);
|
|
}
|
|
}
|
|
|
|
connectedIndices.forEach((targetIndex) => {
|
|
connections.push([i, targetIndex]);
|
|
});
|
|
}
|
|
|
|
return (
|
|
<group position={position}>
|
|
{nodes.current.map((pos, i) => (
|
|
<AnimatedNeuralNode key={i} position={pos} color={color} />
|
|
))}
|
|
|
|
{connections.map(([start, end], i) => (
|
|
<Line
|
|
key={i}
|
|
points={[nodes.current[start], nodes.current[end]]}
|
|
color={color}
|
|
lineWidth={1}
|
|
transparent
|
|
opacity={0.6}
|
|
toneMapped={false}
|
|
/>
|
|
))}
|
|
</group>
|
|
);
|
|
}
|
|
|
|
export default function Home() {
|
|
const structures = [];
|
|
const colors = [
|
|
"#00faff",
|
|
"#00d9ff",
|
|
"#00bfff",
|
|
"#1e90ff",
|
|
"#007fff",
|
|
"#4dffff",
|
|
];
|
|
|
|
// Fixed number of structures (18 as requested between 12-24)
|
|
const fixedStructureCount = 18;
|
|
|
|
for (let i = 0; i < fixedStructureCount; i++) {
|
|
structures.push({
|
|
position: [
|
|
(Math.random() - 0.5) * 15,
|
|
(Math.random() - 0.5) * 15,
|
|
(Math.random() - 0.5) * 15,
|
|
],
|
|
color: colors[i % colors.length],
|
|
nodeCount: 18, // Fixed node count for all structures
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className="w-screen min-h-screen border-t border-cyan-500/20 bg-[#0b1117] overflow-y-auto">
|
|
<Navbar/>
|
|
|
|
{/* Content Section - Now scrollable on mobile */}
|
|
<div className="relative min-h-screen">
|
|
<div className="absolute inset-0 flex md:left-10 items-center justify-center z-10 pointer-events-none">
|
|
<Glow />
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 1, ease: "easeOut" }}
|
|
className="px-8 py-6 rounded-2xl bg-white/10 backdrop-blur-lg border border-white/20 shadow-lg text-center pointer-events-auto mx-4"
|
|
>
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 1, ease: "easeOut" }}
|
|
className="text-4xl md:text-8xl font-bold text-cyan-200 drop-shadow-[0_0_15px_#00faff] special-font"
|
|
>
|
|
<b>MACHINE LEARNING FOR EVERYONE</b> (<b>ML4E</b>)
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.5, duration: 1, ease: "easeOut" }}
|
|
className="mt-2 text-lg md:text-2xl text-blue-300 drop-shadow-[0_0_10px_#00d9ff]"
|
|
style={{ fontFamily: "Roboto, sans-serif" }}
|
|
>
|
|
<ReactTyped
|
|
strings={["THE OFFICIAL MACHINE LEARNING CLUB OF NIT ROURKELA"]}
|
|
typeSpeed={50}
|
|
backSpeed={30}
|
|
backDelay={1500}
|
|
loop={false}
|
|
showCursor={true}
|
|
/>
|
|
</motion.p>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Canvas with fixed height and proper z-index */}
|
|
<div className="fixed inset-0 z-0">
|
|
<Canvas camera={{ position: [0, 0, 10], fov: 30 }}>
|
|
<color attach="background" args={["#000000"]} />
|
|
<ambientLight intensity={0.3} />
|
|
<pointLight position={[10, 10, 10]} intensity={2} />
|
|
|
|
{structures.map((props, i) => (
|
|
<NeuralStructure key={i} {...props} />
|
|
))}
|
|
|
|
<OrbitControls
|
|
enableZoom={false} // Disabled zoom completely
|
|
autoRotate={false} // Disabled auto rotation
|
|
enablePan={false}
|
|
enableRotate={window.innerWidth > 768}
|
|
minDistance={8} // Prevent zoom out
|
|
maxDistance={12} // Prevent zoom in
|
|
touches={{
|
|
ONE: null,
|
|
TWO: null
|
|
}}
|
|
/>
|
|
|
|
<EffectComposer>
|
|
<Bloom
|
|
intensity={2.5}
|
|
kernelSize={3}
|
|
luminanceThreshold={0.1}
|
|
luminanceSmoothing={0.9}
|
|
/>
|
|
</EffectComposer>
|
|
</Canvas>
|
|
</div>
|
|
|
|
{/* Add some scrollable content to demonstrate scrolling */}
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
} |