fix: respect prefers-reduced-motion in Framer Motion animations

[iredis]

Overview

This PR audits all Framer Motion usage in the frontend and makes the animation system respect the global prefers-reduced-motion setting. A shared MotionConfig provider with reducedMotion="user" is added to both Next.js page roots so transform/layout animations are automatically suppressed for users who request reduced motion. Remaining opacity/shimmer animations in skeletons and data visualizations are guarded with useReducedMotion() so they render a static, accessible fallback instead of animating.

Related Issue

Closes #FE-026

Changes

🎛️ Central Reduced-Motion Configuration

• [ADD] pages/_app.tsx

  • Added MotionConfig reducedMotion="user" around the app tree.
  • Ensures every Framer Motion child respects prefers-reduced-motion by default.

• [ADD] Perigee/web/pages/_app.tsx

  • Added the same MotionConfig wrapper for the Perigee web dashboard.

♿ Component Animation Audit

• [MODIFY] Perigee/web/components/CallGraphVisualizer.tsx

  • Removed hard-coded path/draw animations and switched to reduced-motion-safe variants.

• [MODIFY] Perigee/web/components/Resultviewer.tsx

  • Guarded result-entry and hover animations with useReducedMotion().

• [MODIFY] Perigee/web/components/GasUsageChart.tsx

  • Disabled chart mount/transition tween when reduced motion is detected.

• [MODIFY] Perigee/web/components/ResourceHeatmap.tsx

  • Replaced animated cell transitions with instant color updates under reduced motion.

• [MODIFY] Perigee/web/components/StrategyPhaseSkeleton.tsx

  • Skeleton shimmer now falls back to a static placeholder when useReducedMotion() is true.

• [MODIFY] Perigee/web/components/ResultViewerSkeleton.tsx

  • Applied the same static fallback for result-viewer skeleton animation.

• [MODIFY] Perigee/web/components/Skeleton.tsx

  • Base Skeleton component now checks useReducedMotion() before applying pulse/shine keyframes.

Verification Results

Reduced-motion audit:
✅ MotionConfig reducedMotion="user" applied in both _app.tsx files
✅ All listed Framer Motion components audited
✅ Transform/layout animations disabled under prefers-reduced-motion
✅ Opacity/shimmer animations use static fallback
✅ No new lint or TypeScript errors

Acceptance Criteria	Status
Audit all Framer Motion usage across components	✅ 9 files audited and updated; no remaining hard-coded animation sources in listed components
Apply useReducedMotion() check consistently	✅ Added to all opacity/shimmer animation call sites; visual components use static fallbacks
Consider MotionConfig provider with reducedMotion="user"	✅ Implemented in both _app.tsx roots for Framer Motion v12+

Closes #233

[drips-wave]

@iredis Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits