diff --git a/app/(pages)/(index-page)/_components/Create/create.tsx b/app/(pages)/(index-page)/_components/Create/create.tsx index 21734fe..20322b4 100644 --- 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 ( -
+
{/* Background decorative images - hidden on mobile */} Big Yellow Star {/* 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)} />
@@ -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)} />
@@ -162,14 +178,26 @@ export default function Create() { height={288} className="mb-auto w-full max-h-[288px] h-auto origin-bottom-right" /> - - Blue Flower +
+ Blue Flower +
diff --git a/app/(pages)/(index-page)/_components/Stats.tsx b/app/(pages)/(index-page)/_components/Stats.tsx index f2724cc..c20b5ff 100644 --- a/app/(pages)/(index-page)/_components/Stats.tsx +++ b/app/(pages)/(index-page)/_components/Stats.tsx @@ -18,12 +18,23 @@ 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 ( -
+
{/* Top Left - Scissors */}
@@ -31,8 +42,21 @@ export default function Stats() {
{/* Top area - Cross (lime green) */} -
- Cross +
+ Cross
{/* 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)} />
{/* Green Flower Thing */}
- Flower + Flower
{/* 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)} />
{/* Cross Cyan */} -
- Cross +
+ Cross
{/* Squiggly Circle Yellow */} -
+
Circle
@@ -125,6 +178,7 @@ export default function Stats() { src={squiggly_circle_pink} alt="Circle" className="w-full h-auto" + style={getParallaxStyle(mousePosition, littleShape)} />
diff --git a/app/(pages)/(index-page)/_components/TenYears.tsx b/app/(pages)/(index-page)/_components/TenYears.tsx index 92287b0..f5e68bf 100644 --- 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(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)} />
); diff --git a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx index d2e3222..b539cf7 100644 --- 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 ( <>
-
+
Animals on couch
@@ -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)} /> - Animals on couch +
+ yellow donut +
Animals on couch
{/* animals on couch */} @@ -79,7 +112,7 @@ export default function HeroInfo() {
- {/* Register Now - */} +
(null); + const targetPositionRef = useRef({ x: 0, y: 0 }); + const currentPositionRef = useRef({ x: 0, y: 0 }); + const velocityRef = useRef({ x: 0, y: 0 }); + const animationFrameRef = useRef(null); + + useEffect(() => { + const container = containerRef.current; + const veloFactor = 0.01; + const damping = 0.83; + + const animate = () => { + if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { + return; // skip animation if user prefers reduced motion + } + const xVelo = + (targetPositionRef.current.x - currentPositionRef.current.x) * + veloFactor; + const yVelo = + (targetPositionRef.current.y - currentPositionRef.current.y) * + veloFactor; + + velocityRef.current.x += xVelo; + velocityRef.current.y += yVelo; + + velocityRef.current.x *= damping; + velocityRef.current.y *= damping; + + currentPositionRef.current.x += velocityRef.current.x; + currentPositionRef.current.y += velocityRef.current.y; + + setMousePosition({ + x: currentPositionRef.current.x, + y: currentPositionRef.current.y, + }); + + animationFrameRef.current = requestAnimationFrame(animate); + }; + + const handleMouseMove = (event: MouseEvent) => { + // md breakpoint - desktop only + if (container && window.innerWidth >= 768) { + const rect = container.getBoundingClientRect(); + const x = event.clientX - rect.left - rect.width / 2; // center of screen is parallax origin + const y = event.clientY - rect.top - rect.height / 2; // center of screen is parallax origin + targetPositionRef.current = { x, y }; + } + }; + + animationFrameRef.current = requestAnimationFrame(animate); + container?.addEventListener('mousemove', handleMouseMove); + + return () => { + container?.removeEventListener('mousemove', handleMouseMove); + if (animationFrameRef.current) { + cancelAnimationFrame(animationFrameRef.current); + } + }; + }, []); + + return { mousePosition, containerRef }; +} diff --git a/public/Images/reghero/Green.svg b/public/Images/reghero/Green.svg index 87c5b20..ba91ef0 100644 --- a/public/Images/reghero/Green.svg +++ b/public/Images/reghero/Green.svg @@ -1,3 +1,3 @@ - - + +