continue re-design

2025-09-05 13:06:17 -04:00
parent b96d048dbd
commit 836b085f75
270 changed files with 32269 additions and 5182 deletions
@@ -0,0 +1,71 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import { setIntervalOnVisible } from "@/utils/set-timeout-on-visible";
+
+export default function SubtleAsciiAnimation({
+  className = "",
+}: {
+  className?: string;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Simple ASCII pattern for subtle animation
+  const asciiFrames = [
+    "░░░░░░░░░░░░░░░░",
+    "▒░░░░░░░░░░░░░░░",
+    "▒▒░░░░░░░░░░░░░░",
+    "░▒▒░░░░░░░░░░░░░",
+    "░░▒▒░░░░░░░░░░░░",
+    "░░░▒▒░░░░░░░░░░░",
+    "░░░░▒▒░░░░░░░░░░",
+    "░░░░░▒▒░░░░░░░░░",
+    "░░░░░░▒▒░░░░░░░░",
+    "░░░░░░░▒▒░░░░░░░",
+    "░░░░░░░░▒▒░░░░░░",
+    "░░░░░░░░░▒▒░░░░░",
+    "░░░░░░░░░░▒▒░░░░",
+    "░░░░░░░░░░░▒▒░░░",
+    "░░░░░░░░░░░░▒▒░░",
+    "░░░░░░░░░░░░░▒▒░",
+    "░░░░░░░░░░░░░░▒▒",
+    "░░░░░░░░░░░░░░░▒",
+  ];
+
+  useEffect(() => {
+    let frameIndex = 0;
+
+    const animateAscii = () => {
+      if (containerRef.current) {
+        containerRef.current.innerHTML = asciiFrames[frameIndex];
+        frameIndex = (frameIndex + 1) % asciiFrames.length;
+      }
+    };
+
+    // Initialize first frame
+    animateAscii();
+
+    // Start animation when visible
+    const cleanup = setIntervalOnVisible({
+      element: containerRef.current,
+      callback: animateAscii,
+      interval: 150, // Slightly slower for subtlety
+    });
+
+    return () => {
+      cleanup?.();
+    };
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`font-mono text-white/20 whitespace-pre select-none ${className}`}
+      style={{
+        fontSize: "10px",
+        lineHeight: "1",
+        letterSpacing: "0.05em",
+      }}
+    />
+  );
+}