lerp animation

Author: piducancore

app/page.tsx

@@ -31,7 +31,7 @@ export default async function Home() {
         </section> */}
 
         {/* Featured Post */}
-        <section className="my-16">
+        <section className="min-h-[90vh] py-16 justify-end flex flex-col">
           <h2 className="mb-8 text-zinc-900 dark:text-zinc-50">Artículo Destacado</h2>
           <div className="grid grid-cols-1 lg:grid-cols-5 gap-8">
             <div className="lg:col-span-3 space-y-4">
@@ -89,7 +89,7 @@ export default async function Home() {
         </section>
 
         {/* Recent Posts */}
-        <section>
+        <section className="py-16">
           <h2 className="mb-8 text-zinc-900 dark:text-zinc-50">Artículos Recientes</h2>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
             {recentPosts.map((post) => (

components/ascii-animation.tsx

@@ -3,12 +3,50 @@
 import { cn } from "@/lib/utils";
 import { useEffect, useRef, useState } from "react";
 
+const lerp = (start: number, end: number, t: number) => {
+  return start + (end - start) * t;
+};
+
 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 });
+  const [smoothPos, setSmoothPos] = useState({ x: 0, y: 0 });
+  const targetPos = useRef({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (preRef.current) {
+        const rect = preRef.current.getBoundingClientRect();
+        targetPos.current = {
+          x: (e.clientX - rect.left) / rect.width,
+          y: (e.clientY - rect.top) / rect.height,
+        };
+      }
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
+
+  useEffect(() => {
+    let animationFrameId: number;
+
+    const animate = () => {
+      setSmoothPos((prev) => {
+        const t = 0.01; // Smoothness factor — smaller = smoother
+        return {
+          x: lerp(prev.x, targetPos.current.x, t),
+          y: lerp(prev.y, targetPos.current.y, t),
+        };
+      });
+      animationFrameId = requestAnimationFrame(animate);
+    };
+
+    animate();
+    return () => cancelAnimationFrame(animationFrameId);
+  }, []);
 
   // Handle resize and calculate dimensions
   useEffect(() => {
@@ -35,31 +73,14 @@ export function AsciiAnimation({ className }: { className?: string }) {
     };
   }, []);
 
-  // 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 chars = " .,:;+*?%$#@";
 
     const animate = () => {
-      timeRef.current += 0.03;
+      timeRef.current += 0.005;
 
       if (!preRef.current) return;
 
@@ -72,8 +93,8 @@ export function AsciiAnimation({ className }: { className?: string }) {
           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 dx = nx - (smoothPos.x - 0.5);
+          const dy = ny - (smoothPos.y - 0.5);
           const dist = Math.sqrt(dx * dx + dy * dy);
 
           // Wave pattern
@@ -97,18 +118,20 @@ export function AsciiAnimation({ className }: { className?: string }) {
     return () => {
       cancelAnimationFrame(animationFrameRef.current);
     };
-  }, [dimensions, mousePosition]);
+  }, [dimensions, smoothPos]);
 
   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",
-        }}
+        className="w-full h-full p-0 m-0 overflow-hidden font-extralight font-mono text-xl opacity-[15%]"
+        style={
+          {
+            // fontSize: "1.5rem",
+            // fontFamily: "monospace",
+            // userSelect: "none",
+          }
+        }
       />
     </div>
   );