Fix the performance issue where infinite animations continue running …

[krishnnag998-del]

DESCRIPTION

• Before:
If you had a beautiful floating animation in the
Hero section, it would calculate new pixel positions 60 times
per second indefinitely, even if the user scrolled all the way
down to the footer.
• After:
We placed an invisible boundary line (a "margin")
around sections with infinite animations. When the user
scrolls past that boundary, the code detects that the section
is out of sight and pauses the animation. When the user
scrolls back up, it instantly resumes. The user's visual
experience is completely unaffected because the animations are
only paused when they literally cannot be seen.

BENIFITS
-- Significantly Improved Battery Life on Mobile Devices
-- Prevents Devices from Overheating
-- Better SEO and Core Web Vitals
CLOSES #30

Summary by CodeRabbit

• Performance
  • Animations now pause when sections scroll out of view, reducing unnecessary processing and improving page performance.
  • Viewport detection added to hero, services, and testimonial sections for optimized animation behavior.

[coderabbitai]

📝 Walkthrough

Walkthrough

Three animation-heavy components (Hero, Services, Testimonials) add useInView detection so their infinite looping animations pause when scrolled out of the viewport. The animate props previously guarded only by reduce are now also disabled by !isInView, and the Testimonials marquee uses animationPlayState: 'paused' for the same effect.

Changes

Viewport-gated looping animations

Layer / File(s)	Summary
Hero animations gated by isInView src/app/components/Hero.tsx	Adds useInView import and an isInView flag derived from containerRef. All animation conditions (gradient mesh pulse, green dot, dashboard gradient overlay, floating card, glow border keyframes, icon blur) are changed from reduce-only guards to reduce || !isInView.
Services aurora/gradient animations gated by isInView src/app/components/Services.tsx	Adds useInView import, computes isInView from the existing section ref, and updates the three aurora blob animate props and the heading gradient animate condition to use reduce || !isInView.
Testimonials marquee paused when off-screen src/app/components/Testimonials.tsx	Removes useReducedMotion import, adds useInView and useRef. In MarqueeRow, wires a ref to the marquee container and sets inline animationPlayState: 'paused' when isInView is false.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• hrx01-dev/Servio#49: Modifies the same floating-card and glow animation code paths in Hero.tsx that this PR now gates behind isInView.
• hrx01-dev/Servio#56: Implements the MarqueeRow marquee behavior in Testimonials.tsx that this PR now pauses via useInView.
• hrx01-dev/Servio#66: Adds the reduced-motion conditional logic in Hero.tsx and Testimonials.tsx that this PR extends with the !isInView guard.

Suggested labels

bug

Suggested reviewers

• hrx01-dev

Poem

🐇 Hop, hop — the blobs would spin all night,
Even when scrolled far out of sight!
Now useInView watches with care,
And pauses the pulse when nothing is there.
The battery breathes, the GPU rests,
A viewport-aware rabbit knows best! 🌿

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: fixing the performance issue of infinite animations running off-screen.
Linked Issues check	✅ Passed	The PR successfully implements both acceptance criteria: uses useInView to pause animations off-screen and gates infinite loops behind prefers-reduced-motion.
Out of Scope Changes check	✅ Passed	All changes in Hero.tsx, Services.tsx, and Testimonials.tsx are directly related to gating animations on viewport visibility, matching the PR objectives.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[hrx01-dev]

nice work @krishnnag998-del