add ascii animation

Author: piducancore

app/page.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { formatDate } from "@/lib/utils";
 
 import { getPosts } from "./posts/page";
+import { AsciiAnimation } from "@/components/ascii-animation";
 
 export default async function Home() {
   const blogPosts = await getPosts();
@@ -14,7 +15,7 @@ export default async function Home() {
 
   return (
     <div className="min-h-screen bg-white dark:bg-zinc-950">
-      <main className="container mx-auto px-4 py-12">
+      <main className="container mx-auto px-4 py-12 z-10 relative">
         {/* Hero Section */}
         {/* <section className="mb-16 border-b border-zinc-200 dark:border-zinc-800 pb-16">
           <h1 className="mb-6 text-zinc-900 dark:text-zinc-50">{siteConfig.name}</h1>
@@ -141,6 +142,7 @@ export default async function Home() {
           </div>
         </section>
       </main>
+      <AsciiAnimation className="fixed top-0 z-0" />
     </div>
   );
 }

components/ascii-animation.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { useEffect, useRef, useState } from "react";
+
+export function AsciiAnimation({ className }: { className?: string }) {
+  const preRef = useRef<HTMLPreElement>(null);
+  const [mousePosition, setMousePosition] = useState({ x: 0.5, y: 0 });
+  const animationFrameRef = useRef(0);
+  const timeRef = useRef(0);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  // Handle resize and calculate dimensions
+  useEffect(() => {
+    const handleResize = () => {
+      if (preRef.current) {
+        const style = window.getComputedStyle(preRef.current);
+        const fontWidth = Number.parseFloat(style.fontSize) * 0.6;
+        const fontHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.2;
+
+        // Limit dimensions for better performance
+        const width = Math.min(150, Math.floor(preRef.current.clientWidth / fontWidth));
+        const height = Math.min(80, Math.floor(preRef.current.clientHeight / fontHeight));
+
+        setDimensions({ width, height });
+      }
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      cancelAnimationFrame(animationFrameRef.current);
+    };
+  }, []);
+
+  // Handle mouse movement
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (preRef.current) {
+        const rect = preRef.current.getBoundingClientRect();
+        setMousePosition({
+          x: (e.clientX - rect.left) / rect.width,
+          // y: (e.clientY - rect.top) / rect.height,
+          y: 0,
+        });
+      }
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
+
+  // Animation loop
+  useEffect(() => {
+    if (dimensions.width === 0 || dimensions.height === 0) return;
+
+    const chars = " .,:;+*?%S#@";
+
+    const animate = () => {
+      timeRef.current += 0.03;
+
+      if (!preRef.current) return;
+
+      let result = "";
+
+      for (let y = 0; y < dimensions.height; y++) {
+        for (let x = 0; x < dimensions.width; x++) {
+          // Normalized coordinates
+          const nx = x / dimensions.width - 0.5;
+          const ny = y / dimensions.height - 0.5;
+
+          // Distance from mouse position (normalized)
+          const dx = nx - (mousePosition.x - 0.5);
+          const dy = ny - (mousePosition.y - 0.5);
+          const dist = Math.sqrt(dx * dx + dy * dy);
+
+          // Wave pattern
+          const wave = Math.sin(dist * 10 - timeRef.current * 2) * 0.5 + 0.5;
+
+          // Choose character based on wave value
+          const charIndex = Math.floor(wave * (chars.length - 1));
+          result += chars[charIndex];
+        }
+        result += "\n";
+      }
+
+      preRef.current.textContent = result;
+      animationFrameRef.current = requestAnimationFrame(animate);
+    };
+
+    // Start animation
+    animationFrameRef.current = requestAnimationFrame(animate);
+
+    // Cleanup
+    return () => {
+      cancelAnimationFrame(animationFrameRef.current);
+    };
+  }, [dimensions, mousePosition]);
+
+  return (
+    <div className={cn("flex items-center justify-center w-full h-screen mx-auto", className)}>
+      <pre
+        ref={preRef}
+        className="w-full h-full p-0 m-0 overflow-hidden leading-[10px] font-mono opacity-[5%]"
+        style={{
+          fontSize: "1.5rem",
+          fontFamily: "monospace",
+          userSelect: "none",
+        }}
+      />
+    </div>
+  );
+}

components/site-footer.tsx

@@ -3,7 +3,7 @@ import { siteConfig } from "@/lib/site-config";
 
 export function SiteFooter() {
   return (
-    <footer className="border-t border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+    <footer className="border-t border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950 z-10">
       <div className="container mx-auto px-4 py-8">
         <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
           <div>