hero section work

src/web/src/app/page.jsx

@@ -1,11 +1,11 @@
 // Imports
-import { HeroSection1, HeroSection2, HeroSection3 } from "@/components/hero";
+import Hero from "@/components/hero";
 
 // Metadata
 
 // Exports
 export default function Index() {
   return (
-    null
+    <Hero />
   );
 }

src/web/src/components/hero.jsx

@@ -1,67 +0,0 @@
-"use client"
-
-import { Suspense, useMemo } from "react";
-import { Canvas } from "@react-three/fiber";
-import { motion, AnimatePresence } from "framer-motion";
-import { useState, useEffect } from "react";
-import { OrbitControls } from "@react-three/drei";
-import Bird from "@/components/Bird";
-
-function HeroSection1() {
-  const birds = useMemo(
-    () =>
-      new Array(10).fill().map((_, index) => {
-        const x =
-          (15 + Math.random() * 30) * (Math.round(Math.random()) ? -1 : 1);
-        const y = -10 + Math.random() * 20;
-        const z = -5 + Math.random() * 10;
-        const bird = ["stork", "parrot", "flamingo"][
-          Math.round(Math.random() * 2)
-        ];
-        const speed = bird === "stork" ? 0.5 : bird === "flamingo" ? 2 : 5;
-        const factor =
-          bird === "stork"
-            ? 0.5 + Math.random()
-            : bird === "flamingo"
-            ? 0.25 + Math.random()
-            : 1 + Math.random() - 0.5;
-
-        return {
-          key: index,
-          position: [x, y, z],
-          rotation: [0, x > 0 ? Math.PI : 0, 0],
-          speed,
-          factor,
-          url: `/glb/${bird}.glb`,
-        };
-      }),
-    [],
-  );
-
-  return (
-    <Canvas camera={{ position: [0, 0, 35] }}>
-      <ambientLight intensity={2} />
-      <pointLight position={[40, 40, 40]} />
-      <OrbitControls />
-      <Suspense fallback={null}>
-        {birds.map((props) => (
-          <Bird {...props} key={props.key} />
-        ))}
-      </Suspense>
-    </Canvas>
-  );
-}
-
-function HeroSection2() {
-
-}
-
-function HeroSection3() {
-
-}
-
-export {
-  HeroSection1,
-  HeroSection2,
-  HeroSection3
-}

src/web/src/components/hero/index.jsx

@@ -0,0 +1,46 @@
+"use client"
+
+import React, { useRef } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+import { ScrollControls, Scroll } from '@react-three/drei';
+import * as THREE from 'three';
+import Particles from '@/components/hero/particles';
+import Sections from '@/components/hero/sections';
+
+function Hero() {
+  const cameraRef = useRef();
+
+  return (
+    <div className="w-full h-screen">
+      <Canvas>
+        <ScrollControls pages={3}>
+          <Scroll>
+            <Particles />
+          </Scroll>
+          <Scroll html>
+            <Sections />
+          </Scroll>
+        </ScrollControls>
+        <perspectiveCamera ref={cameraRef} position={[0, 0, 5]} />
+        <SceneUpdater cameraRef={cameraRef} />
+      </Canvas>
+    </div>
+  );
+}
+
+function SceneUpdater({ cameraRef }) {
+  useFrame(({ pointer }) => {
+    const camera = cameraRef.current;
+    if (!camera) return;
+
+    camera.position.x = THREE.MathUtils.lerp(camera.position.x, pointer.x * 0.5, 0.03);
+    camera.position.y = THREE.MathUtils.lerp(camera.position.y, pointer.y * 0.8, 0.01);
+    camera.position.z = THREE.MathUtils.lerp(camera.position.z, Math.max(4, Math.abs(pointer.x * pointer.y * 8)), 0.01);
+    camera.rotation.y = THREE.MathUtils.lerp(camera.rotation.y, pointer.x * -Math.PI * 0.025, 0.001);
+  });
+
+  return null;
+}
+
+export default Hero;
+

src/web/src/components/hero/particles.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Point, Points } from '@react-three/drei'
+import { useThree } from '@react-three/fiber'
+
+const particleColors = ['#673ab7', '#f4b677', 'orange', 'blue', '#8bc34a', 'purple']
+
+function Particles({ size = 5000 }) {
+  const { width, height } = useThree((state) => state.viewport)
+
+  return (
+    <Points limit={size}>
+      <pointsMaterial size={0.05} vertexColors />
+      {Array.from({ length: size }).map((_, i) => (
+        <Point
+          key={i}
+          position={[
+            (0.5 - Math.random()) * width * 2,
+            0.5 * height + Math.random() ** 0.25 * height * -3,
+            (0.5 - Math.random()) * 25
+          ]}
+          color={particleColors[Math.floor(Math.random() * (particleColors.length - 1))]}
+        />
+      ))}
+    </Points>
+  )
+}
+
+export default Particles

src/web/src/components/hero/sections.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+function Sections() {
+  return (
+    <div className="relative h-screen overflow-y-scroll">
+      <div className="h-screen flex items-center justify-center">
+        <h1 className="text-gray-700">hello.</h1>
+      </div>
+      <div className="h-screen flex items-center justify-center">
+        <h1 className="text-orange-400">Your Future</h1>
+      </div>
+      <div className="h-screen flex items-center justify-center">
+        <h1 className="text-indigo-800">Awaits</h1>
+      </div>
+    </div>
+  );
+}
+
+export default Sections;

src/web/src/style/globals.css

@@ -41,7 +41,6 @@ body {
 }
 
 /* 3d goodies :D */
-canvas {
+canvas + div {
-  width: 100%;
+  mix-blend-mode: multiply;
-  height: 100vh;
 }