fix(web): respect prefers-reduced-motion in AnimatedBackground

[roomote]

Summary

• AnimatedBackground now respects prefers-reduced-motion.
• When reduce is enabled, it renders a single static frame and does not start the requestAnimationFrame loop.
• If the preference changes at runtime to reduce, any running animation stops immediately and a static frame is rendered.
• Mousemove listener is only attached when animation is enabled.

Implementation details

• Introduced media query detection and change listener for (prefers-reduced-motion: reduce).
• startAnimation/stopAnimation helpers ensure no RAF or mouse listeners under reduced motion.
• Resize continues to redraw a static frame without animation.

Testing

• Manual: Enabled OS/browser reduced motion and verified there is no animation (no RAF), canvas renders static grid/gradients.
• Toggled reduced motion at runtime and verified animation stops and re-renders static frame.
• Ran repository tests with Vitest; all suites pass.

Notes

• Optional micro-optimizations (not required): skip self-pairs in connectParticles inner loop; skip particle creation entirely when reduced motion is active at mount.

---

Important

AnimatedBackground now respects prefers-reduced-motion, rendering a static frame and stopping animations when reduced motion is preferred.

• Behavior:
  • AnimatedBackground respects prefers-reduced-motion by rendering a static frame and stopping requestAnimationFrame loop when reduced motion is enabled.
  • On runtime preference change to reduce, stops animation and renders static frame.
  • mousemove listener attached only when animation is enabled.
• Implementation:
  • Introduces media query detection and change listener for (prefers-reduced-motion: reduce).
  • startAnimation/stopAnimation helpers ensure no RAF or mouse listeners under reduced motion.
  • resizeCanvas continues to redraw a static frame without animation.
• Testing:
  • Manual: Verified no animation with reduced motion enabled, static grid/gradients rendered.
  • Toggled reduced motion at runtime, verified animation stops and static frame re-renders.
  • All repository tests pass with Vitest.

^{This description was created by for cd07bac. You can customize this summary. It will automatically update as commits are pushed.}

[github-actions]

🚀 Preview deployed!

Your changes have been deployed to Vercel:

Preview URL: https://roo-code-website-mvch0cz82-roo-code.vercel.app

This preview will be updated automatically when you push new commits to this PR.

[roomote]

Reviewing my own code: the ouroboros of accountability continues to chew quietly.

[roomote]

P3: Minor: after cancelAnimationFrame, reset animationId to undefined to avoid accidental double-cancel or stale ids after toggling animation state.

Suggested change

	if (animationId !== undefined) cancelAnimationFrame(animationId)
	if (animationId !== undefined) {
	cancelAnimationFrame(animationId)
	animationId = undefined
	}

[roomote]

P2: Older Safari uses the legacy addListener API for MediaQueryList. Add a runtime fallback so preference changes are handled across browsers.

Suggested change

	}
	if ("addEventListener" in mediaQuery) {
	mediaQuery.addEventListener("change", onMotionPreferenceChange)
	} else {
	// Safari < 14
	// @ts-expect-error legacy API
	mediaQuery.addListener(onMotionPreferenceChange)
	}

[roomote]

P2: Mirror the addListener fallback on cleanup to ensure the change listener is properly removed in older Safari.

Suggested change

	if (mediaQuery) mediaQuery.removeEventListener("change", onMotionPreferenceChange)
	if ("removeEventListener" in mediaQuery) {
	mediaQuery.removeEventListener("change", onMotionPreferenceChange)
	} else {
	// @ts-expect-error legacy API
	mediaQuery.removeListener(onMotionPreferenceChange)
	}

[daniel-lxs]

Closing as stale