chore: update dependencies

- Replace `next lint` with `eslint .` (next lint removed in v16)
- Migrate to ESLint flat config format
- Fix React 19 purity errors in FeatureImage and TopFade components
- Update components for Next.js 16 compatibility

.eslintignore

@@ -1 +0,0 @@
-out

components/FeatureImage.tsx

@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import { useId } from 'react';
 
 export default function FeatureImage({
   src,
@@ -11,13 +12,16 @@ export default function FeatureImage({
   height: number | `${number}`;
   alt: string;
 }) {
+  const id = useId();
+  const delay = (id.charCodeAt(1) % 5) + 0.5;
+
   return (
     <div className="relative rounded-[18px] p-px shadow-2xl">
       <div
         className="fade-in-out absolute top-0 right-0 bottom-0 left-0 z-0 rounded-[17px] bg-linear-to-tr from-[#4d094e] to-pink-500/70 p-[2px]"
         style={{
           WebkitMask: 'linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0))',
-          animationDelay: `${Math.floor(Math.random() * 5) + 1 * 0.5}s`,
+          animationDelay: `${delay}s`,
         }}
       ></div>
 

components/TopFade.tsx

@@ -1,42 +1,23 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useSyncExternalStore } from 'react';
 
-const calculatedBrightnessValue = () => {
-  if (typeof window === 'undefined') return null;
+const calculateBrightness = () => {
   if (window.scrollY > 200) return 0.5;
   const amountToDecrease = (window.scrollY / 200) * 0.5;
   return 1 - amountToDecrease;
 };
 
+const subscribe = (callback: () => void) => {
+  document.addEventListener('scroll', callback, true);
+  return () => document.removeEventListener('scroll', callback, true);
+};
+
+const getSnapshot = () => calculateBrightness();
+const getServerSnapshot = () => 1;
+
 export default function TopFade() {
-  const [brightness, setBrightness] = useState<number | null>(null);
+  const brightness = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 
-  useEffect(() => {
-    // Always set correct value when first render on client side
-    setBrightness(calculatedBrightnessValue());
-
-    const handleScroll = (event: Event) => {
-      if (window.scrollY > 200 && brightness === 0.5) return;
-      setBrightness(calculatedBrightnessValue());
-    };
-
-    document.addEventListener('scroll', handleScroll, true);
-    return () => {
-      document.removeEventListener('scroll', handleScroll, true);
-    };
-  }, [brightness]);
-
-  return (
-    <div
-      className="top-fade pointer-events-none"
-      style={
-        brightness
-          ? {
-              filter: `brightness(${brightness})`,
-            }
-          : {}
-      }
-    ></div>
-  );
+  return <div className="top-fade pointer-events-none" style={{ filter: `brightness(${brightness})` }}></div>;
 }

eslint.config.mjs

@@ -0,0 +1,5 @@
+import nextConfig from 'eslint-config-next/core-web-vitals';
+
+const eslintConfig = [...nextConfig, { ignores: ['out'] }];
+
+export default eslintConfig;

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package.json

@@ -6,30 +6,30 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint .",
     "prod": "NODE_ENV=production next build",
     "prettify": "prettier --write ."
   },
   "dependencies": {
     "lodash.shuffle": "4.2.0",
-    "next": "15.2.3",
-    "react": "19.0.0",
+    "next": "16.0.6",
+    "react": "19.2.0",
     "react-confetti": "6.4.0",
-    "react-dom": "19.0.0"
+    "react-dom": "19.2.0"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "4.0.15",
+    "@tailwindcss/postcss": "4.1.17",
     "@types/lodash.shuffle": "4.2.9",
-    "@types/node": "22.13.12",
-    "@types/react": "19.0.12",
-    "@types/react-dom": "19.0.4",
-    "eslint": "9.23.0",
-    "eslint-config-next": "15.2.3",
-    "postcss": "8.5.3",
-    "prettier": "3.5.3",
-    "prettier-plugin-tailwindcss": "0.6.11",
-    "tailwindcss": "4.0.15",
-    "typescript": "5.8.2"
+    "@types/node": "24.10.1",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "eslint": "9.39.1",
+    "eslint-config-next": "16.0.6",
+    "postcss": "8.5.6",
+    "prettier": "3.7.3",
+    "prettier-plugin-tailwindcss": "0.7.2",
+    "tailwindcss": "4.1.17",
+    "typescript": "5.9.3"
   },
   "prettier": {
     "printWidth": 120,

tsconfig.json

@@ -10,7 +10,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -22,6 +22,13 @@
     },
     "target": "ES2017"
   },
-  "include": ["types/global.d.ts", "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "types/global.d.ts",
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }