Feature/landing page fireflies (#8)

* fix: extended background page

* fix: added background color to body

* feat: fireflies

* fix: zoomed in

* fix: typing errors, linting, converted to Float32Array

* fix: fireflies component

* fix: deleted examples

* fix: Layout component changes

* update: comments on react three fiber next starter code

* fix: firefly adjustments

* fix: firefly adjustments

feat: sanity setup (#12)

* feat: sanity setup

* feat: github preview for sanity

* feat: sanity deploy prod workflow

* update: site workflow name

* fix: add turbo.json

* Removed unused Common component

* fix: removed overflow on body

---------

Co-authored-by: Sam Der <[email protected]>

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)/components/Fireflies.tsx

@@ -0,0 +1,67 @@
+import { Sparkles } from "@react-three/drei";
+
+const Fireflies = () => {
+	return (
+		<>
+			<Sparkles
+				color="orange"
+				count={95}
+				noise={0.35}
+				opacity={0.8}
+				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 Fireflies;

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,22 @@
+"use client";
+
 import Button from "@/lib/components/Button/Button";
 import styles from "./Landing.module.css";
 
+import { Suspense } from "react";
+import { PerspectiveCamera } from "@react-three/drei";
+import { View } from "@/components/canvas/View";
+import Fireflies from "../../components/Fireflies";
+
 const Landing = () => {
 	return (
 		<section className={styles.landingSection}>
+			<View className="h-full w-full absolute">
+				<Suspense fallback={null}>
+					<Fireflies />
+					<PerspectiveCamera makeDefault position={[0.1, 0.1, 0.6]} />
+				</Suspense>
+			</View>
 			<div className={styles.landingGroup}>
 				<h1 className="font-display">IrvineHacks 2024</h1>
 				<p className="font-display">January 26&ndash;28</p>

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 className="overflow-y-hidden overflow-x-hidden">
+				{/* reference: https://github.com/pmndrs/react-three-next */}
+				<Layout>{children}</Layout>
+			</body>
 		</html>
 	);
 }

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

@@ -0,0 +1,17 @@
+"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 */}
+			{/* Tunnel exit where all View components render into this global canvas */}
+			<r3f.Out />
+			<Preload all />
+		</Canvas>
+	);
+}

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

@@ -0,0 +1,28 @@
+"use client";
+
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { OrbitControls, View as ViewImpl } from "@react-three/drei";
+import { Three } from "@/helpers/components/Three";
+
+const View = forwardRef(({ children, orbit, ...props }: any, ref) => {
+	const localRef = useRef<any>();
+	useImperativeHandle(ref, () => localRef.current);
+
+	return (
+		<>
+			<div ref={localRef} {...props} />
+			{/* Sends View component thru tunnel to render on global Canvas in Scene.tsx */}
+			<Three>
+				{/* View component to render 3D view in a div (uses gl.scissor to cut viewport into segments) */}
+				<ViewImpl track={localRef}>
+					{children}
+					{/* drag controls to control camera in View*/}
+					{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 Scene from "@/components/canvas/Scene";
+
+const Layout = ({ children }: { children: ReactNode }) => {
+	const ref = useRef<HTMLDivElement>(null);
+
+	return (
+		<div
+			ref={ref}
+			style={{
+				position: "relative",
+				width: " 100%",
+				height: "100%",
+				overflow: "auto",
+				touchAction: "auto",
+			}}
+		>
+			{children}
+			{/* Canvas wrapper component defined as a child 
+			to allow for compatibilty as a client component in layout.tsx
+			*/}
+			<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,9 @@
+"use client";
+
+import { r3f } from "@/helpers/global";
+import { ReactNode } from "react";
+
+export const Three = ({ children }: { children: ReactNode }) => {
+	// tunnel entrance
+	return <r3f.In>{children}</r3f.In>;
+};

apps/site/src/helpers/global.ts

@@ -0,0 +1,8 @@
+import tunnel from "tunnel-rat";
+// allows you to define components in one place in the virtual DOM
+// and have it appear in another place in the browser on a separate render
+// (normally not possible with HTML elements)
+
+// r3f.out - renders anything defined within r3f.in components
+// r3f.in - wraps any components we want to send thru the tunnel somewhere else
+export const r3f = tunnel();

apps/site/turbo.json

@@ -0,0 +1,14 @@
+{
+	"extends": [
+		"//"
+	],
+	"pipeline": {
+		"build": {
+			"outputs": [
+				".vercel/**",
+				".next/**",
+				"!.next/cache/**"
+			]
+		}
+	}
+}