Initial commit

2026-01-06 14:01:51 +02:00
commit 36dbc3d00c
308 changed files with 62520 additions and 0 deletions
--- a/src/components/background/AnimatedGridBackground.tsx
+++ b/src/components/background/AnimatedGridBackground.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { memo, useEffect, useId, useRef, useState } from "react";
+import { motion } from "framer-motion";
+import { cls } from "@/lib/utils";
+
+interface AnimatedGridBackgroundProps {
+  className?: string;
+  squareSize?: number;
+  numSquares?: number;
+  maxOpacity?: number;
+  perspectiveThreeD?: boolean;
+}
+
+const AnimatedGridBackground = ({
+  className = "",
+  squareSize = 100,
+  numSquares = 50,
+  maxOpacity = 0.15,
+  perspectiveThreeD = true,
+}: AnimatedGridBackgroundProps) => {
+  const id = useId();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const [squares, setSquares] = useState<Array<{ id: number; pos: [number, number] }>>([]);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      const { width, height } = containerRef.current.getBoundingClientRect();
+      setDimensions({ width, height });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (dimensions.width && dimensions.height) {
+      const cols = Math.ceil(dimensions.width / squareSize);
+      const rows = Math.ceil(dimensions.height / squareSize);
+
+      const newSquares = Array.from({ length: numSquares }, (_, i) => ({
+        id: i,
+        pos: [
+          Math.floor(Math.random() * cols),
+          Math.floor(Math.random() * rows),
+        ] as [number, number],
+      }));
+
+      setSquares(newSquares);
+    }
+  }, [dimensions, squareSize, numSquares]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cls(
+        "fixed inset-0 -z-10 overflow-hidden [mask-image:radial-gradient(circle_at_center,white_0%,transparent_90%)]",
+        perspectiveThreeD && "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
+        className
+      )}
+      aria-hidden="true"
+    >
+      <svg
+        width="100%"
+        height="100%"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <pattern
+            id={`grid-${id}`}
+            width={squareSize}
+            height={squareSize}
+            patternUnits="userSpaceOnUse"
+          >
+            <path
+              d={`M ${squareSize} 0 L 0 0 0 ${squareSize}`}
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1"
+              className="text-accent/20"
+            />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill={`url(#grid-${id})`} />
+        {squares.map(({ id, pos: [x, y] }) => (
+          <motion.rect
+            key={id}
+            initial={{ opacity: 0 }}
+            animate={{
+              opacity: [0, maxOpacity, 0],
+            }}
+            transition={{
+              duration: Math.random() * 2 + 2,
+              repeat: Infinity,
+              delay: Math.random() * 2,
+              ease: "easeInOut",
+            }}
+            x={x * squareSize}
+            y={y * squareSize}
+            width={squareSize}
+            height={squareSize}
+            fill="var(--color-background-accent)"
+            strokeWidth="0"
+          />
+        ))}
+      </svg>
+    </div>
+  );
+};
+
+AnimatedGridBackground.displayName = "AnimatedGridBackground";
+
+export default memo(AnimatedGridBackground);