feat(ui): add parallax background effect for card preview (JhaSourav07#1232)

## Description

Fixes JhaSourav07#1190

Added a high-fidelity parallax background effect to the Customization
Studio's `InteractiveViewer` component.

- **Hover Parallax**: As the user moves their cursor over the preview,
20 floating contribution "squares" shift and sway at varying depth
scales (parallax effect).
- **Ambient Lighting**: Added a subtle, cursor-following glow behind the
card to make the background feel dynamically lit.
- **Pan Integration**: The background layers now also respond when the
user pans the card (via dragging or `W/A/S/D`), moving at different
speeds to create a 3D space effect.
- **Hydration Fix**: Also snuck in a fix for a server/client hydration
mismatch error that was occurring in the `Navbar` component on initial
page load.
- **Testing**: Added 10 new unit tests covering the new pointer tracking
and background layer behaviours.

## Pillar

- [ ] 🎨 Pillar 1 — New Theme Design
- [ ] 📐 Pillar 2 — Geometric SVG Improvement
- [ ] 🕐 Pillar 3 — Timezone Logic Optimization
- [x] 🛠️ Other (Web UI Enhancement, Bug fix, refactoring, docs)

## Visual Preview
*(You can drag and drop a short screen recording or screenshot of the
parallax effect moving here!)*

## Checklist before requesting a review:

- [x] I have read the `CONTRIBUTING.md` file.
- [x] I have tested these changes locally
(`localhost:3000/api/streak?user=YOUR_USERNAME`).
- [x] I have run `npm run format` and `npm run lint` locally and
resolved all errors (CI will fail otherwise).
- [x] My commits follow the Conventional Commits format (e.g.,
`feat(themes): ...`, `fix(calculate): ...`).
- [x] I have updated `README.md` if I added a new theme or URL
parameter.
- [x] I have started the repo.
- [x] I have made sure that I have only one commit to merge in this PR.
- [x] The SVG output matches the CommitPulse "premium quality" aesthetic
standard (no raw elements, smooth animations, correct fonts).
- [ ] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: JhaSourav07

app/components/navbar.tsx

@@ -165,7 +165,15 @@ export default function Navbar() {
                 className="hidden sm:inline-flex h-10 w-10 items-center justify-center rounded-xl border border-gray-200 bg-gray-50 text-gray-700 transition hover:bg-gray-100 dark:border-white/15 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
                 aria-label="Toggle theme"
               >
-                {isDark ? <Sun size={18} /> : <Moon size={18} />}
+                {mounted ? (
+                  isDark ? (
+                    <Sun size={18} />
+                  ) : (
+                    <Moon size={18} />
+                  )
+                ) : (
+                  <span className="w-[18px] h-[18px]" />
+                )}
               </button>
               <button
                 type="button"
@@ -204,8 +212,16 @@ export default function Navbar() {
                     className="inline-flex w-full items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 transition hover:border-gray-300 hover:bg-gray-100 dark:border-white/15 dark:bg-white/5 dark:text-white/90 dark:hover:border-white/45 dark:hover:bg-white/10"
                     aria-label="Toggle theme"
                   >
-                    {isDark ? <Sun size={18} /> : <Moon size={18} />}
-                    {isDark ? 'Light Mode' : 'Dark Mode'}
+                    {mounted ? (
+                      isDark ? (
+                        <Sun size={18} />
+                      ) : (
+                        <Moon size={18} />
+                      )
+                    ) : (
+                      <span className="w-[18px] h-[18px]" />
+                    )}
+                    {mounted ? (isDark ? 'Light Mode' : 'Dark Mode') : 'Theme'}
                   </button>
                 </li>
               </ul>

components/InteractiveViewer.test.tsx

@@ -1,9 +1,29 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
 import InteractiveViewer from './InteractiveViewer';
 
+// getBoundingClientRect is not implemented in jsdom — mock it so mouse-position
+// tests can assert normalized values without relying on a real layout engine.
+const mockContainerRect: DOMRect = {
+  left: 0,
+  top: 0,
+  right: 600,
+  bottom: 400,
+  width: 600,
+  height: 400,
+  x: 0,
+  y: 0,
+  toJSON: () => ({}),
+};
+
+beforeEach(() => {
+  vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(mockContainerRect);
+});
+
 describe('InteractiveViewer', () => {
+  // ── Existing behaviour ────────────────────────────────────────────────────
+
   it('renders children correctly', () => {
     render(
       <InteractiveViewer>
@@ -24,9 +44,9 @@ describe('InteractiveViewer', () => {
     // Focus and press 'w' to pan up
     fireEvent.keyDown(viewerContainer, { key: 'w' });
 
-    // Check if the transform style was updated on the inner div
-    const innerDiv = viewerContainer.firstChild as HTMLElement;
-    expect(innerDiv.style.transform).toContain('translate(0px, 30px) scale(1)');
+    // The content div is the second child (after the parallax layer)
+    const contentDiv = viewerContainer.children[1] as HTMLElement;
+    expect(contentDiv.style.transform).toContain('translate(0px, 30px) scale(1)');
   });
 
   it('handles keyboard navigation for zooming', () => {
@@ -40,9 +60,8 @@ describe('InteractiveViewer', () => {
     // Focus and press '+' to zoom in
     fireEvent.keyDown(viewerContainer, { key: '+' });
 
-    // Check if the transform style was updated on the inner div
-    const innerDiv = viewerContainer.firstChild as HTMLElement;
-    expect(innerDiv.style.transform).toContain('scale(1.1)');
+    const contentDiv = viewerContainer.children[1] as HTMLElement;
+    expect(contentDiv.style.transform).toContain('scale(1.1)');
   });
 
   it('ignores key presses if an input element is focused', () => {
@@ -55,11 +74,107 @@ describe('InteractiveViewer', () => {
     const input = screen.getByTestId('input');
     input.focus();
 
+    // The viewer container is grandparent: input → content div → viewer
     const viewerContainer = input.parentElement?.parentElement as HTMLElement;
     fireEvent.keyDown(viewerContainer, { key: 'w' });
 
-    const innerDiv = viewerContainer.firstChild as HTMLElement;
-    // Should not have panned
-    expect(innerDiv.style.transform).toContain('translate(0px, 0px) scale(1)');
+    const contentDiv = viewerContainer.children[1] as HTMLElement;
+    // Should not have panned since an input had focus
+    expect(contentDiv.style.transform).toContain('translate(0px, 0px) scale(1)');
+  });
+
+  // ── Parallax background layer ─────────────────────────────────────────────
+
+  it('renders the parallax background layer behind the card content', () => {
+    render(
+      <InteractiveViewer>
+        <div>Content</div>
+      </InteractiveViewer>
+    );
+    // The parallax layer is always present in the DOM (opacity transitions handle visibility)
+    expect(screen.getByTestId('parallax-bg-layer')).toBeDefined();
+  });
+
+  it('renders the cursor glow element inside the parallax layer', () => {
+    render(
+      <InteractiveViewer>
+        <div>Content</div>
+      </InteractiveViewer>
+    );
+    const glow = screen.getByTestId('parallax-cursor-glow');
+    expect(glow).toBeDefined();
+  });
+
+  it('shows the cursor glow at full opacity when the pointer enters the container', () => {
+    const { container } = render(
+      <InteractiveViewer>
+        <div>Content</div>
+      </InteractiveViewer>
+    );
+    const viewerContainer = container.firstChild as HTMLElement;
+    const glow = screen.getByTestId('parallax-cursor-glow');
+
+    // Before hover: glow opacity should be 0 (faded out)
+    expect(glow.style.opacity).toBe('0');
+
+    // Simulate pointer entering the container
+    fireEvent.pointerEnter(viewerContainer);
+
+    // After hover: glow should become visible (opacity 1)
+    expect(glow.style.opacity).toBe('1');
+  });
+
+  it('hides the cursor glow when the pointer leaves the container', () => {
+    const { container } = render(
+      <InteractiveViewer>
+        <div>Content</div>
+      </InteractiveViewer>
+    );
+    const viewerContainer = container.firstChild as HTMLElement;
+    const glow = screen.getByTestId('parallax-cursor-glow');
+
+    fireEvent.pointerEnter(viewerContainer);
+    expect(glow.style.opacity).toBe('1');
+
+    fireEvent.pointerLeave(viewerContainer);
+    // Glow should fade back out on leave
+    expect(glow.style.opacity).toBe('0');
+  });
+
+  it('updates the cursor glow position on pointer move', () => {
+    const { container } = render(
+      <InteractiveViewer>
+        <div>Content</div>
+      </InteractiveViewer>
+    );
+    const viewerContainer = container.firstChild as HTMLElement;
+    const glow = screen.getByTestId('parallax-cursor-glow');
+
+    // Move pointer to top-left quadrant of the mocked 600×400 container
+    fireEvent.pointerMove(viewerContainer, { clientX: 150, clientY: 100 });
+
+    // Normalized: x = 150/600 = 0.25, y = 100/400 = 0.25
+    // Glow `left` should be "25%" and `top` should be "25%"
+    expect(glow.style.left).toBe('25%');
+    expect(glow.style.top).toBe('25%');
+  });
+
+  it('resets glow position to center (50%) when the pointer leaves', () => {
+    const { container } = render(
+      <InteractiveViewer>
+        <div>Content</div>
+      </InteractiveViewer>
+    );
+    const viewerContainer = container.firstChild as HTMLElement;
+    const glow = screen.getByTestId('parallax-cursor-glow');
+
+    // Move pointer to an off-center position
+    fireEvent.pointerMove(viewerContainer, { clientX: 60, clientY: 80 });
+    expect(glow.style.left).not.toBe('50%');
+
+    // Leave the container — position resets to center so it fades from center
+    fireEvent.pointerLeave(viewerContainer);
+    expect(glow.style.left).toBe('50%');
+    expect(glow.style.top).toBe('50%');
   });
 });