Add reactive monochromatic gradient background with cursor-driven ripples

[Copilot]

Implements a dynamic monochromatic gradient background that responds to cursor position and generates ripple effects on click.

Changes

New AnimatedGradientBackground component:

• Monochromatic HSL gradient (220° hue, 15-50% lightness) with radial center tracking cursor position
• Click-triggered ripple animations (0→500px expansion, 1.5s fade-out)
• requestAnimationFrame-throttled mousemove handler to prevent render thrashing
• Cleanup handlers for timeouts and animation frames to prevent memory leaks

Integration:

• Positioned as fixed z-index: -1 layer in App.tsx
• Removed static gradient from App.css body styles

Example

// Gradient calculation based on cursor position
const calculateGradient = () => {
  const baseHue = 220; // Blue
  const lightness1 = 15 + (mousePosition.x / 100) * 20; // 15-35%
  const lightness2 = 25 + (mousePosition.y / 100) * 25; // 25-50%
  
  return `radial-gradient(
    circle at ${mousePosition.x}% ${mousePosition.y}%,
    hsl(${baseHue}, 70%, ${lightness1}%) 0%,
    hsl(${baseHue}, 60%, ${lightness2}%) 40%,
    hsl(${baseHue}, 50%, ...) 100%
  )`;
};

Screenshots

Login page:

Gradient reacting to cursor position:

Homepage:

Original prompt

Make the background a reactive monochromatic color gradient that ripples as the cursor moves over it.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.