HackDavis · michelleyeoh · Feb 27, 2026 · Feb 19, 2026 · Feb 19, 2026 · Feb 19, 2026
diff --git a/app/(pages)/(index-page)/_components/Create/create.tsx b/app/(pages)/(index-page)/_components/Create/create.tsx
@@ -1,9 +1,22 @@
+'use client';
+
 import Image from 'next/image';
 import HeartButton from '@app/(pages)/(index-page)/_components/HeartButton/heartButton';
+import {
+  useParallax,
+  PARALLAX_SPEEDS,
+  getParallaxStyle,
+} from '@app/(pages)/_hooks/useParallax';
 
 export default function Create() {
+  const { mousePosition, containerRef } = useParallax();
+  const { bigShape, mediumShape, extraTiniTiny } = PARALLAX_SPEEDS;
+
   return (
-    <div className="relative flex flex-col gap-5 w-full md md:w-auto md:mb-32">
+    <div
+      ref={containerRef}
+      className="relative flex flex-col gap-5 w-full md:w-auto md:mb-32"
+    >
       {/* Background decorative images - hidden on mobile */}
       <Image
         src="/Images/Create/glue.svg"
@@ -28,7 +41,8 @@ export default function Create() {
           alt="Big Yellow Star"
           width={111}
           height={111}
-          className="hidden md:block absolute w-auto h-[130px] ml-[20%] -mt-[8%] transition-transform duration-300 animate-spin-10"
+          style={getParallaxStyle(mousePosition, mediumShape)}
+          className="hidden md:block absolute ml-[20%] -mt-[8%] w-auto h-[130px]"
         />
 
         {/* Frog + Yellow bar wrapper - side by side on mobile */}
@@ -92,7 +106,8 @@ export default function Create() {
           alt="Green Flower"
           width={131}
           height={131}
-          className="hidden xl:block ml-[2%] mt-auto mb-[4%] h-[131px] transition-transform duration-300 animate-spin-10"
+          className="hidden xl:block ml-[2%] mt-auto mb-[4%] h-[131px]"
+          style={getParallaxStyle(mousePosition, mediumShape)}
         />
       </div>
 
@@ -149,7 +164,8 @@ export default function Create() {
             alt="Pink Flower"
             width={111}
             height={111}
-            className="hidden md:block absolute w-auto h-[78px] -bottom-[5%] ml-[3%] transition-transform duration-300 animate-spin-10"
+            className="hidden md:block absolute w-auto h-[78px] -bottom-[5%] ml-[3%]"
+            style={getParallaxStyle(mousePosition, extraTiniTiny)}
           />
         </div>
 
@@ -162,14 +178,26 @@ export default function Create() {
             height={288}
             className="mb-auto w-full max-h-[288px] h-auto origin-bottom-right"
           />
-
-          <Image
-            src="/Images/Create/bluedonut.svg"
-            alt="Blue Flower"
-            width={111}
-            height={111}
-            className="absolute w-auto h-[200px] bottom-0 mb-[2%] ml-[20%] pt-[10%] transition-transform duration-300 animate-spin-10"
-          />
+          <div
+            className="absolute bottom-0 mb-[2%] ml-[20%] pt-[10%]"
+            // can't import getParallaxStyle here because it needs to spin at the same time
+            style={{
+              transform: `translateX(${
+                mousePosition.x / bigShape
+              }px) translateY(${mousePosition.y / bigShape}px)`,
+            }}
+          >
+            <Image
+              src="/Images/Create/bluedonut.svg"
+              alt="Blue Flower"
+              width={111}
+              height={111}
+              className="w-auto h-[200px]"
+              style={{
+                animation: 'spin 30s linear infinite',
+              }}
+            />
+          </div>
         </div>
       </div>
     </div>

diff --git a/app/(pages)/(index-page)/_components/Stats.tsx b/app/(pages)/(index-page)/_components/Stats.tsx
@@ -18,21 +18,45 @@ import time_count from '@public/home/stats/time_count.svg';
 import squiggly_circle_pink from '@public/home/stats/squiggly_circle_pink.svg';
 import squiggly_circle_yellow from '@public/home/stats/squiggly_circle_yellow.svg';
 import background_gradient from '@public/home/stats/background_gradient.svg';
+import {
+  useParallax,
+  PARALLAX_SPEEDS,
+  getParallaxStyle,
+} from '@app/(pages)/_hooks/useParallax';
 
 export default function Stats() {
   const [isHovered, setIsHovered] = useState(false);
 
+  const { mousePosition, containerRef } = useParallax();
+  const { bigShape, mediumShape, littleShape, extraTiniTiny } = PARALLAX_SPEEDS;
+
   return (
-    <div className="stats-section relative w-full h-[1200px] sm:h-[1400px] md:max-h-screen md:h-screen overflow-x-clip ">
+    <div
+      ref={containerRef}
+      className="stats-section relative w-full h-[1200px] sm:h-[1400px] md:max-h-screen md:h-screen overflow-x-clip "
+    >
       <div className="relative w-full h-full">
         {/* Top Left - Scissors */}
         <div className="absolute md:left-[-10%] md:top-[calc(25%-21vw)] w-[38%] max-w-92 hidden md:block">
           <Image src={scissors} alt="Scissors" className="w-full h-auto" />
         </div>
 
         {/* Top area - Cross (lime green) */}
-        <div className="absolute md:top-[30%] md:left-[20%] md:w-[15%] md:max-w-64 sm:top-[35%] sm:left-[-15%] top-[30%] left-[-15%] w-[30%]">
-          <Image src={cross_lime} alt="Cross" className="w-full h-auto" />
+        <div
+          className="absolute md:top-[30%] md:left-[20%] md:w-[15%] md:max-w-64 sm:top-[35%] sm:left-[-15%] top-[30%] left-[-15%] w-[30%]"
+          // can't import getParallaxStyle here because it needs to spin at the same time
+          style={{
+            transform: `translateX(${
+              mousePosition.x / bigShape
+            }px) translateY(${mousePosition.y / bigShape}px)`,
+          }}
+        >
+          <Image
+            src={cross_lime}
+            alt="Cross"
+            className="w-full h-auto"
+            style={{ animation: 'spin 30s linear infinite' }}
+          />
         </div>
 
         {/* Circle of Circles (cyan) */}
@@ -41,12 +65,18 @@ export default function Stats() {
             src={circle_of_circles_cyan}
             alt="Circle of Circles"
             className="w-full h-auto"
+            style={getParallaxStyle(mousePosition, mediumShape)}
           />
         </div>
 
         {/* Green Flower Thing */}
         <div className="absolute md:top-[15%] md:left-[89%] md:w-[10%] md:max-w-32 sm:right-[-7%] sm:top-[13%] right-[-7%] top-[9%]">
-          <Image src={flower_thing} alt="Flower" className="w-full h-auto" />
+          <Image
+            src={flower_thing}
+            alt="Flower"
+            className="w-full h-auto"
+            style={getParallaxStyle(mousePosition, littleShape)}
+          />
         </div>
 
         {/* Projects w-[16%] md:w-[24%] lg: xs:max-w-24  md:max-w-48 lg:*/}
@@ -102,20 +132,43 @@ export default function Stats() {
             src={circle_of_circles_pink}
             alt="Circle of Circles"
             className="w-full h-auto"
+            style={getParallaxStyle(mousePosition, bigShape)}
           />
         </div>
 
         {/* Cross Cyan */}
-        <div className="absolute md:top-[calc(45%+21vw)] md:right-[10%] md:w-[8vw] md:max-w-48 md:rotate-0 sm:top-[81%] sm:right-[60%] sm:w-[28%] top-[75%] right-[55%] rotate-[45deg]">
-          <Image src={cross_cyan} alt="Cross" className="w-full h-auto" />
+        <div
+          className="absolute md:top-[calc(45%+21vw)] md:right-[10%] md:w-[8vw] md:max-w-48 md:rotate-0 sm:top-[81%] sm:right-[60%] sm:w-[28%] top-[75%] right-[55%] rotate-[45deg]"
+          // can't import getParallaxStyle here because it needs to spin at the same time
+          style={{
+            transform: `translateX(${
+              mousePosition.x / littleShape
+            }px) translateY(${mousePosition.y / littleShape}px)`,
+          }}
+        >
+          <Image
+            src={cross_cyan}
+            alt="Cross"
+            className="w-full h-auto"
+            style={{ animation: 'spin 30s linear infinite reverse' }}
+          />
         </div>
 
         {/* Squiggly Circle Yellow */}
-        <div className="absolute md:top-[calc(20%+20vw)] md:left-[5vw] md:w-[10vw] md:max-w-20 sm:top-[68%] sm:max-w-24 sm:w-[20%] sm:left-[5%] left-[5vw] top-[65%]">
+        <div
+          className="absolute md:top-[calc(20%+20vw)] md:left-[5vw] md:w-[10vw] md:max-w-20 sm:top-[68%] sm:max-w-24 sm:w-[20%] sm:left-[5%] left-[5vw] top-[65%]"
+          // can't import getParallaxStyle here because it needs to spin at the same time
+          style={{
+            transform: `translateX(${
+              mousePosition.x / extraTiniTiny
+            }px) translateY(${mousePosition.y / extraTiniTiny}px)`,
+          }}
+        >
           <Image
             src={squiggly_circle_yellow}
             alt="Circle"
             className="w-full h-auto"
+            style={{ animation: 'spin 25s linear infinite reverse' }}
           />
         </div>
 
@@ -125,6 +178,7 @@ export default function Stats() {
             src={squiggly_circle_pink}
             alt="Circle"
             className="w-full h-auto"
+            style={getParallaxStyle(mousePosition, littleShape)}
           />
         </div>
 

diff --git a/app/(pages)/(index-page)/_components/TenYears.tsx b/app/(pages)/(index-page)/_components/TenYears.tsx
@@ -4,6 +4,11 @@ import Image from 'next/image';
 import { motion, useScroll, useTransform } from 'framer-motion';
 import { useRef } from 'react';
 import { useState, useEffect } from 'react';
+import {
+  useParallax,
+  PARALLAX_SPEEDS,
+  getParallaxStyle,
+} from '@app/(pages)/_hooks/useParallax';
 
 // Helper to scale all numbers in the path
 function scalePath(path: string, scale: number) {
@@ -48,10 +53,12 @@ function FlyingMascot({
 }
 
 export default function TenYears() {
-  const containerRef = useRef(null);
   const waveWrapperRef = useRef<HTMLDivElement>(null);
   const [scale, setScale] = useState(1);
 
+  const { mousePosition, containerRef } = useParallax();
+  const { littleShape } = PARALLAX_SPEEDS;
+
   // track scroll progress
   const { scrollYProgress } = useScroll({
     target: containerRef,
@@ -115,6 +122,7 @@ export default function TenYears() {
           width={280}
           height={429}
           className="h-[240px] sm:h-[500px] xl:h-[895px] w-auto"
+          style={getParallaxStyle(mousePosition, littleShape)}
         />
 
         {mascots.map((mascot, index) => (
@@ -141,6 +149,7 @@ export default function TenYears() {
         width={110}
         height={144}
         className="absolute right-[20%] sm:right-[2%] -bottom-[10%] sm:bottom-[10%] md:bottom-[20%] w-[70px] xl:w-[120px] h-auto ml-auto sm:-mr-4"
+        style={getParallaxStyle(mousePosition, littleShape)}
       />
     </div>
   );

diff --git a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx
@@ -1,23 +1,43 @@
+'use client';
+
 import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import HeartButton from '../HeartButton/heartButton';
 import WordCycle from '../wordCycle/wordCycle';
+import {
+  useParallax,
+  PARALLAX_SPEEDS,
+  getParallaxStyle,
+} from '@app/(pages)/_hooks/useParallax';
 
 export default function HeroInfo() {
+  const { mousePosition, containerRef } = useParallax();
+  const { bigShape, mediumShape, littleShape, extraTiniTiny } = PARALLAX_SPEEDS;
+
   return (
     <>
       <div
         id="home"
-        className="flex flex-col pl-[9%] items-center -pl-5 p-5 w-full gap-6 md:flex-row md:items-stretch md:pr-[5%]"
+        ref={containerRef}
+        className="flex flex-col pl-[9%] items-center -pl-5 p-5 w-full gap-6 md:flex-row md:items-stretch md:pr-[13%]"
       >
-        <div className="absolute top-0 left-[27%] md:left-[30%] -z-10 overflow-hidden">
+        <div
+          className="absolute -top-24 left-[27%] md:left-[30%] -z-10"
+          // can't import getParallaxStyle here because it needs to spin at the same time
+          style={{
+            transform: `translateX(${
+              mousePosition.x / extraTiniTiny
+            }px) translateY(${mousePosition.y / extraTiniTiny}px)`,
+          }}
+        >
           <Image
             src="/Images/reghero/Green.svg"
-            alt="Animals on couch"
+            alt="green flower"
             width={300}
             height={300}
             className="flex flex-row justify-center object-contain w-[40%] md:h-full md:w-full"
+            style={{ animation: 'spin 30s linear infinite' }}
           />
         </div>
         <div>
@@ -27,20 +47,33 @@ export default function HeroInfo() {
             width={156.5}
             height={221.27}
             className="absolute top-29 left-27 -z-10 hidden md:block"
+            style={getParallaxStyle(mousePosition, bigShape)}
           />
-          <Image
-            src="/Images/reghero/YellowDonut.svg"
-            alt="Animals on couch"
-            width={100}
-            height={100}
-            className="absolute -z-10 top-[56%] md:top-[50%] left-[2%] justify-center object-contain animate-slow-spin"
-          />
+          <div
+            className="absolute -z-10 top-[56%] md:top-[50%] left-[2%]"
+            // can't import getParallaxStyle here because it needs to spin at the same time
+            style={{
+              transform: `translateX(${
+                mousePosition.x / mediumShape
+              }px) translateY(${mousePosition.y / mediumShape}px)`,
+            }}
+          >
+            <Image
+              src="/Images/reghero/YellowDonut.svg"
+              alt="yellow donut"
+              width={100}
+              height={100}
+              className="justify-center object-contain"
+              style={{ animation: 'spin 25s linear infinite reverse' }}
+            />
+          </div>
           <Image
             src="/Images/reghero/BlueThing.svg"
-            alt="Animals on couch"
+            alt="blue shape"
             width={100}
             height={100}
-            className="absolute order-2 md:order-none top-[85%] -left-[5%] md:left-[35%] justify-center -z-10 object-contain animate-slow-spin"
+            className="absolute order-2 md:order-none top-[85%] -left-[5%] md:left-[35%] justify-center -z-10 object-contain"
+            style={getParallaxStyle(mousePosition, littleShape)}
           />
         </div>
         {/* animals on couch */}
@@ -79,7 +112,7 @@ export default function HeroInfo() {
               </div>
 
               <div className="flex flex-row items-start gap-[12px] break-625:flex-col break-625:items-end break-625:gap-[28px] sm:flex-row sm:items-center">
-                {/* <Link
+                <Link
                   href="https://apply.hackdavis.io/"
                   target="_blank"
                   className="
@@ -102,7 +135,7 @@ export default function HeroInfo() {
                   "
                 >
                   Register Now
-                </Link> */}
+                </Link>
 
                 <div className="flex h-[40px] w-[138px] flex-shrink-0 items-center rounded-[100px] bg-black/15 text-center text-[18px] font-bold tracking-[0.4px] text-black break-625:h-[50px] break-625:w-[170px] break-625:py-0 break-625:text-[20px]">
                   <HeartButton

diff --git a/app/(pages)/_globals/styles/globals.scss b/app/(pages)/_globals/styles/globals.scss
@@ -99,6 +99,15 @@
     transform: rotate(360deg);
   }
 }
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 html {
   @apply scroll-smooth;
 }

diff --git a/app/(pages)/_hooks/empty.ts b/app/(pages)/_hooks/empty.ts