Parallax animation

[michelleyeoh]

No description provided.

[Copilot]

Pull request overview

This PR implements a parallax animation effect across the homepage, adding mouse-tracking parallax movement to decorative images throughout various sections. The implementation creates a custom React hook that tracks mouse position and applies smooth, velocity-based parallax transformations to elements.

Changes:

• Added a new useParallax hook that provides mouse-position-based parallax effects with smooth velocity and damping
• Applied parallax animations to decorative images in HeroInfo, TenYears, Stats, and Create sections
• Updated the Green.svg viewBox dimensions to support the new layout
• Removed an empty placeholder file

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 15 comments.

Show a summary per file

File	Description
app/(pages)/_hooks/useParallax.ts	New custom hook implementing velocity-based parallax mouse tracking
app/(pages)/_hooks/empty.ts	Removed empty placeholder file
public/Images/reghero/Green.svg	Updated SVG viewBox from 159 to 242 height (square aspect ratio)
app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx	Added 'use client' directive and parallax effects to decorative shapes
app/(pages)/(index-page)/_components/TenYears.tsx	Applied parallax to wave and flower images
app/(pages)/(index-page)/_components/Stats.tsx	Applied parallax to various decorative shapes throughout stats section
app/(pages)/(index-page)/_components/Create/create.tsx	Added parallax to spinning flower decorations

Comments suppressed due to low confidence (1)

app/(pages)/(index-page)/_components/TenYears.tsx:62

• The containerRef from useParallax is being used here, but the same ref name was previously used for tracking scroll progress with useScroll. While the old containerRef declaration was removed, the useScroll hook still references containerRef which now comes from useParallax and is attached to a different element. This creates a mismatch - useScroll expects to track the outer container, but containerRef is now the parallax container. You should use separate refs: one for parallax (attached to the outer div) and one for scroll tracking if needed, or ensure they refer to the same element intentionally.

  const { mousePosition, containerRef } = useParallax();

  const littleShape = 25;

  // track scroll progress
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ['start end', 'end start'],
  });

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 6 out of 7 changed files in this pull request and generated 7 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.