next.config.ts (1)

3-5: Optional: Disable the X-Powered-By header.

A small hardening tweak you can adopt now.

Apply this diff:

 const nextConfig: NextConfig = {
-  /* config options here */
+  /* config options here */
+  poweredByHeader: false,
 };

eslint.config.mjs (1)

12-14: Add ignores for build artifacts to speed up linting and reduce noise.

Flat config benefits from an explicit ignores entry.

Apply this diff:

-const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
-];
+const eslintConfig = [
+  // Ignore generated and vendored code
+  { ignores: ["node_modules/**", ".next/**", "dist/**", "build/**", "coverage/**"] },
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];

tsconfig.json (1)

3-16: Optional TS tweaks for modern Next/TS5+ projects.

• Consider "verbatimModuleSyntax": true to align with bundler semantics.
• If you're targeting modern browsers/runtime, consider raising "target" to "ES2020" or "ES2022".

Example diff:

   "compilerOptions": {
     "target": "ES2017",
@@
     "isolatedModules": true,
+    "verbatimModuleSyntax": true,
     "jsx": "preserve",

.gitignore (3)

33-35: Unignore a sample env file to document configuration

Ignoring all .env files also hides .env.example. It’s useful to keep a committed sample for onboarding and CI docs.

Apply this diff:

 # env files (can opt-in for committing if needed)
 .env*
+!.env.example

---

7-11: Yarn v2+/Berry: consider keeping SDKs in VCS

If you use Yarn PnP with editor SDKs, keep .yarn/sdks to ensure consistent editor tooling across the team.

 .yarn/*
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases
 !.yarn/versions
+!.yarn/sdks

---

23-25: Optionally ignore common editor/project files

Helps avoid accidental commits from local IDEs while still allowing curated workspace files if desired.

 # misc
 .DS_Store
 *.pem
+.idea
+.fleet
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+!.vscode/tasks.json
+*.code-workspace

README.md (1)

1-1: Tailor the README to this repo’s specifics

Current content is the create-next-app template. Consider briefly documenting the custom UI overlays (Noise, TargetCursor, ClickSpark), any required Node version, and preferred package manager to align onboarding with your setup.

app/components/ui/noise.tsx (5)

31-33: Use the patternSize prop instead of a hard-coded canvas size

You expose patternSize but never use it. Either wire it in or remove the prop to avoid a misleading API.

-    const canvasSize = 1024;
+    const canvasSize = Math.max(2, Math.floor(patternSize));

---

31-41: Reduce per-frame allocations by reusing ImageData

createImageData per frame allocates ~4 MB for 1024x1024. Reuse a single buffer to lower GC pressure.

     const resize = () => {
       if (!canvas) return;
       canvas.width = canvasSize;
       canvas.height = canvasSize;

       canvas.style.width = "100vw";
       canvas.style.height = "100vh";
     };
 
+    // Pre-allocate once per effect run
+    const imageData = ctx.createImageData(canvasSize, canvasSize);

---

42-55: Change drawGrain to reuse the pre-allocated ImageData buffer

Avoid constructing a fresh ImageData each frame.

-    const drawGrain = () => {
-      const imageData = ctx.createImageData(canvasSize, canvasSize);
-      const data = imageData.data;
+    const drawGrain = () => {
+      const data = imageData.data;
 
       for (let i = 0; i < data.length; i += 4) {
         const value = Math.random() * 255;
         data[i] = value;
         data[i + 1] = value;
         data[i + 2] = value;
         data[i + 3] = patternAlpha;
       }
 
       ctx.putImageData(imageData, 0, 0);
     };

---

13-18: Either implement or drop unused props (patternScaleX, patternScaleY)

These props are accepted and tracked in dependencies but unused, which is confusing. Use them to influence rendering (e.g., scale/transform) or remove them from the API and deps.

Would you like a patch that implements scale via createPattern + transform, or should we simplify the props surface?

Also applies to: 74-79

---

81-88: Hide decorative canvas from assistive tech

Since the canvas is purely visual noise, mark it aria-hidden to avoid noise for screen readers.

     <canvas
       className="pointer-events-none absolute top-0 left-0 h-screen w-screen"
       ref={grainRef}
+      aria-hidden="true"
       style={{
         imageRendering: "pixelated",
       }}
     />

app/page.tsx (1)

1-1: Remove unused import

Noise is not used here (it’s provided by layout). This avoids linter/TS warnings.

-import Noise from "./components/ui/noise";

app/components/ui/click-spark.tsx (3)

34-35: Remove unused startTimeRef

startTimeRef is written once and never read. Drop it to reduce noise.

-  const startTimeRef = useRef<number | null>(null);

---

93-99: Drop unused timestamp bookkeeping

These lines only set startTimeRef (unused).

-      if (!startTimeRef.current) {
-        startTimeRef.current = timestamp;
-      }

---

91-131: Optional: pause the RAF loop when idle to save CPU

Currently the animation loop runs continuously even when there are no sparks. You can cancel the loop when the queue is empty and restart it on click to reduce idle CPU.

Example approach:

• Track animationId in a ref.
• In draw(), if no sparks remain, cancelAnimationFrame and nullify the ref.
• In handleClick(), if no animation is running, start it.

If you want, I can provide a concrete patch.

Also applies to: 144-160

app/components/ui/target-cursor.tsx (5)

118-134: Remove redundant mousemove listener and harden mousedown/up handlers.

• window.addEventListener("mousemove", moveHandler) is added twice (again at Line 92). The second add is redundant.
• Also add null-guards for cursorRef in mouse handlers to avoid accidental NPEs.

-    window.addEventListener("mousemove", moveHandler);
     const mouseDownHandler = (): void => {
-      if (!dotRef.current) return;
+      if (!dotRef.current || !cursorRef.current) return;
       gsap.to(dotRef.current, { scale: 0.7, duration: 0.3 });
       gsap.to(cursorRef.current, { scale: 0.9, duration: 0.2 });
     };
 
     // Animate it back to its original size
     const mouseUpHandler = (): void => {
-      if (!dotRef.current) return;
+      if (!dotRef.current || !cursorRef.current) return;
       gsap.to(dotRef.current, { scale: 1, duration: 0.3 });
       gsap.to(cursorRef.current, { scale: 1, duration: 0.2 });
     };

---

282-287: Normalize rotation defensively to handle negative angles.

Modulo in JS can return negative values. Normalize to [0, 360) to keep resume timing correct.

-            const normalizedRotation = currentRotation % 360;
+            const normalizedRotation =
+              ((currentRotation % 360) + 360) % 360;

---

69-75: Simplify: xPercent/yPercent are no-ops here (container is 0×0).

With a 0×0 container, -50% translates evaluate to 0. Dropping them reduces mental overhead without changing behavior.

     gsap.set(cursor, {
-      xPercent: -50,
-      yPercent: -50,
       x: window.innerWidth / 2,
       y: window.innerHeight / 2,
     });

---

319-319: Passive option is ignored for 'mouseover'.

Passive is meaningful for scroll/touch/wheel. It’s ignored for mouseover. Not harmful, but can be removed for clarity.

---

214-230: Animation efficiency: consider reusing a timeline or using gsap.quickTo.

Creating a new timeline on every updateCorners call (and again on leave) allocates objects at mousemove frequency. Consider:

• Pre-creating a timeline with four tweens and only updating end values, or
• Using gsap.quickTo per-corner for x/y with overwrite: 'auto'.

This will reduce GC pressure during rapid mouse moves.

Happy to sketch this refactor if you want it done in this PR.

Also applies to: 265-277

app/layout.tsx (1)

30-30: Minor UX nit: add antialiasing.

Adding Tailwind’s antialiased generally improves text rendering.

-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>

package.json (1)

21-27: Pin a minimum TypeScript version required by Next 15.

"^5" can resolve to older 5.x releases that might be below Next's minimum. Consider bumping the floor (e.g., ^5.5) to avoid CI surprises.

Potential change:

-    "typescript": "^5",
+    "typescript": "^5.5",

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

app/page.tsx (3)

3-7: Prefer semantic

landmark over a generic div

Improves accessibility and document structure. No behavior change.

Apply this diff:

-    <div className="bg-red-500">
+    <main className="bg-red-500">
       <h1>Hover over the elements below</h1>
       <button className="cursor-target">Click me!</button>
       <div className="cursor-target">Hover target</div>
-    </div>
+    </main>

---

5-5: Set explicit button type

Avoids unintended form submission if this button ends up inside a form later.

Apply this diff:

-      <button className="cursor-target">Click me!</button>
+      <button type="button" className="cursor-target">Click me!</button>

---

6-6: If this “Hover target” is interactive, use a semantic element or add ARIA

If it’s purely decorative for cursor effects, no change needed. If it’s meant to be interactive/keyboard-focusable, prefer a button, or at least add role and tabIndex.

Option A (semantic button):

-      <div className="cursor-target">Hover target</div>
+      <button type="button" className="cursor-target">Hover target</button>

Option B (keep div, add semantics):

-      <div className="cursor-target">Hover target</div>
+      <div className="cursor-target" role="button" tabIndex={0}>Hover target</div>

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

app/components/ui/noise.tsx (1)

57-63: Guard against invalid patternRefreshInterval to prevent rendering issues

If patternRefreshInterval is 0, NaN, or negative, the modulo operation will fail and drawGrain may never execute or execute every frame, causing performance issues.

Normalize the interval to ensure it's always a valid positive integer:

+    const safeInterval = Math.max(1, 
+      Number.isFinite(patternRefreshInterval) ? Math.floor(patternRefreshInterval) : 1
+    );
+
     const loop = () => {
-      if (frame % patternRefreshInterval === 0) {
+      if (frame % safeInterval === 0) {
         drawGrain();
       }
       frame++;
       animationId = window.requestAnimationFrame(loop);
     };

constants/index.tsx (1)

1-6: Decouple UI from constants, add strong typing, and keep this module server-safe

Pre-instantiating JSX and wiring onClick: alert(...) in a constants module tightly couples data to UI and effectively forces client-only usage. Exporting icon components (not elements) and making onClick optional improves flexibility, avoids accidental server-component event props, and makes theming/size controllable at the call site.

Apply this refactor:

 import {
   VscAccount,
   VscArchive,
   VscHome,
   VscSettingsGear,
 } from "react-icons/vsc";
+
+import type { ComponentType } from "react";
+import type { IconBaseProps } from "react-icons";
 
-export const ITEMS = [
-  { icon: <VscHome size={18} />, label: "Home", onClick: () => alert("Home!") },
-  {
-    icon: <VscArchive size={18} />,
-    label: "Archive",
-    onClick: () => alert("Archive!"),
-  },
-  {
-    icon: <VscAccount size={18} />,
-    label: "Profile",
-    onClick: () => alert("Profile!"),
-  },
-  {
-    icon: <VscSettingsGear size={18} />,
-    label: "Settings",
-    onClick: () => alert("Settings!"),
-  },
-];
+export type NavItem = {
+  Icon: ComponentType<IconBaseProps>;
+  label: string;
+  onClick?: () => void;
+};
+
+export const NAV_ITEMS: ReadonlyArray<NavItem> = [
+  { Icon: VscHome, label: "Home" },
+  { Icon: VscArchive, label: "Archive" },
+  { Icon: VscAccount, label: "Profile" },
+  { Icon: VscSettingsGear, label: "Settings" },
+];

Example usage in a client component:

"use client";
import { NAV_ITEMS } from "@/constants";

export function Nav() {
  return (
    <nav>
      {NAV_ITEMS.map(({ Icon, label, onClick }) => (
        <button key={label} onClick={onClick} aria-label={label}>
          <Icon size={18} />
          <span>{label}</span>
        </button>
      ))}
    </nav>
  );
}

If you prefer to keep the current API shape, minimally add an explicit type to clarify intent:

-export const ITEMS = [
+export const ITEMS: ReadonlyArray<{ icon: JSX.Element; label: string; onClick: () => void }> = [

Also consider renaming ITEMS to NAV_ITEMS for clarity.

Also applies to: 8-25

app/components/ui/bg-glitch.tsx (2)

106-120: Potential null return in hexToRgb could cause color interpolation to fail silently

The hexToRgb function returns null for invalid hex strings, but the calling code in handleSmoothTransitions only checks if both startRgb and endRgb are truthy. If letter.color becomes corrupted or invalid, the color interpolation will silently fail without any error handling.

Consider adding validation or fallback behavior:

 const handleSmoothTransitions = () => {
   let needsRedraw = false;
   letters.current.forEach((letter) => {
     if (letter.colorProgress < 1) {
       letter.colorProgress += 0.05;
       if (letter.colorProgress > 1) letter.colorProgress = 1;

       const startRgb = hexToRgb(letter.color);
       const endRgb = hexToRgb(letter.targetColor);
       if (startRgb && endRgb) {
         letter.color = interpolateColor(
           startRgb,
           endRgb,
           letter.colorProgress
         );
         needsRedraw = true;
+      } else {
+        // Fallback: instantly apply target color if hex parsing fails
+        letter.color = letter.targetColor;
+        letter.colorProgress = 1;
+        needsRedraw = true;
       }
     }
   });

---

35-94: Consider extracting the large character array to a constant

The lettersAndSymbols array takes up significant space in the component body. Consider extracting it to a module-level constant to improve readability.

Move the array outside the component:

+const LETTERS_AND_SYMBOLS = [
+  "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O",
+  "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",
+  "!", "@", "#", "$", "&", "*", "(", ")", "-", "_", "+", "=", "/",
+  "[", "]", "{", "}", ";", ":", "<", ">", ",",
+  "0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
+];

 const BgGlitch = ({
   // ... props
 }) => {
   // ... other code

-  const lettersAndSymbols = [
-    "A", "B", "C", // ... etc
-  ];

   const getRandomChar = () => {
-    return lettersAndSymbols[
-      Math.floor(Math.random() * lettersAndSymbols.length)
+    return LETTERS_AND_SYMBOLS[
+      Math.floor(Math.random() * LETTERS_AND_SYMBOLS.length)
     ];
   };

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.