From 431fe801f791c0b9d5be2b70efaa08af2660a336 Mon Sep 17 00:00:00 2001 From: phlangiee <174984579+phlangiee@users.noreply.github.com> Date: Wed, 18 Feb 2026 17:58:15 -0800 Subject: [PATCH 01/17] parallax animation for hero --- .../_components/heroInfo/heroInfo.tsx | 54 ++++++++++++++++++- 1 file changed, 52 insertions(+), 2 deletions(-) diff --git a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx index 7d4bd73..34008ab 100644 --- a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx +++ b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx @@ -1,20 +1,55 @@ +'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 { useEffect, useRef, useState } from 'react'; + +/** + * NOTE FOR ALEX: GET GREEN FLOWER FULL + */ export default function HeroInfo() { + + const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); + const containerRef = useRef(null); + + useEffect(() => { + const container = containerRef.current; + + const handleMouseMove = (event: MouseEvent) => { + if (container && window.innerWidth > 425) { + const rect = container.getBoundingClientRect(); + const x = event.clientX - rect.left; + const y = event.clientY - rect.top; + setMousePosition({ x, y }); + } + }; + + container?.addEventListener('mousemove', handleMouseMove); + + return () => { + container?.removeEventListener('mousemove', handleMouseMove); + }; + }, []); + return ( <> -
-
+
+
Animals on couch
@@ -24,6 +59,11 @@ export default function HeroInfo() { width={156.5} height={221.27} className="absolute top-29 left-27 -z-10 hidden md:block" + style={{ + transform: `translateX(${mousePosition.x / 50}px) translateY(${ + mousePosition.y / 50 + }px)`, + }} />
{/* animals on couch */} From 46d3524f0c1b0aeb2cf855fb916b597a91c0d205 Mon Sep 17 00:00:00 2001 From: phlangiee <174984579+phlangiee@users.noreply.github.com> Date: Wed, 18 Feb 2026 19:46:50 -0800 Subject: [PATCH 02/17] other parralax animation --- .../_components/heroInfo/heroInfo.tsx | 62 ++++++++++++++++--- 1 file changed, 52 insertions(+), 10 deletions(-) diff --git a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx index 34008ab..eafee55 100644 --- a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx +++ b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx @@ -8,30 +8,72 @@ import WordCycle from '../wordCycle/wordCycle'; import { useEffect, useRef, useState } from 'react'; /** - * NOTE FOR ALEX: GET GREEN FLOWER FULL + * NOTES: + * - Need full image of green flower? + * - velofactor ~ how fast it moves + * - damping ~ how much it slows down over time + * - note if dont want ugly spring + * - if want inc velo, decrease damping + * - if want dec velo, increase damping + * - i like among us + * - if want to add more movement, decrease pixels dividing by in transform */ export default function HeroInfo() { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); const containerRef = useRef(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 = () => { + 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) => { if (container && window.innerWidth > 425) { const rect = container.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; - setMousePosition({ x, y }); + targetPositionRef.current = { x, y }; + //setMousePosition({ x, y }); } }; + animationFrameRef.current = requestAnimationFrame(animate); container?.addEventListener('mousemove', handleMouseMove); return () => { container?.removeEventListener('mousemove', handleMouseMove); + if (animationFrameRef.current) { + cancelAnimationFrame(animationFrameRef.current); + } }; }, []); @@ -46,8 +88,8 @@ export default function HeroInfo() { height={300} className="flex flex-row justify-center object-contain w-[40%] md:h-full md:w-full" style={{ - transform: `translateX(${mousePosition.x / 30}px) translateY(${ - mousePosition.y / 30 + transform: `translateX(${mousePosition.x / 20}px) translateY(${ + mousePosition.y / 20 }px)`, }} /> @@ -60,8 +102,8 @@ export default function HeroInfo() { height={221.27} className="absolute top-29 left-27 -z-10 hidden md:block" style={{ - transform: `translateX(${mousePosition.x / 50}px) translateY(${ - mousePosition.y / 50 + transform: `translateX(${mousePosition.x / 40}px) translateY(${ + mousePosition.y / 40 }px)`, }} /> @@ -72,8 +114,8 @@ export default function HeroInfo() { height={100} className="absolute -z-10 top-[56%] md:top-[50%] left-[2%] justify-center object-contain animate-slow-spin" style={{ - transform: `translateX(${mousePosition.x / 40}px) translateY(${ - mousePosition.y / 40 + transform: `translateX(${mousePosition.x / 30}px) translateY(${ + mousePosition.y / 30 }px)`, }} /> @@ -84,8 +126,8 @@ export default function HeroInfo() { 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" style={{ - transform: `translateX(${mousePosition.x / 35}px) translateY(${ - mousePosition.y / 35 + transform: `translateX(${mousePosition.x / 25}px) translateY(${ + mousePosition.y / 25 }px)`, }} /> From 869cb1c4d8b1f61743b4b618a2ff4854858919ec Mon Sep 17 00:00:00 2001 From: phlangiee <174984579+phlangiee@users.noreply.github.com> Date: Wed, 18 Feb 2026 20:35:02 -0800 Subject: [PATCH 03/17] temporary files so that i dont accidently lose stuff --- .../_components/heroInfo/save.tsx | 286 ++++++++++++++++++ .../_components/heroInfo/wait.tsx | 264 ++++++++++++++++ 2 files changed, 550 insertions(+) create mode 100644 app/(pages)/(index-page)/_components/heroInfo/save.tsx create mode 100644 app/(pages)/(index-page)/_components/heroInfo/wait.tsx diff --git a/app/(pages)/(index-page)/_components/heroInfo/save.tsx b/app/(pages)/(index-page)/_components/heroInfo/save.tsx new file mode 100644 index 0000000..4f714f1 --- /dev/null +++ b/app/(pages)/(index-page)/_components/heroInfo/save.tsx @@ -0,0 +1,286 @@ +'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 { useEffect, useRef, useState } from 'react'; + +/** + * NOTES: + * - Need full image of green flower? + * - velofactor ~ how fast it moves + * - damping ~ how much it slows down over time + * - note if dont want ugly spring + * - if want inc velo, decrease damping + * - if want dec velo, increase damping + * - i like among us + * - if want to add more movement, decrease pixels dividing by in transform + */ + +export default function HeroInfo() { + + const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); + const containerRef = useRef(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 = () => { + const xVelo = (targetPositionRef.current.x - currentPositionRef.current.x) * veloFactor; + const yVelo = (targetPositionRef.current.y - currentPositionRef.current.y) * veloFactor; + + velocityRef.current.x += xVelo; //* idk; + velocityRef.current.y += yVelo; //* idk; + + 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) => { + if (container && window.innerWidth > 425) { + const rect = container.getBoundingClientRect(); + const x = event.clientX - rect.left; + const y = event.clientY - rect.top; + targetPositionRef.current = { x, y }; + //setMousePosition({ x, y }); + } + }; + + animationFrameRef.current = requestAnimationFrame(animate); + container?.addEventListener('mousemove', handleMouseMove); + + return () => { + container?.removeEventListener('mousemove', handleMouseMove); + if (animationFrameRef.current) { + cancelAnimationFrame(animationFrameRef.current); + } + }; + }, []); + + return ( + <> +
+
+ Animals on couch +
+
+ watertower + Animals on couch + Animals on couch +
+ {/* animals on couch */} +
+ Animals on couch +
+ + {/* right side */} +
+ {/* here text + buttons */} +
+
+
+

+ + + + for +

+

+ social good +

+

+ May 9-10, 2026 @ UCenter +

+
+ +
+ + Register Now + + +
+ +
+
+ +
+ + Check out the{' '} + +
+ + Apply to be a{' '} + Judge,{' '} + Mentor, or{' '} + Volunteer + +
+
+
+
+ + {/* desktop numbers */} +
+ 1 + 0 +
+
+
+ +
+ Animals on couch + Animals on couch +
+ + ); +} + +interface FormLinkProps { + href: string; + includeComma: boolean; + children: React.ReactNode; +} + +function FormLink({ href, includeComma, children }: FormLinkProps) { + return ( + + {children} + + Arrow icon + + {includeComma && ,} + + ); +} diff --git a/app/(pages)/(index-page)/_components/heroInfo/wait.tsx b/app/(pages)/(index-page)/_components/heroInfo/wait.tsx new file mode 100644 index 0000000..a3b5427 --- /dev/null +++ b/app/(pages)/(index-page)/_components/heroInfo/wait.tsx @@ -0,0 +1,264 @@ +'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 { useEffect, useRef, useState } from 'react'; + +export default function HeroInfo() { + + const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); + const containerRef = useRef(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 stiffness = 0.09; + const damping = 0.8; + + const animate = () => { + const dx = targetPositionRef.current.x - currentPositionRef.current.x; + const dy = targetPositionRef.current.y - currentPositionRef.current.y; + + velocityRef.current.x = (velocityRef.current.x + dx * stiffness) * damping; + velocityRef.current.y = (velocityRef.current.y + dy * stiffness) * 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) => { + if (container && window.innerWidth > 425) { + const rect = container.getBoundingClientRect(); + const x = event.clientX - rect.left; + const y = event.clientY - rect.top; + targetPositionRef.current = { x, y }; + } + }; + + animationFrameRef.current = requestAnimationFrame(animate); + container?.addEventListener('mousemove', handleMouseMove); + + return () => { + container?.removeEventListener('mousemove', handleMouseMove); + if (animationFrameRef.current) { + cancelAnimationFrame(animationFrameRef.current); + } + }; + }, []); + + return ( + <> +
+
+ Animals on couch +
+
+ watertower + Animals on couch + Animals on couch +
+ {/* animals on couch */} +
+ Animals on couch +
+ + {/* right side */} +
+ {/* here text + buttons */} +
+
+
+

+ + + + for +

+

+ social good +

+

+ May 9-10, 2026 @ UCenter +

+
+ +
+ + Register Now + + +
+ +
+
+ +
+ + Check out the{' '} + +
+ + Apply to be a{' '} + Judge,{' '} + Mentor, or{' '} + Volunteer + +
+
+
+
+ + {/* desktop numbers */} +
+ 1 + 0 +
+
+
+ +
+ Animals on couch + Animals on couch +
+ + ); +} + +interface FormLinkProps { + href: string; + includeComma: boolean; + children: React.ReactNode; +} + +function FormLink({ href, includeComma, children }: FormLinkProps) { + return ( + + {children} + + Arrow icon + + {includeComma && ,} + + ); +} From 23be5678752aeca0784d06e1ff3c6a2f3a1e9c80 Mon Sep 17 00:00:00 2001 From: phlangiee <174984579+phlangiee@users.noreply.github.com> Date: Wed, 25 Feb 2026 19:58:44 -0800 Subject: [PATCH 04/17] parrallax for thw whole page --- .../_components/Create/create.tsx | 97 ++++++++++++++- .../(index-page)/_components/Stats.tsx | 114 +++++++++++++++++- .../(index-page)/_components/TenYears.tsx | 67 +++++++++- .../_components/heroInfo/heroInfo.tsx | 23 ++-- 4 files changed, 280 insertions(+), 21 deletions(-) diff --git a/app/(pages)/(index-page)/_components/Create/create.tsx b/app/(pages)/(index-page)/_components/Create/create.tsx index 21734fe..3cb304f 100644 --- a/app/(pages)/(index-page)/_components/Create/create.tsx +++ b/app/(pages)/(index-page)/_components/Create/create.tsx @@ -1,9 +1,74 @@ +'use client'; + import Image from 'next/image'; import HeartButton from '@app/(pages)/(index-page)/_components/HeartButton/heartButton'; - +import { useState, useEffect, useRef } from 'react'; +// HERE export default function Create() { + + const bigShape = 50; + const mediumShape = 35; + const littleShape = 25; + const extraTiniTiny = 20; + + const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); + const containerRef = useRef(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 = () => { + 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) => { + if (container && window.innerWidth > 425) { + const rect = container.getBoundingClientRect(); + const x = event.clientX - rect.left; + const y = event.clientY - rect.top; + targetPositionRef.current = { x, y }; + //setMousePosition({ x, y }); + } + }; + + animationFrameRef.current = requestAnimationFrame(animate); + container?.addEventListener('mousemove', handleMouseMove); + + return () => { + container?.removeEventListener('mousemove', handleMouseMove); + if (animationFrameRef.current) { + cancelAnimationFrame(animationFrameRef.current); + } + }; + }, []); + return ( -
+
{/* Background decorative images - hidden on mobile */} Big Yellow Star {/* Frog + Yellow bar wrapper - side by side on mobile */} @@ -92,7 +162,12 @@ 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] animate-spin-10" + style={{ + transform: `translateX(${mousePosition.x / mediumShape}px) translateY(${ + mousePosition.y / mediumShape + }px)`, + }} />
@@ -149,7 +224,12 @@ 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%] animate-spin-10" + style={{ + transform: `translateX(${mousePosition.x / extraTiniTiny}px) translateY(${ + mousePosition.y / extraTiniTiny + }px)`, + }} />
@@ -168,7 +248,12 @@ export default function Create() { 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" + className="absolute w-auto h-[200px] bottom-0 mb-[2%] ml-[20%] pt-[10%] animate-spin-10" + style={{ + transform: `translateX(${mousePosition.x / bigShape}px) translateY(${ + mousePosition.y / bigShape + }px)`, + }} />
diff --git a/app/(pages)/(index-page)/_components/Stats.tsx b/app/(pages)/(index-page)/_components/Stats.tsx index f2724cc..394ce5f 100644 --- a/app/(pages)/(index-page)/_components/Stats.tsx +++ b/app/(pages)/(index-page)/_components/Stats.tsx @@ -1,5 +1,5 @@ 'use client'; -import React, { useState } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import Image from 'next/image'; import Link from 'next/link'; import circle_of_circles_pink from '@public/home/stats/circle_of_circles_pink.svg'; @@ -18,12 +18,73 @@ 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'; - +// HErE export default function Stats() { const [isHovered, setIsHovered] = useState(false); + const bigShape = 50; + const mediumShape = 35; + const littleShape = 25; + const extraTiniTiny = 20; + + const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); + const containerRef = useRef(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 = () => { + 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) => { + if (container && window.innerWidth > 425) { + const rect = container.getBoundingClientRect(); + const x = event.clientX - rect.left; + const y = event.clientY - rect.top; + targetPositionRef.current = { x, y }; + //setMousePosition({ x, y }); + } + }; + + animationFrameRef.current = requestAnimationFrame(animate); + container?.addEventListener('mousemove', handleMouseMove); + + return () => { + container?.removeEventListener('mousemove', handleMouseMove); + if (animationFrameRef.current) { + cancelAnimationFrame(animationFrameRef.current); + } + }; + }, []); + return ( -
+
{/* Top Left - Scissors */}
@@ -32,7 +93,16 @@ export default function Stats() { {/* Top area - Cross (lime green) */}
- Cross + Cross
{/* Circle of Circles (cyan) */} @@ -41,12 +111,23 @@ export default function Stats() { src={circle_of_circles_cyan} alt="Circle of Circles" className="w-full h-auto" + style={{ + transform: `translateX(${mousePosition.x / mediumShape}px) translateY(${ + mousePosition.y / mediumShape + }px)`, + }} />
{/* Green Flower Thing */}
- Flower + Flower
{/* Projects w-[16%] md:w-[24%] lg: xs:max-w-24 md:max-w-48 lg:*/} @@ -102,12 +183,23 @@ export default function Stats() { src={circle_of_circles_pink} alt="Circle of Circles" className="w-full h-auto" + style={{ + transform: `translateX(${mousePosition.x / bigShape}px) translateY(${ + mousePosition.y / bigShape + }px)`, + }} />
{/* Cross Cyan */}
- Cross + Cross
{/* Squiggly Circle Yellow */} @@ -116,6 +208,11 @@ export default function Stats() { src={squiggly_circle_yellow} alt="Circle" className="w-full h-auto" + style={{ + transform: `translateX(${mousePosition.x / extraTiniTiny}px) translateY(${ + mousePosition.y / extraTiniTiny + }px)`, + }} />
@@ -125,6 +222,11 @@ export default function Stats() { src={squiggly_circle_pink} alt="Circle" className="w-full h-auto" + style={{ + transform: `translateX(${mousePosition.x / littleShape}px) translateY(${ + mousePosition.y / littleShape + }px)`, + }} />
diff --git a/app/(pages)/(index-page)/_components/TenYears.tsx b/app/(pages)/(index-page)/_components/TenYears.tsx index 92287b0..e70d6c9 100644 --- a/app/(pages)/(index-page)/_components/TenYears.tsx +++ b/app/(pages)/(index-page)/_components/TenYears.tsx @@ -47,10 +47,20 @@ function FlyingMascot({ ); } + const bigShape = 50; + const mediumShape = 35; + const littleShape = 25; + const extraTiniTiny = 20; + export default function TenYears() { - const containerRef = useRef(null); + const containerRef = useRef(null); const waveWrapperRef = useRef(null); const [scale, setScale] = useState(1); + const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); + 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); // track scroll progress const { scrollYProgress } = useScroll({ @@ -72,6 +82,55 @@ export default function TenYears() { return () => resizeObserver.disconnect(); }, []); + useEffect(() => { + const container = containerRef.current; + + const veloFactor = 0.01; + const damping = 0.83; + + const animate = () => { + 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) => { + if (container && window.innerWidth > 425) { + const rect = container.getBoundingClientRect(); + const x = event.clientX - rect.left; + const y = event.clientY - rect.top; + targetPositionRef.current = { x, y }; + } + }; + + animationFrameRef.current = requestAnimationFrame(animate); + container?.addEventListener('mousemove', handleMouseMove); + + return () => { + container?.removeEventListener('mousemove', handleMouseMove); + if (animationFrameRef.current) { + cancelAnimationFrame(animationFrameRef.current); + } + }; + }, []); + const mascots = [ { src: '/home/tenyears/flying-rabbit.svg', @@ -115,6 +174,9 @@ export default function TenYears() { width={280} height={429} className="h-[240px] sm:h-[500px] xl:h-[895px] w-auto" + style={{ + transform: `translateX(${mousePosition.x / littleShape}px) translateY(${mousePosition.y / littleShape}px)`, + }} /> {mascots.map((mascot, index) => ( @@ -141,6 +203,9 @@ 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={{ + transform: `translateX(${mousePosition.x / littleShape}px) translateY(${mousePosition.y / littleShape}px)`, + }} />
); diff --git a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx index 9971657..7a714ce 100644 --- a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx +++ b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx @@ -19,8 +19,15 @@ import { useEffect, useRef, useState } from 'react'; * - if want to add more movement, decrease pixels dividing by in transform */ +//HERE + export default function HeroInfo() { + const bigShape = 50; + const mediumShape = 35; + const littleShape = 25; + const extraTiniTiny = 20; + const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); const containerRef = useRef(null); const targetPositionRef = useRef({ x: 0, y: 0 }); @@ -88,8 +95,8 @@ export default function HeroInfo() { height={300} className="flex flex-row justify-center object-contain w-[40%] md:h-full md:w-full" style={{ - transform: `translateX(${mousePosition.x / 20}px) translateY(${ - mousePosition.y / 20 + transform: `translateX(${mousePosition.x / extraTiniTiny}px) translateY(${ + mousePosition.y / extraTiniTiny }px)`, }} /> @@ -102,8 +109,8 @@ export default function HeroInfo() { height={221.27} className="absolute top-29 left-27 -z-10 hidden md:block" style={{ - transform: `translateX(${mousePosition.x / 40}px) translateY(${ - mousePosition.y / 40 + transform: `translateX(${mousePosition.x / bigShape}px) translateY(${ + mousePosition.y / bigShape }px)`, }} /> @@ -114,8 +121,8 @@ export default function HeroInfo() { height={100} className="absolute -z-10 top-[56%] md:top-[50%] left-[2%] justify-center object-contain animate-slow-spin" style={{ - transform: `translateX(${mousePosition.x / 30}px) translateY(${ - mousePosition.y / 30 + transform: `translateX(${mousePosition.x / mediumShape}px) translateY(${ + mousePosition.y / mediumShape }px)`, }} /> @@ -126,8 +133,8 @@ export default function HeroInfo() { 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" style={{ - transform: `translateX(${mousePosition.x / 25}px) translateY(${ - mousePosition.y / 25 + transform: `translateX(${mousePosition.x / littleShape}px) translateY(${ + mousePosition.y / littleShape }px)`, }} /> From 947c56cf77bd51eb5756eca5e998a4aebf8033bf Mon Sep 17 00:00:00 2001 From: phlangiee <174984579+phlangiee@users.noreply.github.com> Date: Thu, 26 Feb 2026 15:42:43 -0800 Subject: [PATCH 05/17] green flower not cut out --- .../_components/heroInfo/heroInfo.tsx | 12 +++++++++--- public/Images/reghero/Green.png | Bin 0 -> 4960 bytes 2 files changed, 9 insertions(+), 3 deletions(-) create mode 100644 public/Images/reghero/Green.png diff --git a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx index 7a714ce..bb70cf0 100644 --- a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx +++ b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx @@ -86,10 +86,16 @@ export default function HeroInfo() { return ( <> -
-
+
+
+ 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%]" + > +
Animals on couchP{9 z-`u(&fXEo~Sm)~a+`ZWt`f!UW{YE|8BC50y*boD61G#;E)G$^1b%HNFb%A}72exGF z4gmzl-$4HU>6NkO9Zm1leb=Y%8*ioE^jm%N_frD!oVS7OmemLD%~P6}p$>5#*uC@w zfek+LH;}K7+b#fWw0KfexB7w2E@MAw5rA@D2J#g3@ghiIpQ1Akn)w;Xmq$Cs*bh`5 zbjCpyUjupH1@d#!1D$awm6w6+8eOuiZjfH+jKfNK7s&1NFEvw5+T;^-#$n0)3*^h= zr^e6$`7LXpxgY)^I^(biRq_o})9-_&897$kWcSNdjg$)gEidB&yIVOyjSbWCE+jmt zj~79LdjH|Q?T-X70j~nt)yEsIK0c>dNNp`!UERuCWN8@3l20m0lVTz#*O+#sx!1Wq z{veG$0vN%sK$iMARtRVq!>d3xmVTqy^#l6r+12Ma1d#KlMvksNo`kERUH!a;`WZaR z$i2`z)zfn|v@Exgoxz_#wh`CIzre)1vMq<&IbPlbva#kd!8i@GmV9YnA7SMZA)lIE z_zU_gveah#RmLC@M8%6hZl8Z@(%os9P(Wsxp>B?g9~s#q8&6B>W(0FQya;5}$Fo5& z$HSKzxk)e+1alnJ2eJ&>Bh<%pkzhsxENuESvNcVDxk&@8eU&v0AwcQ_8TIkv7-R6j zMWFO&WP^_N!t{@H`aUKJMo=BdS$({m+azMvIJ^El%bi)EnC^^RK{j3nW`2cwIV{?j z)=h$?$m?b71_VO&6is6+1_>;Slq|L7esp%NV;e-TL26`4+oC1QGH|84 z>$bl%-ETcBIk41l<$#PRrq1ip~qdqQ!bg=8osssBqaQf0^e%bPh zW&gT=Io}F8<0>;U2GN&d!|f~YxVL+>VA(QyE&0Il9k-Pitf$hz8@P3IDV=e385#9) zsTSV!I=lS*jt%2k=wb`$j4KS}tO@dkpcLHey5;rXJ2a>4K+jt5fY@N?VLCH)#`P_& zF^Ilgwz@-e9^34{7$*|MILke~hTDp3xX5%pqC}SC1D)~W2AaA+#vp-m&HM8|yE=9a zt;N^b5gX`?+n=5BtbvxE+yu6|rL}tnlKL30&;neH5u|J^T7yK>4J*&ybcuIG_4h+YTgss0=g#O0FhELDMw`d9~JdE!3@1hE2^TG}Rr z)Cd$XwMo7TL9BzEkyjJQ`PdmOt##OFpZ{4K_XX|Ce?CPJtI(4FQ^s3o`5KYZ4yuvGDD)eCZW9`eM9XtS`3IBM=LQxj~+G_9;PcWx=w6Ua%jvgQ&0hUfje^?WXj0`ZwMbTySx&paB?ErN$ zz-Wa#JE{UXZ+KxF3SflnUgZMn&RV4di?RLW=+*H#msCi0YYLO#GGrA~!gQzKH5TmUE@dDQabi+TbAiBKoIj zCdn?LgALKTJ&3-D`aqU%!tE=+Cx93Y4WcjN$6V{Qx+fz*2_Q0N!iKLGft>9t8-76m zkr^IDU&Nc6CbGsC5ti5xj}e3Di+FWqOnrS@uJ*+9$`FN7gXoKRclQ(by3Yt*Y>2?9 zLG*=ROP8WAaJ7w(HHUZHpZ-8PWd$fglps=`Xb(5t6G2XWDiF;Ayh?!=!NNQkoOmzBbXsbcDmh}U@jzXUwzs&WZn>f|1N6l+ndw;2JbWS4P<5r z#kBRY2qut47R*f8X9llLvw!^K_fTN!_qPwZ*L{SCEWlTjp06GhOpQEB`|5bleS8uL zJkOkE=U%st8DOB+9QT7qk&%bFJ?Cb==iDR!B_z>I`uy>*Cn=zixZ0zZe|m%1Y>;8uXTI5M?!RSfxSvLi z07@`VHWpR#Sk}a%^r>rPH4NFu?n90KXW0EuUZpH$?+h|L`d=3H+5}4Fvhh4YEW8Wk z_W385ZS7+hs!gJ#+5c!1Jv#`I>r}gJJonLJF9KOIudSvp`@u_1CMJLou;GvMW@Djx zK`GgnD!k+B+<%bNw*VoTW8Zj~%8V=lY^pcgLnvM$Oq_J5K8jgHRUo@1bj?(gckbP% z1Q0NJKiK3-9Qa2bE~n0hQRS@ZT-n3TAazKqOq!dcBMw7ArqV(eFqnU)^_w zAckmU&8>S+_Gn2~8pvl?$1mNs(icKQ3nG#Q@%ocpTB4N&^4ZnrH%zp&S0n(9RuRNv zCC#pW5c4hpL}XP#ES4U~2x5p)*4SENO+0L=U26m}L`U|C4Zm{*h{DZMdVRG^>0t}s zev%VggmcpnI;IQhN^^4csO%sX3(d$`a|_2VA#{fJWjs$AwQ!Mz)yVm?#BBlyS1aEe zZjmwz%gC-S{(`y~f+I_4Be#>7LyZA^Vi1{ah}9@6jR?++#udH-inO2BgZ-I8smOlP##J@qZ){>pqAxu1;*pd^j#muv@h z`F(v;Z!>DyX3ogS#-LD(dopG=zJQ)Roo3k>Koz;z;7jNF_=6-Gipb0v+5NEEIEo3H z8DsX+u5}rD%iAW_q-M&J0tlQTbKv6x z7ZV4vtB)TOK=?LHH8~*9OrDVq>SKsT!?&~96V=G5k0C}r)ytD*>qU4&qFMa4@|1yxXZvxXmAYL10Em42!>(?2%lAu0@ zxH0W$&&m@lt<&Hh!UmX@_N@HNKsLtyMgXx>o|VT2vilF0XOFS81`xKlLrRU$$d#l? z0FcQ$*eVBWj1OeS{xQIS4Xs&uY#cU#7|0kT08pr*t$RJL+0`Tf7-fU1x=PQHft(Mb2Y@1} zu7gsx;G<}C0gPjGtyo6}G6vBDjOSuR)ftPT8W|ZGU>unqqNw3@Cy-^(9^s-kfC+SK zq{Q8fj6w8zF?9&^s8rOfT<-)j_Ky`abV{HHr+Syx7(}m>p?v~nOpTPd706kAj6r)U zaku-H(7RB@ROkUIaXTYp5WQBd`sUv|1W;gjY274Hhl$_j?;<0^NVftRgXk4+S-u;Zl(pnca ze;)mej6w8zxFvOcefw3xCp!dcRH~IWDbWvP45HV8>4KB)R^jIjGO{MgUp-w*YYd{- z!PUht#-89x{%R4ZQQ!Ps%|k3UuaBDqrOLLNM%KkY;h3f-tm;WLi$V0|%Yu0Q$?k+- zjz<|4U?x>N2o{6r%Qa;XyDca>At)bHixjaKBv77dgE(UhGO`9Kw@49bc3nuflwhT1 z3SyDiLxQqhXlir`TU+0LR=dBw$tHcooW5`$JH%|LQ+V7 zn|JE>vR4@SwJ-nNKL4{ul}gjS+suz|qA4~n*(WyqtbQ+lEOFLjbH@_c{aX0_tPQP6$ca2t zP2|u%#{aC4+sA)jf3Voq)gr8PiO{}2YRGkzu6g#4JY&}=G=}!Mdv)ho;$>)G9__oI z<#U3S(O4ggQrG%Hb;h#*?!H~+d1y4fR*!p?&3p?`6;(yMcb)Nk2~EA;epwGRpy{7$esx5d2Nl9X=YhMW+?4{yfx32Y>aPI?olzw;I)~un2Y08_XVjlkZqzvI7 z7%a}5ez#=XDVy(PlT+&ctD`w+i?qLg+I6dxHv~(fw>}oCYUD*3I5!@Tw7N$oc^>4J zo(9SvAGHKQkS!58MMkg`M)?zG2;_jsK?OP2O|Wojx2t+GOOQ2k>|7UH8ee!iZBdvy zwfoz3QVbb6K(4#`jBw%G!m#XID2G4}kZh5-zkJUK7Q$L{K*}MI1C`awDZeI|TiQ+4 zXJpjKfoos6{bj=b@*FN|>)V^895Qm?)kZn=*x^gS$M~WP$r2bguAOtepBH6iq|Mwl4PZf1QTlVT6YShRuR(^@V zZZ>B;q8eK3Ao?N*WSCg{@@OZ&qNYhf(>-W!6fCV_Vs6R3?>f0#`LbK)gB@lwzXPLr z5PcD3WSCoMw{B`4L|+7f3=8M`t(%$$(HB7=!_xV6>!yG8u|Och%Bj9})6jnH-nMu1 z!4b$%I!(838bdn|?`?axe~v%~l}fpFll-iY1p*nou#(QW2ZQK~AdtaJ%jk?V^B?v5 zPrSTm8i5Q!SVU*s*ZNo>kReF3bjG=tKB{m2?&Z`J1TsWng3h=%gZ4&2AVainb;gZr eba}XceB(b0Oa2bMN&ZIw0000 Date: Thu, 26 Feb 2026 15:42:59 -0800 Subject: [PATCH 06/17] formatting / eslint --- .../_components/Create/create.tsx | 144 +++++++------- .../(index-page)/_components/Stats.tsx | 184 ++++++++++-------- .../(index-page)/_components/TenYears.tsx | 19 +- .../_components/heroInfo/heroInfo.tsx | 45 +++-- .../_components/heroInfo/save.tsx | 19 +- .../_components/heroInfo/wait.tsx | 12 +- 6 files changed, 225 insertions(+), 198 deletions(-) diff --git a/app/(pages)/(index-page)/_components/Create/create.tsx b/app/(pages)/(index-page)/_components/Create/create.tsx index 3cb304f..2cfb6fb 100644 --- a/app/(pages)/(index-page)/_components/Create/create.tsx +++ b/app/(pages)/(index-page)/_components/Create/create.tsx @@ -5,70 +5,74 @@ import HeartButton from '@app/(pages)/(index-page)/_components/HeartButton/heart import { useState, useEffect, useRef } from 'react'; // HERE export default function Create() { - const bigShape = 50; const mediumShape = 35; - const littleShape = 25; const extraTiniTiny = 20; const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); - const containerRef = useRef(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 = () => { - 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) => { - if (container && window.innerWidth > 425) { - const rect = container.getBoundingClientRect(); - const x = event.clientX - rect.left; - const y = event.clientY - rect.top; - targetPositionRef.current = { x, y }; - //setMousePosition({ x, y }); - } - }; - + const containerRef = useRef(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 = () => { + 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); - container?.addEventListener('mousemove', handleMouseMove); - - return () => { - container?.removeEventListener('mousemove', handleMouseMove); - if (animationFrameRef.current) { - cancelAnimationFrame(animationFrameRef.current); - } - }; - }, []); + }; + + const handleMouseMove = (event: MouseEvent) => { + if (container && window.innerWidth > 425) { + const rect = container.getBoundingClientRect(); + const x = event.clientX - rect.left; + const y = event.clientY - rect.top; + targetPositionRef.current = { x, y }; + //setMousePosition({ x, y }); + } + }; + + animationFrameRef.current = requestAnimationFrame(animate); + container?.addEventListener('mousemove', handleMouseMove); + + return () => { + container?.removeEventListener('mousemove', handleMouseMove); + if (animationFrameRef.current) { + cancelAnimationFrame(animationFrameRef.current); + } + }; + }, []); return ( -
+
{/* Background decorative images - hidden on mobile */} {/* Frog + Yellow bar wrapper - side by side on mobile */} @@ -164,10 +168,10 @@ export default function Create() { height={131} className="hidden xl:block ml-[2%] mt-auto mb-[4%] h-[131px] animate-spin-10" style={{ - transform: `translateX(${mousePosition.x / mediumShape}px) translateY(${ - mousePosition.y / mediumShape - }px)`, - }} + transform: `translateX(${ + mousePosition.x / mediumShape + }px) translateY(${mousePosition.y / mediumShape}px)`, + }} />
@@ -226,9 +230,9 @@ export default function Create() { height={111} className="hidden md:block absolute w-auto h-[78px] -bottom-[5%] ml-[3%] animate-spin-10" style={{ - transform: `translateX(${mousePosition.x / extraTiniTiny}px) translateY(${ - mousePosition.y / extraTiniTiny - }px)`, + transform: `translateX(${ + mousePosition.x / extraTiniTiny + }px) translateY(${mousePosition.y / extraTiniTiny}px)`, }} />
@@ -250,9 +254,9 @@ export default function Create() { height={111} className="absolute w-auto h-[200px] bottom-0 mb-[2%] ml-[20%] pt-[10%] animate-spin-10" style={{ - transform: `translateX(${mousePosition.x / bigShape}px) translateY(${ - mousePosition.y / bigShape - }px)`, + transform: `translateX(${ + mousePosition.x / bigShape + }px) translateY(${mousePosition.y / bigShape}px)`, }} />
diff --git a/app/(pages)/(index-page)/_components/Stats.tsx b/app/(pages)/(index-page)/_components/Stats.tsx index 394ce5f..6d9fcce 100644 --- a/app/(pages)/(index-page)/_components/Stats.tsx +++ b/app/(pages)/(index-page)/_components/Stats.tsx @@ -28,63 +28,69 @@ export default function Stats() { const extraTiniTiny = 20; const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); - const containerRef = useRef(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 = () => { - 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) => { - if (container && window.innerWidth > 425) { - const rect = container.getBoundingClientRect(); - const x = event.clientX - rect.left; - const y = event.clientY - rect.top; - targetPositionRef.current = { x, y }; - //setMousePosition({ x, y }); - } - }; - + const containerRef = useRef(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 = () => { + 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); - container?.addEventListener('mousemove', handleMouseMove); - - return () => { - container?.removeEventListener('mousemove', handleMouseMove); - if (animationFrameRef.current) { - cancelAnimationFrame(animationFrameRef.current); - } - }; - }, []); + }; + + const handleMouseMove = (event: MouseEvent) => { + if (container && window.innerWidth > 425) { + const rect = container.getBoundingClientRect(); + const x = event.clientX - rect.left; + const y = event.clientY - rect.top; + targetPositionRef.current = { x, y }; + //setMousePosition({ x, y }); + } + }; + + animationFrameRef.current = requestAnimationFrame(animate); + container?.addEventListener('mousemove', handleMouseMove); + + return () => { + container?.removeEventListener('mousemove', handleMouseMove); + if (animationFrameRef.current) { + cancelAnimationFrame(animationFrameRef.current); + } + }; + }, []); return ( -
+
{/* Top Left - Scissors */}
@@ -93,14 +99,14 @@ export default function Stats() { {/* Top area - Cross (lime green) */}
- Cross
@@ -112,22 +118,25 @@ export default function Stats() { alt="Circle of Circles" className="w-full h-auto" style={{ - transform: `translateX(${mousePosition.x / mediumShape}px) translateY(${ - mousePosition.y / mediumShape - }px)`, + transform: `translateX(${ + mousePosition.x / mediumShape + }px) translateY(${mousePosition.y / mediumShape}px)`, }} />
{/* Green Flower Thing */}
- Flower + />
{/* Projects w-[16%] md:w-[24%] lg: xs:max-w-24 md:max-w-48 lg:*/} @@ -184,21 +193,24 @@ export default function Stats() { alt="Circle of Circles" className="w-full h-auto" style={{ - transform: `translateX(${mousePosition.x / bigShape}px) translateY(${ - mousePosition.y / bigShape - }px)`, + transform: `translateX(${ + mousePosition.x / bigShape + }px) translateY(${mousePosition.y / bigShape}px)`, }} />
{/* Cross Cyan */}
- Cross
@@ -209,9 +221,9 @@ export default function Stats() { alt="Circle" className="w-full h-auto" style={{ - transform: `translateX(${mousePosition.x / extraTiniTiny}px) translateY(${ - mousePosition.y / extraTiniTiny - }px)`, + transform: `translateX(${ + mousePosition.x / extraTiniTiny + }px) translateY(${mousePosition.y / extraTiniTiny}px)`, }} />
@@ -223,9 +235,9 @@ export default function Stats() { alt="Circle" className="w-full h-auto" style={{ - transform: `translateX(${mousePosition.x / littleShape}px) translateY(${ - mousePosition.y / littleShape - }px)`, + transform: `translateX(${ + mousePosition.x / littleShape + }px) translateY(${mousePosition.y / littleShape}px)`, }} />
diff --git a/app/(pages)/(index-page)/_components/TenYears.tsx b/app/(pages)/(index-page)/_components/TenYears.tsx index e70d6c9..b189a97 100644 --- a/app/(pages)/(index-page)/_components/TenYears.tsx +++ b/app/(pages)/(index-page)/_components/TenYears.tsx @@ -47,10 +47,7 @@ function FlyingMascot({ ); } - const bigShape = 50; - const mediumShape = 35; - const littleShape = 25; - const extraTiniTiny = 20; +const littleShape = 25; export default function TenYears() { const containerRef = useRef(null); @@ -90,9 +87,11 @@ export default function TenYears() { const animate = () => { const xVelo = - (targetPositionRef.current.x - currentPositionRef.current.x) * veloFactor; + (targetPositionRef.current.x - currentPositionRef.current.x) * + veloFactor; const yVelo = - (targetPositionRef.current.y - currentPositionRef.current.y) * veloFactor; + (targetPositionRef.current.y - currentPositionRef.current.y) * + veloFactor; velocityRef.current.x += xVelo; velocityRef.current.y += yVelo; @@ -175,7 +174,9 @@ export default function TenYears() { height={429} className="h-[240px] sm:h-[500px] xl:h-[895px] w-auto" style={{ - transform: `translateX(${mousePosition.x / littleShape}px) translateY(${mousePosition.y / littleShape}px)`, + transform: `translateX(${ + mousePosition.x / littleShape + }px) translateY(${mousePosition.y / littleShape}px)`, }} /> @@ -204,7 +205,9 @@ export default function TenYears() { 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={{ - transform: `translateX(${mousePosition.x / littleShape}px) translateY(${mousePosition.y / littleShape}px)`, + transform: `translateX(${ + mousePosition.x / littleShape + }px) translateY(${mousePosition.y / littleShape}px)`, }} />
diff --git a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx index bb70cf0..15fa6a8 100644 --- a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx +++ b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx @@ -13,7 +13,7 @@ import { useEffect, useRef, useState } from 'react'; * - velofactor ~ how fast it moves * - damping ~ how much it slows down over time * - note if dont want ugly spring - * - if want inc velo, decrease damping + * - if want inc velo, decrease damping * - if want dec velo, increase damping * - i like among us * - if want to add more movement, decrease pixels dividing by in transform @@ -22,7 +22,6 @@ import { useEffect, useRef, useState } from 'react'; //HERE export default function HeroInfo() { - const bigShape = 50; const mediumShape = 35; const littleShape = 25; @@ -40,14 +39,17 @@ export default function HeroInfo() { const veloFactor = 0.01; const damping = 0.83; - const animate = () => { - const xVelo = (targetPositionRef.current.x - currentPositionRef.current.x) * veloFactor; - const yVelo = (targetPositionRef.current.y - currentPositionRef.current.y) * veloFactor; + 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 += xVelo; + velocityRef.current.y += yVelo; velocityRef.current.x *= damping; velocityRef.current.y *= damping; @@ -61,7 +63,7 @@ export default function HeroInfo() { }); animationFrameRef.current = requestAnimationFrame(animate); - } + }; const handleMouseMove = (event: MouseEvent) => { if (container && window.innerWidth > 425) { @@ -89,9 +91,6 @@ export default function HeroInfo() {
-
- 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%]" >
@@ -115,9 +114,9 @@ export default function HeroInfo() { height={221.27} className="absolute top-29 left-27 -z-10 hidden md:block" style={{ - transform: `translateX(${mousePosition.x / bigShape}px) translateY(${ - mousePosition.y / bigShape - }px)`, + transform: `translateX(${ + mousePosition.x / bigShape + }px) translateY(${mousePosition.y / bigShape}px)`, }} />
diff --git a/app/(pages)/(index-page)/_components/heroInfo/save.tsx b/app/(pages)/(index-page)/_components/heroInfo/save.tsx index 4f714f1..d5deeed 100644 --- a/app/(pages)/(index-page)/_components/heroInfo/save.tsx +++ b/app/(pages)/(index-page)/_components/heroInfo/save.tsx @@ -13,14 +13,13 @@ import { useEffect, useRef, useState } from 'react'; * - velofactor ~ how fast it moves * - damping ~ how much it slows down over time * - note if dont want ugly spring - * - if want inc velo, decrease damping + * - if want inc velo, decrease damping * - if want dec velo, increase damping * - i like among us * - if want to add more movement, decrease pixels dividing by in transform */ export default function HeroInfo() { - const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); const containerRef = useRef(null); const targetPositionRef = useRef({ x: 0, y: 0 }); @@ -33,11 +32,14 @@ export default function HeroInfo() { const veloFactor = 0.01; const damping = 0.83; - const animate = () => { - const xVelo = (targetPositionRef.current.x - currentPositionRef.current.x) * veloFactor; - const yVelo = (targetPositionRef.current.y - currentPositionRef.current.y) * veloFactor; + const xVelo = + (targetPositionRef.current.x - currentPositionRef.current.x) * + veloFactor; + const yVelo = + (targetPositionRef.current.y - currentPositionRef.current.y) * + veloFactor; velocityRef.current.x += xVelo; //* idk; velocityRef.current.y += yVelo; //* idk; @@ -54,7 +56,7 @@ export default function HeroInfo() { }); animationFrameRef.current = requestAnimationFrame(animate); - } + }; const handleMouseMove = (event: MouseEvent) => { if (container && window.innerWidth > 425) { @@ -79,7 +81,10 @@ export default function HeroInfo() { return ( <> -
+
(null); const targetPositionRef = useRef({ x: 0, y: 0 }); @@ -26,8 +25,10 @@ export default function HeroInfo() { const dx = targetPositionRef.current.x - currentPositionRef.current.x; const dy = targetPositionRef.current.y - currentPositionRef.current.y; - velocityRef.current.x = (velocityRef.current.x + dx * stiffness) * damping; - velocityRef.current.y = (velocityRef.current.y + dy * stiffness) * damping; + velocityRef.current.x = + (velocityRef.current.x + dx * stiffness) * damping; + velocityRef.current.y = + (velocityRef.current.y + dy * stiffness) * damping; currentPositionRef.current.x += velocityRef.current.x; currentPositionRef.current.y += velocityRef.current.y; @@ -62,7 +63,10 @@ export default function HeroInfo() { return ( <> -
+
Date: Thu, 26 Feb 2026 15:53:57 -0800 Subject: [PATCH 07/17] better green flower --- .../_components/heroInfo/heroInfo.tsx | 4 ++-- public/Images/reghero/Green.png | Bin 4960 -> 0 bytes public/Images/reghero/Green.svg | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) delete mode 100644 public/Images/reghero/Green.png diff --git a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx index 15fa6a8..f6d9e74 100644 --- a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx +++ b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx @@ -92,9 +92,9 @@ export default function HeroInfo() { 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%]" > -
+
Animals on couchP{9 z-`u(&fXEo~Sm)~a+`ZWt`f!UW{YE|8BC50y*boD61G#;E)G$^1b%HNFb%A}72exGF z4gmzl-$4HU>6NkO9Zm1leb=Y%8*ioE^jm%N_frD!oVS7OmemLD%~P6}p$>5#*uC@w zfek+LH;}K7+b#fWw0KfexB7w2E@MAw5rA@D2J#g3@ghiIpQ1Akn)w;Xmq$Cs*bh`5 zbjCpyUjupH1@d#!1D$awm6w6+8eOuiZjfH+jKfNK7s&1NFEvw5+T;^-#$n0)3*^h= zr^e6$`7LXpxgY)^I^(biRq_o})9-_&897$kWcSNdjg$)gEidB&yIVOyjSbWCE+jmt zj~79LdjH|Q?T-X70j~nt)yEsIK0c>dNNp`!UERuCWN8@3l20m0lVTz#*O+#sx!1Wq z{veG$0vN%sK$iMARtRVq!>d3xmVTqy^#l6r+12Ma1d#KlMvksNo`kERUH!a;`WZaR z$i2`z)zfn|v@Exgoxz_#wh`CIzre)1vMq<&IbPlbva#kd!8i@GmV9YnA7SMZA)lIE z_zU_gveah#RmLC@M8%6hZl8Z@(%os9P(Wsxp>B?g9~s#q8&6B>W(0FQya;5}$Fo5& z$HSKzxk)e+1alnJ2eJ&>Bh<%pkzhsxENuESvNcVDxk&@8eU&v0AwcQ_8TIkv7-R6j zMWFO&WP^_N!t{@H`aUKJMo=BdS$({m+azMvIJ^El%bi)EnC^^RK{j3nW`2cwIV{?j z)=h$?$m?b71_VO&6is6+1_>;Slq|L7esp%NV;e-TL26`4+oC1QGH|84 z>$bl%-ETcBIk41l<$#PRrq1ip~qdqQ!bg=8osssBqaQf0^e%bPh zW&gT=Io}F8<0>;U2GN&d!|f~YxVL+>VA(QyE&0Il9k-Pitf$hz8@P3IDV=e385#9) zsTSV!I=lS*jt%2k=wb`$j4KS}tO@dkpcLHey5;rXJ2a>4K+jt5fY@N?VLCH)#`P_& zF^Ilgwz@-e9^34{7$*|MILke~hTDp3xX5%pqC}SC1D)~W2AaA+#vp-m&HM8|yE=9a zt;N^b5gX`?+n=5BtbvxE+yu6|rL}tnlKL30&;neH5u|J^T7yK>4J*&ybcuIG_4h+YTgss0=g#O0FhELDMw`d9~JdE!3@1hE2^TG}Rr z)Cd$XwMo7TL9BzEkyjJQ`PdmOt##OFpZ{4K_XX|Ce?CPJtI(4FQ^s3o`5KYZ4yuvGDD)eCZW9`eM9XtS`3IBM=LQxj~+G_9;PcWx=w6Ua%jvgQ&0hUfje^?WXj0`ZwMbTySx&paB?ErN$ zz-Wa#JE{UXZ+KxF3SflnUgZMn&RV4di?RLW=+*H#msCi0YYLO#GGrA~!gQzKH5TmUE@dDQabi+TbAiBKoIj zCdn?LgALKTJ&3-D`aqU%!tE=+Cx93Y4WcjN$6V{Qx+fz*2_Q0N!iKLGft>9t8-76m zkr^IDU&Nc6CbGsC5ti5xj}e3Di+FWqOnrS@uJ*+9$`FN7gXoKRclQ(by3Yt*Y>2?9 zLG*=ROP8WAaJ7w(HHUZHpZ-8PWd$fglps=`Xb(5t6G2XWDiF;Ayh?!=!NNQkoOmzBbXsbcDmh}U@jzXUwzs&WZn>f|1N6l+ndw;2JbWS4P<5r z#kBRY2qut47R*f8X9llLvw!^K_fTN!_qPwZ*L{SCEWlTjp06GhOpQEB`|5bleS8uL zJkOkE=U%st8DOB+9QT7qk&%bFJ?Cb==iDR!B_z>I`uy>*Cn=zixZ0zZe|m%1Y>;8uXTI5M?!RSfxSvLi z07@`VHWpR#Sk}a%^r>rPH4NFu?n90KXW0EuUZpH$?+h|L`d=3H+5}4Fvhh4YEW8Wk z_W385ZS7+hs!gJ#+5c!1Jv#`I>r}gJJonLJF9KOIudSvp`@u_1CMJLou;GvMW@Djx zK`GgnD!k+B+<%bNw*VoTW8Zj~%8V=lY^pcgLnvM$Oq_J5K8jgHRUo@1bj?(gckbP% z1Q0NJKiK3-9Qa2bE~n0hQRS@ZT-n3TAazKqOq!dcBMw7ArqV(eFqnU)^_w zAckmU&8>S+_Gn2~8pvl?$1mNs(icKQ3nG#Q@%ocpTB4N&^4ZnrH%zp&S0n(9RuRNv zCC#pW5c4hpL}XP#ES4U~2x5p)*4SENO+0L=U26m}L`U|C4Zm{*h{DZMdVRG^>0t}s zev%VggmcpnI;IQhN^^4csO%sX3(d$`a|_2VA#{fJWjs$AwQ!Mz)yVm?#BBlyS1aEe zZjmwz%gC-S{(`y~f+I_4Be#>7LyZA^Vi1{ah}9@6jR?++#udH-inO2BgZ-I8smOlP##J@qZ){>pqAxu1;*pd^j#muv@h z`F(v;Z!>DyX3ogS#-LD(dopG=zJQ)Roo3k>Koz;z;7jNF_=6-Gipb0v+5NEEIEo3H z8DsX+u5}rD%iAW_q-M&J0tlQTbKv6x z7ZV4vtB)TOK=?LHH8~*9OrDVq>SKsT!?&~96V=G5k0C}r)ytD*>qU4&qFMa4@|1yxXZvxXmAYL10Em42!>(?2%lAu0@ zxH0W$&&m@lt<&Hh!UmX@_N@HNKsLtyMgXx>o|VT2vilF0XOFS81`xKlLrRU$$d#l? z0FcQ$*eVBWj1OeS{xQIS4Xs&uY#cU#7|0kT08pr*t$RJL+0`Tf7-fU1x=PQHft(Mb2Y@1} zu7gsx;G<}C0gPjGtyo6}G6vBDjOSuR)ftPT8W|ZGU>unqqNw3@Cy-^(9^s-kfC+SK zq{Q8fj6w8zF?9&^s8rOfT<-)j_Ky`abV{HHr+Syx7(}m>p?v~nOpTPd706kAj6r)U zaku-H(7RB@ROkUIaXTYp5WQBd`sUv|1W;gjY274Hhl$_j?;<0^NVftRgXk4+S-u;Zl(pnca ze;)mej6w8zxFvOcefw3xCp!dcRH~IWDbWvP45HV8>4KB)R^jIjGO{MgUp-w*YYd{- z!PUht#-89x{%R4ZQQ!Ps%|k3UuaBDqrOLLNM%KkY;h3f-tm;WLi$V0|%Yu0Q$?k+- zjz<|4U?x>N2o{6r%Qa;XyDca>At)bHixjaKBv77dgE(UhGO`9Kw@49bc3nuflwhT1 z3SyDiLxQqhXlir`TU+0LR=dBw$tHcooW5`$JH%|LQ+V7 zn|JE>vR4@SwJ-nNKL4{ul}gjS+suz|qA4~n*(WyqtbQ+lEOFLjbH@_c{aX0_tPQP6$ca2t zP2|u%#{aC4+sA)jf3Voq)gr8PiO{}2YRGkzu6g#4JY&}=G=}!Mdv)ho;$>)G9__oI z<#U3S(O4ggQrG%Hb;h#*?!H~+d1y4fR*!p?&3p?`6;(yMcb)Nk2~EA;epwGRpy{7$esx5d2Nl9X=YhMW+?4{yfx32Y>aPI?olzw;I)~un2Y08_XVjlkZqzvI7 z7%a}5ez#=XDVy(PlT+&ctD`w+i?qLg+I6dxHv~(fw>}oCYUD*3I5!@Tw7N$oc^>4J zo(9SvAGHKQkS!58MMkg`M)?zG2;_jsK?OP2O|Wojx2t+GOOQ2k>|7UH8ee!iZBdvy zwfoz3QVbb6K(4#`jBw%G!m#XID2G4}kZh5-zkJUK7Q$L{K*}MI1C`awDZeI|TiQ+4 zXJpjKfoos6{bj=b@*FN|>)V^895Qm?)kZn=*x^gS$M~WP$r2bguAOtepBH6iq|Mwl4PZf1QTlVT6YShRuR(^@V zZZ>B;q8eK3Ao?N*WSCg{@@OZ&qNYhf(>-W!6fCV_Vs6R3?>f0#`LbK)gB@lwzXPLr z5PcD3WSCoMw{B`4L|+7f3=8M`t(%$$(HB7=!_xV6>!yG8u|Och%Bj9})6jnH-nMu1 z!4b$%I!(838bdn|?`?axe~v%~l}fpFll-iY1p*nou#(QW2ZQK~AdtaJ%jk?V^B?v5 zPrSTm8i5Q!SVU*s*ZNo>kReF3bjG=tKB{m2?&Z`J1TsWng3h=%gZ4&2AVainb;gZr eba}XceB(b0Oa2bMN&ZIw0000 - + + From 2817163a7c60b1fe1533f4a76d39aa7852e27efd Mon Sep 17 00:00:00 2001 From: phlangiee <174984579+phlangiee@users.noreply.github.com> Date: Thu, 26 Feb 2026 16:32:34 -0800 Subject: [PATCH 08/17] deleted temporary files that were used to save code --- .../_components/heroInfo/save.tsx | 291 ------------------ .../_components/heroInfo/wait.tsx | 268 ---------------- 2 files changed, 559 deletions(-) delete mode 100644 app/(pages)/(index-page)/_components/heroInfo/save.tsx delete mode 100644 app/(pages)/(index-page)/_components/heroInfo/wait.tsx diff --git a/app/(pages)/(index-page)/_components/heroInfo/save.tsx b/app/(pages)/(index-page)/_components/heroInfo/save.tsx deleted file mode 100644 index d5deeed..0000000 --- a/app/(pages)/(index-page)/_components/heroInfo/save.tsx +++ /dev/null @@ -1,291 +0,0 @@ -'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 { useEffect, useRef, useState } from 'react'; - -/** - * NOTES: - * - Need full image of green flower? - * - velofactor ~ how fast it moves - * - damping ~ how much it slows down over time - * - note if dont want ugly spring - * - if want inc velo, decrease damping - * - if want dec velo, increase damping - * - i like among us - * - if want to add more movement, decrease pixels dividing by in transform - */ - -export default function HeroInfo() { - const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); - const containerRef = useRef(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 = () => { - const xVelo = - (targetPositionRef.current.x - currentPositionRef.current.x) * - veloFactor; - const yVelo = - (targetPositionRef.current.y - currentPositionRef.current.y) * - veloFactor; - - velocityRef.current.x += xVelo; //* idk; - velocityRef.current.y += yVelo; //* idk; - - 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) => { - if (container && window.innerWidth > 425) { - const rect = container.getBoundingClientRect(); - const x = event.clientX - rect.left; - const y = event.clientY - rect.top; - targetPositionRef.current = { x, y }; - //setMousePosition({ x, y }); - } - }; - - animationFrameRef.current = requestAnimationFrame(animate); - container?.addEventListener('mousemove', handleMouseMove); - - return () => { - container?.removeEventListener('mousemove', handleMouseMove); - if (animationFrameRef.current) { - cancelAnimationFrame(animationFrameRef.current); - } - }; - }, []); - - return ( - <> -
-
- Animals on couch -
-
- watertower - Animals on couch - Animals on couch -
- {/* animals on couch */} -
- Animals on couch -
- - {/* right side */} -
- {/* here text + buttons */} -
-
-
-

- - - - for -

-

- social good -

-

- May 9-10, 2026 @ UCenter -

-
- -
- - Register Now - - -
- -
-
- -
- - Check out the{' '} - -
- - Apply to be a{' '} - Judge,{' '} - Mentor, or{' '} - Volunteer - -
-
-
-
- - {/* desktop numbers */} -
- 1 - 0 -
-
-
- -
- Animals on couch - Animals on couch -
- - ); -} - -interface FormLinkProps { - href: string; - includeComma: boolean; - children: React.ReactNode; -} - -function FormLink({ href, includeComma, children }: FormLinkProps) { - return ( - - {children} - - Arrow icon - - {includeComma && ,} - - ); -} diff --git a/app/(pages)/(index-page)/_components/heroInfo/wait.tsx b/app/(pages)/(index-page)/_components/heroInfo/wait.tsx deleted file mode 100644 index 573750a..0000000 --- a/app/(pages)/(index-page)/_components/heroInfo/wait.tsx +++ /dev/null @@ -1,268 +0,0 @@ -'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 { useEffect, useRef, useState } from 'react'; - -export default function HeroInfo() { - const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); - const containerRef = useRef(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 stiffness = 0.09; - const damping = 0.8; - - const animate = () => { - const dx = targetPositionRef.current.x - currentPositionRef.current.x; - const dy = targetPositionRef.current.y - currentPositionRef.current.y; - - velocityRef.current.x = - (velocityRef.current.x + dx * stiffness) * damping; - velocityRef.current.y = - (velocityRef.current.y + dy * stiffness) * 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) => { - if (container && window.innerWidth > 425) { - const rect = container.getBoundingClientRect(); - const x = event.clientX - rect.left; - const y = event.clientY - rect.top; - targetPositionRef.current = { x, y }; - } - }; - - animationFrameRef.current = requestAnimationFrame(animate); - container?.addEventListener('mousemove', handleMouseMove); - - return () => { - container?.removeEventListener('mousemove', handleMouseMove); - if (animationFrameRef.current) { - cancelAnimationFrame(animationFrameRef.current); - } - }; - }, []); - - return ( - <> -
-
- Animals on couch -
-
- watertower - Animals on couch - Animals on couch -
- {/* animals on couch */} -
- Animals on couch -
- - {/* right side */} -
- {/* here text + buttons */} -
-
-
-

- - - - for -

-

- social good -

-

- May 9-10, 2026 @ UCenter -

-
- -
- - Register Now - - -
- -
-
- -
- - Check out the{' '} - -
- - Apply to be a{' '} - Judge,{' '} - Mentor, or{' '} - Volunteer - -
-
-
-
- - {/* desktop numbers */} -
- 1 - 0 -
-
-
- -
- Animals on couch - Animals on couch -
- - ); -} - -interface FormLinkProps { - href: string; - includeComma: boolean; - children: React.ReactNode; -} - -function FormLink({ href, includeComma, children }: FormLinkProps) { - return ( - - {children} - - Arrow icon - - {includeComma && ,} - - ); -} From 16099eebcc9f2a1b128a7318f4ad9761d1a66f32 Mon Sep 17 00:00:00 2001 From: phlangiee <174984579+phlangiee@users.noreply.github.com> Date: Thu, 26 Feb 2026 16:44:01 -0800 Subject: [PATCH 09/17] no more comments :c --- .../(index-page)/_components/Create/create.tsx | 3 +-- app/(pages)/(index-page)/_components/Stats.tsx | 3 +-- .../_components/heroInfo/heroInfo.tsx | 15 --------------- 3 files changed, 2 insertions(+), 19 deletions(-) diff --git a/app/(pages)/(index-page)/_components/Create/create.tsx b/app/(pages)/(index-page)/_components/Create/create.tsx index 2cfb6fb..6602865 100644 --- a/app/(pages)/(index-page)/_components/Create/create.tsx +++ b/app/(pages)/(index-page)/_components/Create/create.tsx @@ -3,7 +3,7 @@ import Image from 'next/image'; import HeartButton from '@app/(pages)/(index-page)/_components/HeartButton/heartButton'; import { useState, useEffect, useRef } from 'react'; -// HERE + export default function Create() { const bigShape = 50; const mediumShape = 35; @@ -53,7 +53,6 @@ export default function Create() { const x = event.clientX - rect.left; const y = event.clientY - rect.top; targetPositionRef.current = { x, y }; - //setMousePosition({ x, y }); } }; diff --git a/app/(pages)/(index-page)/_components/Stats.tsx b/app/(pages)/(index-page)/_components/Stats.tsx index 6d9fcce..407e661 100644 --- a/app/(pages)/(index-page)/_components/Stats.tsx +++ b/app/(pages)/(index-page)/_components/Stats.tsx @@ -18,7 +18,7 @@ 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'; -// HErE + export default function Stats() { const [isHovered, setIsHovered] = useState(false); @@ -71,7 +71,6 @@ export default function Stats() { const x = event.clientX - rect.left; const y = event.clientY - rect.top; targetPositionRef.current = { x, y }; - //setMousePosition({ x, y }); } }; diff --git a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx index f6d9e74..06600e2 100644 --- a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx +++ b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx @@ -7,20 +7,6 @@ import HeartButton from '../HeartButton/heartButton'; import WordCycle from '../wordCycle/wordCycle'; import { useEffect, useRef, useState } from 'react'; -/** - * NOTES: - * - Need full image of green flower? - * - velofactor ~ how fast it moves - * - damping ~ how much it slows down over time - * - note if dont want ugly spring - * - if want inc velo, decrease damping - * - if want dec velo, increase damping - * - i like among us - * - if want to add more movement, decrease pixels dividing by in transform - */ - -//HERE - export default function HeroInfo() { const bigShape = 50; const mediumShape = 35; @@ -71,7 +57,6 @@ export default function HeroInfo() { const x = event.clientX - rect.left; const y = event.clientY - rect.top; targetPositionRef.current = { x, y }; - //setMousePosition({ x, y }); } }; From 263b31025f884abaf3c24edfc8cb0b4b96025188 Mon Sep 17 00:00:00 2001 From: michelleyeoh Date: Thu, 26 Feb 2026 18:00:46 -0800 Subject: [PATCH 10/17] extracted parallax to hook --- .../_components/Create/create.tsx | 61 +----------------- .../(index-page)/_components/Stats.tsx | 62 +----------------- .../(index-page)/_components/TenYears.tsx | 63 ++----------------- .../_components/heroInfo/heroInfo.tsx | 62 +----------------- app/(pages)/_hooks/empty.ts | 1 - app/(pages)/_hooks/useParallax.ts | 62 ++++++++++++++++++ 6 files changed, 74 insertions(+), 237 deletions(-) delete mode 100644 app/(pages)/_hooks/empty.ts create mode 100644 app/(pages)/_hooks/useParallax.ts diff --git a/app/(pages)/(index-page)/_components/Create/create.tsx b/app/(pages)/(index-page)/_components/Create/create.tsx index 6602865..4fa31bc 100644 --- a/app/(pages)/(index-page)/_components/Create/create.tsx +++ b/app/(pages)/(index-page)/_components/Create/create.tsx @@ -2,71 +2,14 @@ import Image from 'next/image'; import HeartButton from '@app/(pages)/(index-page)/_components/HeartButton/heartButton'; -import { useState, useEffect, useRef } from 'react'; +import { useParallax } from '@app/(pages)/_hooks/useParallax'; export default function Create() { + const { mousePosition, containerRef } = useParallax(); const bigShape = 50; const mediumShape = 35; const extraTiniTiny = 20; - const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); - const containerRef = useRef(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 = () => { - 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) => { - if (container && window.innerWidth > 425) { - const rect = container.getBoundingClientRect(); - const x = event.clientX - rect.left; - const y = event.clientY - rect.top; - targetPositionRef.current = { x, y }; - } - }; - - animationFrameRef.current = requestAnimationFrame(animate); - container?.addEventListener('mousemove', handleMouseMove); - - return () => { - container?.removeEventListener('mousemove', handleMouseMove); - if (animationFrameRef.current) { - cancelAnimationFrame(animationFrameRef.current); - } - }; - }, []); - return (
(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 = () => { - 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) => { - if (container && window.innerWidth > 425) { - const rect = container.getBoundingClientRect(); - const x = event.clientX - rect.left; - const y = event.clientY - rect.top; - targetPositionRef.current = { x, y }; - } - }; - - animationFrameRef.current = requestAnimationFrame(animate); - container?.addEventListener('mousemove', handleMouseMove); - - return () => { - container?.removeEventListener('mousemove', handleMouseMove); - if (animationFrameRef.current) { - cancelAnimationFrame(animationFrameRef.current); - } - }; - }, []); - return (
(null); const waveWrapperRef = useRef(null); const [scale, setScale] = useState(1); - const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); - 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); + const { mousePosition, containerRef } = useParallax(); + + const littleShape = 25; // track scroll progress const { scrollYProgress } = useScroll({ @@ -79,57 +75,6 @@ export default function TenYears() { return () => resizeObserver.disconnect(); }, []); - useEffect(() => { - const container = containerRef.current; - - const veloFactor = 0.01; - const damping = 0.83; - - const animate = () => { - 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) => { - if (container && window.innerWidth > 425) { - const rect = container.getBoundingClientRect(); - const x = event.clientX - rect.left; - const y = event.clientY - rect.top; - targetPositionRef.current = { x, y }; - } - }; - - animationFrameRef.current = requestAnimationFrame(animate); - container?.addEventListener('mousemove', handleMouseMove); - - return () => { - container?.removeEventListener('mousemove', handleMouseMove); - if (animationFrameRef.current) { - cancelAnimationFrame(animationFrameRef.current); - } - }; - }, []); - const mascots = [ { src: '/home/tenyears/flying-rabbit.svg', diff --git a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx index 06600e2..4b24bf1 100644 --- a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx +++ b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx @@ -5,72 +5,16 @@ import Image from 'next/image'; import Link from 'next/link'; import HeartButton from '../HeartButton/heartButton'; import WordCycle from '../wordCycle/wordCycle'; -import { useEffect, useRef, useState } from 'react'; +import { useParallax } from '@app/(pages)/_hooks/useParallax'; export default function HeroInfo() { + const { mousePosition, containerRef } = useParallax(); + const bigShape = 50; const mediumShape = 35; const littleShape = 25; const extraTiniTiny = 20; - const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); - const containerRef = useRef(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 = () => { - 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) => { - if (container && window.innerWidth > 425) { - const rect = container.getBoundingClientRect(); - const x = event.clientX - rect.left; - const y = event.clientY - rect.top; - targetPositionRef.current = { x, y }; - } - }; - - animationFrameRef.current = requestAnimationFrame(animate); - container?.addEventListener('mousemove', handleMouseMove); - - return () => { - container?.removeEventListener('mousemove', handleMouseMove); - if (animationFrameRef.current) { - cancelAnimationFrame(animationFrameRef.current); - } - }; - }, []); - return ( <>
(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 = () => { + 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) => { + if (container && window.innerWidth > 425) { + const rect = container.getBoundingClientRect(); + const x = event.clientX - rect.left; + const y = event.clientY - rect.top; + 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 }; +} From f9f9bc1f5f623507db0b7b1a0630c9ed37011a76 Mon Sep 17 00:00:00 2001 From: michelleyeoh Date: Thu, 26 Feb 2026 18:03:46 -0800 Subject: [PATCH 11/17] centered parallax aniamtion --- app/(pages)/_hooks/useParallax.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/(pages)/_hooks/useParallax.ts b/app/(pages)/_hooks/useParallax.ts index 7dbfd02..d4b7cfd 100644 --- a/app/(pages)/_hooks/useParallax.ts +++ b/app/(pages)/_hooks/useParallax.ts @@ -41,8 +41,8 @@ export function useParallax() { const handleMouseMove = (event: MouseEvent) => { if (container && window.innerWidth > 425) { const rect = container.getBoundingClientRect(); - const x = event.clientX - rect.left; - const y = event.clientY - rect.top; + 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 }; } }; From cf99a84abbf06f420a07ec8851327df500191959 Mon Sep 17 00:00:00 2001 From: michelleyeoh Date: Thu, 26 Feb 2026 18:08:22 -0800 Subject: [PATCH 12/17] fixed id removal --- app/(pages)/(index-page)/_components/Create/create.tsx | 2 +- app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/app/(pages)/(index-page)/_components/Create/create.tsx b/app/(pages)/(index-page)/_components/Create/create.tsx index 4fa31bc..3445484 100644 --- a/app/(pages)/(index-page)/_components/Create/create.tsx +++ b/app/(pages)/(index-page)/_components/Create/create.tsx @@ -13,7 +13,7 @@ export default function Create() { return (
{/* Background decorative images - hidden on mobile */}
From 818facb792b9f75aa4ef9e0a3c76c839f2077da9 Mon Sep 17 00:00:00 2001 From: michelleyeoh Date: Thu, 26 Feb 2026 18:51:54 -0800 Subject: [PATCH 13/17] spinnign shapes --- .../_components/Create/create.tsx | 34 ++++++------ .../(index-page)/_components/Stats.tsx | 52 +++++++++++-------- .../(index-page)/_components/TenYears.tsx | 6 +-- .../_components/heroInfo/heroInfo.tsx | 48 +++++++++-------- app/(pages)/_hooks/useParallax.ts | 7 +++ 5 files changed, 84 insertions(+), 63 deletions(-) diff --git a/app/(pages)/(index-page)/_components/Create/create.tsx b/app/(pages)/(index-page)/_components/Create/create.tsx index 3445484..baeef01 100644 --- a/app/(pages)/(index-page)/_components/Create/create.tsx +++ b/app/(pages)/(index-page)/_components/Create/create.tsx @@ -2,13 +2,11 @@ import Image from 'next/image'; import HeartButton from '@app/(pages)/(index-page)/_components/HeartButton/heartButton'; -import { useParallax } from '@app/(pages)/_hooks/useParallax'; +import { useParallax, PARALLAX_SPEEDS } from '@app/(pages)/_hooks/useParallax'; export default function Create() { const { mousePosition, containerRef } = useParallax(); - const bigShape = 50; - const mediumShape = 35; - const extraTiniTiny = 20; + const { bigShape, mediumShape, extraTiniTiny } = PARALLAX_SPEEDS; return (
{/* Frog + Yellow bar wrapper - side by side on mobile */} @@ -108,7 +106,7 @@ export default function Create() { alt="Green Flower" width={131} height={131} - className="hidden xl:block ml-[2%] mt-auto mb-[4%] h-[131px] animate-spin-10" + className="hidden xl:block ml-[2%] mt-auto mb-[4%] h-[131px]" style={{ transform: `translateX(${ mousePosition.x / mediumShape @@ -170,7 +168,7 @@ export default function Create() { alt="Pink Flower" width={111} height={111} - className="hidden md:block absolute w-auto h-[78px] -bottom-[5%] ml-[3%] animate-spin-10" + className="hidden md:block absolute w-auto h-[78px] -bottom-[5%] ml-[3%]" style={{ transform: `translateX(${ mousePosition.x / extraTiniTiny @@ -188,19 +186,25 @@ 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 bb2d59f..2017d9a 100644 --- a/app/(pages)/(index-page)/_components/Stats.tsx +++ b/app/(pages)/(index-page)/_components/Stats.tsx @@ -18,16 +18,13 @@ 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 } from '@app/(pages)/_hooks/useParallax'; +import { useParallax, PARALLAX_SPEEDS } from '@app/(pages)/_hooks/useParallax'; export default function Stats() { const [isHovered, setIsHovered] = useState(false); const { mousePosition, containerRef } = useParallax(); - const bigShape = 50; - const mediumShape = 35; - const littleShape = 25; - const extraTiniTiny = 20; + const { bigShape, mediumShape, littleShape, extraTiniTiny } = PARALLAX_SPEEDS; return (
{/* Top area - Cross (lime green) */} -
+
Cross
@@ -144,30 +144,36 @@ export default function Stats() {
{/* Cross Cyan */} -
+
Cross
{/* Squiggly Circle Yellow */} -
+
Circle
diff --git a/app/(pages)/(index-page)/_components/TenYears.tsx b/app/(pages)/(index-page)/_components/TenYears.tsx index ffefccd..91f4c08 100644 --- a/app/(pages)/(index-page)/_components/TenYears.tsx +++ b/app/(pages)/(index-page)/_components/TenYears.tsx @@ -4,7 +4,7 @@ import Image from 'next/image'; import { motion, useScroll, useTransform } from 'framer-motion'; import { useRef } from 'react'; import { useState, useEffect } from 'react'; -import { useParallax } from '@app/(pages)/_hooks/useParallax'; +import { useParallax, PARALLAX_SPEEDS } from '@app/(pages)/_hooks/useParallax'; // Helper to scale all numbers in the path function scalePath(path: string, scale: number) { @@ -51,9 +51,9 @@ function FlyingMascot({ export default function TenYears() { const waveWrapperRef = useRef(null); const [scale, setScale] = useState(1); - const { mousePosition, containerRef } = useParallax(); - const littleShape = 25; + const { mousePosition, containerRef } = useParallax(); + const { littleShape } = PARALLAX_SPEEDS; // track scroll progress const { scrollYProgress } = useScroll({ diff --git a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx index e118186..30f3cc0 100644 --- a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx +++ b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx @@ -5,15 +5,11 @@ import Image from 'next/image'; import Link from 'next/link'; import HeartButton from '../HeartButton/heartButton'; import WordCycle from '../wordCycle/wordCycle'; -import { useParallax } from '@app/(pages)/_hooks/useParallax'; +import { useParallax, PARALLAX_SPEEDS } from '@app/(pages)/_hooks/useParallax'; export default function HeroInfo() { const { mousePosition, containerRef } = useParallax(); - - const bigShape = 50; - const mediumShape = 35; - const littleShape = 25; - const extraTiniTiny = 20; + const { bigShape, mediumShape, littleShape, extraTiniTiny } = PARALLAX_SPEEDS; return ( <> @@ -22,18 +18,21 @@ export default function HeroInfo() { 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%]" > -
+
Animals on couch
@@ -49,24 +48,29 @@ export default function HeroInfo() { }px) translateY(${mousePosition.y / bigShape}px)`, }} /> - Animals on couch + > + yellow donut +
Animals on couch(null); From 722eeb7909e99cc22acd9522478388a4ad09b7ca Mon Sep 17 00:00:00 2001 From: michelleyeoh Date: Thu, 26 Feb 2026 19:02:07 -0800 Subject: [PATCH 14/17] updated accesiblity --- app/(pages)/_hooks/useParallax.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/app/(pages)/_hooks/useParallax.ts b/app/(pages)/_hooks/useParallax.ts index b5afcc0..6189f7c 100644 --- a/app/(pages)/_hooks/useParallax.ts +++ b/app/(pages)/_hooks/useParallax.ts @@ -46,7 +46,11 @@ export function useParallax() { }; const handleMouseMove = (event: MouseEvent) => { - if (container && window.innerWidth > 425) { + if ( + container && + window.innerWidth > 425 && + !window.matchMedia('(prefers-reduced-motion: reduce)').matches //check if user has reduced motion preference + ) { 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 @@ -55,10 +59,10 @@ export function useParallax() { }; animationFrameRef.current = requestAnimationFrame(animate); - container?.addEventListener('mousemove', handleMouseMove); + window.addEventListener('mousemove', handleMouseMove); return () => { - container?.removeEventListener('mousemove', handleMouseMove); + window.removeEventListener('mousemove', handleMouseMove); if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); } From 5576d2cbbf0115539884efd4b2b56e264618f979 Mon Sep 17 00:00:00 2001 From: michelleyeoh Date: Thu, 26 Feb 2026 19:23:47 -0800 Subject: [PATCH 15/17] created reuseable style --- .../_components/Create/create.tsx | 26 +++-------- .../(index-page)/_components/Stats.tsx | 44 ++++--------------- .../(index-page)/_components/TenYears.tsx | 14 ++---- .../_components/heroInfo/heroInfo.tsx | 30 +++---------- app/(pages)/_hooks/useParallax.ts | 25 ++++++++--- 5 files changed, 41 insertions(+), 98 deletions(-) diff --git a/app/(pages)/(index-page)/_components/Create/create.tsx b/app/(pages)/(index-page)/_components/Create/create.tsx index baeef01..d7068f6 100644 --- a/app/(pages)/(index-page)/_components/Create/create.tsx +++ b/app/(pages)/(index-page)/_components/Create/create.tsx @@ -2,7 +2,7 @@ import Image from 'next/image'; import HeartButton from '@app/(pages)/(index-page)/_components/HeartButton/heartButton'; -import { useParallax, PARALLAX_SPEEDS } from '@app/(pages)/_hooks/useParallax'; +import { useParallax, PARALLAX_SPEEDS, getParallaxStyle } from '@app/(pages)/_hooks/useParallax'; export default function Create() { const { mousePosition, containerRef } = useParallax(); @@ -37,11 +37,7 @@ export default function Create() { alt="Big Yellow Star" width={111} height={111} - style={{ - transform: `translateX(${ - mousePosition.x / mediumShape - }px) translateY(${mousePosition.y / mediumShape}px)`, - }} + style={getParallaxStyle(mousePosition, mediumShape)} className="hidden md:block absolute ml-[20%] -mt-[8%] w-auto h-[130px]" /> @@ -107,11 +103,7 @@ export default function Create() { width={131} height={131} className="hidden xl:block ml-[2%] mt-auto mb-[4%] h-[131px]" - style={{ - transform: `translateX(${ - mousePosition.x / mediumShape - }px) translateY(${mousePosition.y / mediumShape}px)`, - }} + style={getParallaxStyle(mousePosition, mediumShape)} />
@@ -169,11 +161,7 @@ export default function Create() { width={111} height={111} className="hidden md:block absolute w-auto h-[78px] -bottom-[5%] ml-[3%]" - style={{ - transform: `translateX(${ - mousePosition.x / extraTiniTiny - }px) translateY(${mousePosition.y / extraTiniTiny}px)`, - }} + style={getParallaxStyle(mousePosition, extraTiniTiny)} />
@@ -188,11 +176,7 @@ export default function Create() { />
Circle of Circles
@@ -74,11 +66,7 @@ export default function Stats() { src={flower_thing} alt="Flower" className="w-full h-auto" - style={{ - transform: `translateX(${ - mousePosition.x / littleShape - }px) translateY(${mousePosition.y / littleShape}px)`, - }} + style={getParallaxStyle(mousePosition, littleShape)} />
@@ -135,22 +123,14 @@ export default function Stats() { src={circle_of_circles_pink} alt="Circle of Circles" className="w-full h-auto" - style={{ - transform: `translateX(${ - mousePosition.x / bigShape - }px) translateY(${mousePosition.y / bigShape}px)`, - }} + style={getParallaxStyle(mousePosition, bigShape)} />
{/* Cross Cyan */}
Circle
diff --git a/app/(pages)/(index-page)/_components/TenYears.tsx b/app/(pages)/(index-page)/_components/TenYears.tsx index 91f4c08..73dac3d 100644 --- a/app/(pages)/(index-page)/_components/TenYears.tsx +++ b/app/(pages)/(index-page)/_components/TenYears.tsx @@ -4,7 +4,7 @@ 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 } from '@app/(pages)/_hooks/useParallax'; +import { useParallax, PARALLAX_SPEEDS, getParallaxStyle } from '@app/(pages)/_hooks/useParallax'; // Helper to scale all numbers in the path function scalePath(path: string, scale: number) { @@ -118,11 +118,7 @@ export default function TenYears() { width={280} height={429} className="h-[240px] sm:h-[500px] xl:h-[895px] w-auto" - style={{ - transform: `translateX(${ - mousePosition.x / littleShape - }px) translateY(${mousePosition.y / littleShape}px)`, - }} + style={getParallaxStyle(mousePosition, littleShape)} /> {mascots.map((mascot, index) => ( @@ -149,11 +145,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={{ - transform: `translateX(${ - mousePosition.x / littleShape - }px) translateY(${mousePosition.y / littleShape}px)`, - }} + 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 30f3cc0..dcc0349 100644 --- a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx +++ b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx @@ -5,7 +5,7 @@ import Image from 'next/image'; import Link from 'next/link'; import HeartButton from '../HeartButton/heartButton'; import WordCycle from '../wordCycle/wordCycle'; -import { useParallax, PARALLAX_SPEEDS } from '@app/(pages)/_hooks/useParallax'; +import { useParallax, PARALLAX_SPEEDS, getParallaxStyle } from '@app/(pages)/_hooks/useParallax'; export default function HeroInfo() { const { mousePosition, containerRef } = useParallax(); @@ -20,11 +20,7 @@ export default function HeroInfo() { >
{/* animals on couch */} @@ -114,7 +98,7 @@ export default function HeroInfo() {
- {/* Register Now - */} +
(null); @@ -21,6 +32,9 @@ export function useParallax() { 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; @@ -46,11 +60,8 @@ export function useParallax() { }; const handleMouseMove = (event: MouseEvent) => { - if ( - container && - window.innerWidth > 425 && - !window.matchMedia('(prefers-reduced-motion: reduce)').matches //check if user has reduced motion preference - ) { + // 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 @@ -59,10 +70,10 @@ export function useParallax() { }; animationFrameRef.current = requestAnimationFrame(animate); - window.addEventListener('mousemove', handleMouseMove); + container?.addEventListener('mousemove', handleMouseMove); return () => { - window.removeEventListener('mousemove', handleMouseMove); + container?.removeEventListener('mousemove', handleMouseMove); if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); } From 28c24c40bffddfa74b481a47a2a1a6b20e78baa3 Mon Sep 17 00:00:00 2001 From: michelleyeoh Date: Thu, 26 Feb 2026 19:27:43 -0800 Subject: [PATCH 16/17] LINT --- app/(pages)/(index-page)/_components/Create/create.tsx | 6 +++++- app/(pages)/(index-page)/_components/Stats.tsx | 6 +++++- app/(pages)/(index-page)/_components/TenYears.tsx | 6 +++++- app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx | 6 +++++- 4 files changed, 20 insertions(+), 4 deletions(-) diff --git a/app/(pages)/(index-page)/_components/Create/create.tsx b/app/(pages)/(index-page)/_components/Create/create.tsx index d7068f6..958a5ad 100644 --- a/app/(pages)/(index-page)/_components/Create/create.tsx +++ b/app/(pages)/(index-page)/_components/Create/create.tsx @@ -2,7 +2,11 @@ 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'; +import { + useParallax, + PARALLAX_SPEEDS, + getParallaxStyle, +} from '@app/(pages)/_hooks/useParallax'; export default function Create() { const { mousePosition, containerRef } = useParallax(); diff --git a/app/(pages)/(index-page)/_components/Stats.tsx b/app/(pages)/(index-page)/_components/Stats.tsx index d0dac60..9e0458b 100644 --- a/app/(pages)/(index-page)/_components/Stats.tsx +++ b/app/(pages)/(index-page)/_components/Stats.tsx @@ -18,7 +18,11 @@ 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'; +import { + useParallax, + PARALLAX_SPEEDS, + getParallaxStyle, +} from '@app/(pages)/_hooks/useParallax'; export default function Stats() { const [isHovered, setIsHovered] = useState(false); diff --git a/app/(pages)/(index-page)/_components/TenYears.tsx b/app/(pages)/(index-page)/_components/TenYears.tsx index 73dac3d..f5e68bf 100644 --- a/app/(pages)/(index-page)/_components/TenYears.tsx +++ b/app/(pages)/(index-page)/_components/TenYears.tsx @@ -4,7 +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'; +import { + useParallax, + PARALLAX_SPEEDS, + getParallaxStyle, +} from '@app/(pages)/_hooks/useParallax'; // Helper to scale all numbers in the path function scalePath(path: string, scale: number) { diff --git a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx index dcc0349..8caedc7 100644 --- a/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx +++ b/app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx @@ -5,7 +5,11 @@ 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'; +import { + useParallax, + PARALLAX_SPEEDS, + getParallaxStyle, +} from '@app/(pages)/_hooks/useParallax'; export default function HeroInfo() { const { mousePosition, containerRef } = useParallax(); From 0c0a95ce6928446a030540bb451a256c551895a2 Mon Sep 17 00:00:00 2001 From: michelleyeoh Date: Thu, 26 Feb 2026 19:38:59 -0800 Subject: [PATCH 17/17] readded style --- .../_components/Create/create.tsx | 7 ++++++- .../(index-page)/_components/Stats.tsx | 21 ++++++++++++++++--- .../_components/heroInfo/heroInfo.tsx | 14 +++++++++++-- app/(pages)/_globals/styles/globals.scss | 9 ++++++++ 4 files changed, 45 insertions(+), 6 deletions(-) diff --git a/app/(pages)/(index-page)/_components/Create/create.tsx b/app/(pages)/(index-page)/_components/Create/create.tsx index 958a5ad..20322b4 100644 --- a/app/(pages)/(index-page)/_components/Create/create.tsx +++ b/app/(pages)/(index-page)/_components/Create/create.tsx @@ -180,7 +180,12 @@ export default function Create() { />