Feature/landing page fireflies

apps/site/package.json

@@ -15,11 +15,16 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
+    "@react-three/drei": "^9.88.11",
+    "@react-three/fiber": "^8.15.10",
+    "@types/three": "^0.158.1",
     "clsx": "^2.0.0",
     "lucide-react": "^0.292.0",
     "next": "13.5.6",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "three": "^0.158.0",
+    "tunnel-rat": "^0.1.2"
   },
   "devDependencies": {
     "@types/node": "^20",

apps/site/src/app/(home)/sections/Landing/Landing.module.css

@@ -2,6 +2,7 @@
 	background-image: url("~@/assets/backgrounds/landing-background.jpg");
 	background-position: center;
 	background-repeat: no-repeat;
+	background-size: cover;
 	position: relative;
 	min-height: 100vh;
 	min-width: 100vw;

apps/site/src/app/(home)/sections/Landing/Landing.tsx

@@ -1,9 +1,32 @@
+"use client";
+
 import Button from "@/lib/components/Button/Button";
 import styles from "./Landing.module.css";
 
+import { View } from "@/components/canvas/View";
+import { Suspense } from "react";
+import { Canvas } from "@react-three/fiber";
+import { Stars, Sparkles, PerspectiveCamera } from "@react-three/drei";
+
 const Landing = () => {
 	return (
 		<section className={styles.landingSection}>
+			<View className="h-full w-full absolute">
+				<Suspense fallback={null}>
+					{/* <Stars
+						radius={100}
+						depth={50}
+						count={5000}
+						factor={4}
+						saturation={0}
+						fade
+						speed={1}
+					></Stars> */}
+					<Fireflies />
+
+					<PerspectiveCamera makeDefault position={[0, 0, 0.6]} />
+				</Suspense>
+			</View>
 			<div className={styles.landingGroup}>
 				<h1 className="font-display">IrvineHacks 2024</h1>
 				<p className="font-display">January 26&ndash;28</p>
@@ -16,4 +39,68 @@ const Landing = () => {
 	);
 };
 
+const Fireflies = () => {
+	return (
+		<>
+			<Sparkles
+				color="orange"
+				count={100}
+				noise={1}
+				opacity={1}
+				speed={0.3}
+				size={
+					new Float32Array([
+						0.5060793161392212, 2.4199981689453125,
+						4.7787370681762695, 3.6893203258514404,
+						2.25410532951355, 2.670276403427124, 2.374255418777466,
+						3.4126408100128174, 4.4318952560424805,
+						3.60624361038208, 3.1159565448760986,
+						3.3411238193511963, 0.1044161319732666,
+						3.262430429458618, 1.3243125677108765,
+						2.440800428390503, 2.692298173904419, 4.571378231048584,
+						3.741450786590576, 0.2505072057247162,
+						1.6173772811889648, 4.049655437469482,
+						0.3294524848461151, 0.9160524010658264,
+						3.3010778427124023, 4.2943806648254395,
+						3.107447624206543, 2.9960644245147705,
+						2.056182384490967, 2.822615623474121, 3.692037582397461,
+						4.153282642364502, 1.8387819528579712,
+						2.121147394180298, 0.40831276774406433,
+						2.383126735687256, 2.205545425415039, 2.504565954208374,
+						1.1564998626708984, 3.55126690864563,
+						0.09390266984701157, 0.16662879288196564,
+						4.490508556365967, 3.385791301727295,
+						3.1175172328948975, 4.595211505889893,
+						0.17107276618480682, 4.884709358215332,
+						4.52973747253418, 2.1367416381835938,
+						0.10195884853601456, 2.629635810852051,
+						0.5618736743927002, 4.941617488861084,
+						1.1538593769073486, 1.262843370437622,
+						4.375873565673828, 1.688683032989502,
+						3.9133527278900146, 3.276317834854126,
+						0.953614354133606, 2.4378554821014404, 4.64397668838501,
+						0.12958145141601562, 2.3536739349365234,
+						4.448606967926025, 3.7263424396514893,
+						4.0849409103393555, 2.799133539199829,
+						2.991407871246338, 1.12977933883667, 3.9851388931274414,
+						1.8534866571426392, 1.4554123878479004,
+						1.277143120765686, 2.462888479232788, 4.695364952087402,
+						3.752734899520874, 3.4006259441375732,
+						1.272702932357788, 3.819554567337036, 1.095497488975525,
+						2.3996856212615967, 1.2399526834487915,
+						4.529360771179199, 1.5870914459228516,
+						2.127842903137207, 1.4537944793701172,
+						0.6043626070022583, 3.5439579486846924,
+						0.20899750292301178, 3.0012423992156982,
+						1.4123945236206055, 1.3441721200942993,
+						1.2065531015396118, 4.578973770141602,
+						2.351515769958496, 2.9505105018615723,
+						2.4308571815490723, 2.1237339973449707,
+					])
+				}
+			/>
+		</>
+	);
+};
+
 export default Landing;

apps/site/src/app/globals.css

@@ -8,10 +8,12 @@
 :root {
 	--color-cream: #fffce2;
 	--color-brown: #432810;
+	--color-dark-blue: #090c31;
 }
 
 body {
 	color: var(--color-cream);
+	background-color: var(--color-dark-blue);
 }
 
 h1 {

apps/site/src/app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import "./globals.css";
 
+import { Layout } from "@/components/dom/Layout";
+
 export const metadata: Metadata = {
 	title: "IrvineHacks 2024",
 	description:
@@ -14,7 +16,10 @@ export default function RootLayout({
 }) {
 	return (
 		<html lang="en">
-			<body>{children}</body>
+			<body>
+				{/* reference: https://github.com/pmndrs/react-three-next */}
+				<Layout>{children}</Layout>
+			</body>
 		</html>
 	);
 }

apps/site/src/components/canvas/Examples.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useGLTF } from "@react-three/drei";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import { useMemo, useRef, useState } from "react";
+import { Line, useCursor, MeshDistortMaterial } from "@react-three/drei";
+import { useRouter } from "next/navigation";
+
+export const Blob = ({ route = "/", ...props }) => {
+	const router = useRouter();
+	const [hovered, hover] = useState(false);
+	useCursor(hovered);
+	return (
+		<mesh
+			onClick={() => router.push(route)}
+			onPointerOver={() => hover(true)}
+			onPointerOut={() => hover(false)}
+			{...props}
+		>
+			<sphereGeometry args={[1, 64, 64]} />
+			<MeshDistortMaterial
+				roughness={0}
+				color={hovered ? "hotpink" : "#1fb2f5"}
+			/>
+		</mesh>
+	);
+};
+
+export const Logo = ({ route = "/blob", ...props }) => {
+	const mesh = useRef<any>(null);
+	const router = useRouter();
+
+	const [hovered, hover] = useState(false);
+	const points = useMemo(
+		() =>
+			new THREE.EllipseCurve(
+				0,
+				0,
+				3,
+				1.15,
+				0,
+				2 * Math.PI,
+				false,
+				0,
+			).getPoints(100),
+		[],
+	);
+
+	useCursor(hovered);
+	useFrame((state, delta) => {
+		const t = state.clock.getElapsedTime();
+
+		mesh.current.rotation.y = Math.sin(t) * (Math.PI / 8);
+		mesh.current.rotation.x = Math.cos(t) * (Math.PI / 8);
+		mesh.current.rotation.z -= delta / 4;
+	});
+
+	return (
+		<group ref={mesh} {...props}>
+			{/* @ts-ignore */}
+			<Line worldUnits points={points} color="#1fb2f5" lineWidth={0.15} />
+			{/* @ts-ignore */}
+			<Line
+				worldUnits
+				points={points}
+				color="#1fb2f5"
+				lineWidth={0.15}
+				rotation={[0, 0, 1]}
+			/>
+			{/* @ts-ignore */}
+			<Line
+				worldUnits
+				points={points}
+				color="#1fb2f5"
+				lineWidth={0.15}
+				rotation={[0, 0, -1]}
+			/>
+			<mesh
+				onClick={() => router.push(route)}
+				onPointerOver={() => hover(true)}
+				onPointerOut={() => hover(false)}
+			>
+				<sphereGeometry args={[0.55, 64, 64]} />
+				<meshPhysicalMaterial
+					roughness={0}
+					color={hovered ? "hotpink" : "#1fb2f5"}
+				/>
+			</mesh>
+		</group>
+	);
+};
+
+export function Duck(props: any) {
+	const { scene } = useGLTF("/duck.glb");
+
+	useFrame((state, delta) => (scene.rotation.y += delta));
+
+	return <primitive object={scene} {...props} />;
+}
+export function Dog(props: any) {
+	const { scene } = useGLTF("/dog.glb");
+
+	return <primitive object={scene} {...props} />;
+}

apps/site/src/components/canvas/Scene.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { Canvas } from "@react-three/fiber";
+import { Preload } from "@react-three/drei";
+import { r3f } from "@/helpers/global";
+
+export default function Scene({ ...props }) {
+	// Everything defined in here will persist between route changes, only children are swapped
+	return (
+		<Canvas {...props}>
+			{/* @ts-ignore */}
+			<r3f.Out />
+			<Preload all />
+		</Canvas>
+	);
+}

apps/site/src/components/canvas/View.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import {
+	forwardRef,
+	MutableRefObject,
+	Suspense,
+	useImperativeHandle,
+	useRef,
+} from "react";
+import {
+	OrbitControls,
+	PerspectiveCamera,
+	View as ViewImpl,
+} from "@react-three/drei";
+import { Three } from "@/helpers/components/Three";
+
+export const Common = ({ color }: any) => (
+	<Suspense fallback={null}>
+		{color && <color attach="background" args={[color]} />}
+		<ambientLight intensity={0.5} />
+		<pointLight position={[20, 30, 10]} intensity={1} />
+		<pointLight position={[-10, -10, -10]} color="blue" />
+		<PerspectiveCamera makeDefault fov={40} position={[0, 0, 6]} />
+	</Suspense>
+);
+
+const View = forwardRef(({ children, orbit, ...props }: any, ref) => {
+	const localRef = useRef<any>(null);
+	useImperativeHandle(ref, () => localRef.current);
+
+	return (
+		<>
+			<div ref={localRef} {...props} />
+			<Three>
+				<ViewImpl track={localRef}>
+					{children}
+					{orbit && <OrbitControls />}
+				</ViewImpl>
+			</Three>
+		</>
+	);
+});
+View.displayName = "View";
+
+export { View };

apps/site/src/components/dom/Layout.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { ReactNode, useRef } from "react";
+import dynamic from "next/dynamic";
+const Scene = dynamic(() => import("@/components/canvas/Scene"), {
+	ssr: false,
+});
+
+const Layout = ({ children }: { children: ReactNode }) => {
+	const ref = useRef<any>();
+
+	return (
+		<div
+			ref={ref}
+			style={{
+				position: "relative",
+				width: " 100%",
+				height: "100%",
+				overflow: "auto",
+				touchAction: "auto",
+			}}
+		>
+			{children}
+			<Scene
+				style={{
+					position: "fixed",
+					top: 0,
+					left: 0,
+					width: "100vw",
+					height: "100vh",
+					pointerEvents: "none",
+				}}
+				eventSource={ref}
+				eventPrefix="client"
+			/>
+		</div>
+	);
+};
+
+export { Layout };

apps/site/src/helpers/components/Three.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { r3f } from "@/helpers/global";
+import { ReactNode } from "react";
+
+export const Three = ({ children }: { children: ReactNode }) => {
+	return <r3f.In>{children}</r3f.In>;
+};

apps/site/src/helpers/global.ts

@@ -0,0 +1,3 @@
+import tunnel from "tunnel-rat";
+
+export const r3f = tunnel();