404lab 2.0.2 → 2.0.4

package/templates/Poet.tsx

@@ -1,22 +1,11 @@
 "use client";
 
-import { motion } from "framer-motion";
+
 import Link from "next/link";
 import { cn } from "@/components/ui/cn";
 
 const Poet = ({ className }: { className?: string }) => {
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: { 
-      opacity: 1,
-      transition: { staggerChildren: 0.15, delayChildren: 0.5 }
-    }
-  };
-
-  const lineVariants = {
-    hidden: { opacity: 0, x: -10 },
-    visible: { opacity: 1, x: 0, transition: { duration: 0.8 } }
-  };
+
 
   return (
     <div
@@ -50,73 +39,117 @@ const Poet = ({ className }: { className?: string }) => {
         }
       `}</style>
 
-      <motion.div 
-        initial={{ x: "-120%", y: "20%", rotate: -10, opacity: 0 }}
-        animate={{ 
-          x: "120%", 
-          y: "80%",
-          opacity: [0, 0.1, 0.1, 0] 
-        }}
-        transition={{ 
-          duration: 15, 
-          repeat: Infinity, 
-          ease: "linear",
-          delay: 2
-        }}
-        className="absolute z-0 pointer-events-none scale-[2]"
+      <style jsx global>{`
+        @keyframes floatRotate {
+          0% { transform: translateY(20%) rotate(-10deg); opacity: 0; }
+          10% { opacity: 0.1; }
+          90% { opacity: 0.1; }
+          100% { transform: translateY(80%) rotate(0deg); opacity: 0; left: 120%; }
+        }
+
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+
+        @keyframes slideInLeft {
+          from { opacity: 0; transform: translateX(-10px); }
+          to { opacity: 1; transform: translateX(0); }
+        }
+
+        @keyframes slideInUp {
+          from { opacity: 0; transform: translateY(20px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+
+        @keyframes gentleFloat {
+          0%, 100% { transform: translateY(0) rotate(0); }
+          50% { transform: translateY(-10px) rotate(2deg); }
+        }
+
+        .animate-float-bg {
+          animation: floatRotate 15s linear infinite;
+          animation-delay: 2s;
+        }
+
+        .animate-slide-up {
+          animation: slideInUp 0.8s ease-out forwards;
+          opacity: 0;
+        }
+
+        .animate-fade-in {
+          animation: fadeIn 0.8s ease-out forwards;
+          opacity: 0;
+        }
+
+        .animate-slide-in-left {
+          animation: slideInLeft 0.8s ease-out forwards;
+          opacity: 0;
+        }
+
+        .animate-gentle-float {
+          animation: gentleFloat 5s ease-in-out infinite;
+        }
+
+        .delay-100 { animation-delay: 100ms; }
+        .delay-200 { animation-delay: 200ms; }
+        .delay-300 { animation-delay: 300ms; }
+        .delay-400 { animation-delay: 400ms; }
+        .delay-500 { animation-delay: 500ms; }
+        .delay-600 { animation-delay: 600ms; }
+        .delay-700 { animation-delay: 700ms; }
+        .delay-800 { animation-delay: 800ms; }
+        .delay-900 { animation-delay: 900ms; }
+        .delay-3000 { animation-delay: 3s; }
+      `}</style>
+
+      <div 
+        className="absolute z-0 pointer-events-none scale-[2] left-[-120%] top-[20%] animate-float-bg"
       >
         <svg width="200" height="100" viewBox="0 0 200 100" fill="currentColor" className="text-black">
           <path d="M100 50 C120 40 150 20 180 20 C160 40 140 50 100 50 C60 50 40 40 20 20 C50 20 80 40 100 50 Z" />
           <path d="M100 50 C110 55 120 65 100 80 C80 65 90 55 100 50 Z" />
         </svg>
-      </motion.div>
+      </div>
 
-      <motion.div 
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        className="parchment w-full max-w-4xl min-h-[70vh] rounded-sm p-8 md:p-16 flex flex-col md:flex-row gap-12 border border-[#d4c5a1] relative z-10"
+      <div 
+        className="parchment w-full max-w-4xl min-h-[70vh] rounded-sm p-6 xs:p-8 md:p-16 flex flex-col md:flex-row gap-8 md:gap-12 border border-[#d4c5a1] relative z-10 animate-slide-up m-4"
       >
         <div className="flex-1 gothic-font">
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate="visible"
+          <div
             className="text-[#2c241a] space-y-2 md:space-y-3"
           >
-            <motion.p variants={lineVariants} className="text-sm md:text-base opacity-60 mb-8 tracking-widest uppercase">
+            <p className="text-sm md:text-base opacity-60 mb-8 tracking-widest uppercase animate-slide-in-left delay-500">
               // Archive: /missing.pdf
-            </motion.p>
-
-            <motion.p variants={lineVariants}>Once upon a midnight dreary,</motion.p>
-            <motion.p variants={lineVariants}>While I web surfed, weak and weary,</motion.p>
-            <motion.p variants={lineVariants}>For pages long forgotten yore.</motion.p>
-            <motion.p variants={lineVariants}>When I clicked my fav&apos;rite href,</motion.p>
-            <motion.p variants={lineVariants}>Suddenly there came a warning,</motion.p>
-            <motion.p variants={lineVariants}>and my heart was filled with mourning,</motion.p>
+            </p>
+
+            <p className="animate-slide-in-left delay-600">Once upon a midnight dreary,</p>
+            <p className="animate-slide-in-left delay-700">While I web surfed, weak and weary,</p>
+            <p className="animate-slide-in-left delay-800">For pages long forgotten yore.</p>
+            <p className="animate-slide-in-left delay-900">When I clicked my fav&apos;rite href,</p>
+            <p className="animate-slide-in-left" style={{ animationDelay: '1050ms' }}>Suddenly there came a warning,</p>
+            <p className="animate-slide-in-left" style={{ animationDelay: '1200ms' }}>and my heart was filled with mourning,</p>
             
-            <motion.p variants={lineVariants} className="pt-4 text-xl md:text-2xl italic font-medium">
+            <p className="pt-2 sm:pt-4 text-lg sm:text-xl md:text-2xl italic font-medium animate-slide-in-left" style={{ animationDelay: '1350ms' }}>
               Mourning for my dear &quot;/missing.pdf&quot;,
-            </motion.p>
+            </p>
 
-            <motion.p variants={lineVariants} className="pt-4">&quot;Tis not possible!&quot; I muttered,</motion.p>
+            <p className="pt-2 sm:pt-4 animate-slide-in-left" style={{ animationDelay: '1500ms' }}>&quot;Tis not possible!&quot; I muttered,</p>
             
-            <motion.p variants={lineVariants} className="text-2xl md:text-3xl font-bold leading-tight">
+            <p className="text-xl sm:text-2xl md:text-3xl font-bold leading-tight animate-slide-in-left" style={{ animationDelay: '1650ms' }}>
               &quot;Give thine pages, I implore!&quot;
-            </motion.p>
+            </p>
 
-            <motion.div variants={lineVariants} className="pt-12">
-              <span className="text-5xl md:text-7xl font-black text-[#8b0000] drop-shadow-sm">404</span>
-              <p className="text-lg md:text-xl font-bold mt-2 opacity-80 uppercase tracking-tighter">
+            <div className="pt-8 sm:pt-12 animate-slide-in-left" style={{ animationDelay: '1800ms' }}>
+              <span className="text-4xl sm:text-5xl md:text-7xl font-black text-[#8b0000] drop-shadow-sm">404</span>
+              <p className="text-base sm:text-lg md:text-xl font-bold mt-2 opacity-80 uppercase tracking-tighter">
                 Quoth the server, &quot;Nevermore.&quot;
               </p>
-            </motion.div>
-          </motion.div>
-
-          <motion.div 
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ delay: 3 }}
-            className="mt-12 flex gap-6"
+            </div>
+          </div>
+
+          <div 
+            className="mt-12 flex gap-6 animate-fade-in delay-3000"
           >
             <Link 
               href="/"
@@ -127,17 +160,12 @@ const Poet = ({ className }: { className?: string }) => {
             <button className="px-6 py-2 text-[#2c241a]/60 font-bold hover:text-[#2c241a] transition-all">
               Mourn Again
             </button>
-          </motion.div>
+          </div>
         </div>
 
         <div className="w-full md:w-1/3 flex flex-col items-center justify-center grayscale opacity-80 contrast-125">
-          <motion.div
-            animate={{ 
-              y: [0, -10, 0],
-              rotate: [0, 2, 0]
-            }}
-            transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}
-            className="relative"
+          <div
+            className="relative animate-gentle-float"
           >
             <svg width="200" height="280" viewBox="0 0 200 280" className="text-[#2c241a]">
               <path fill="currentColor" d="M100 20 C120 20 160 40 160 100 C160 160 120 200 100 220 C80 200 40 160 40 100 C40 40 80 20 100 20 Z" opacity="0.1" />
@@ -145,9 +173,9 @@ const Poet = ({ className }: { className?: string }) => {
               <path stroke="currentColor" strokeWidth="2" d="M100 150 L100 240 M80 220 L120 220" />
               <circle cx="100" cy="80" r="40" fill="none" stroke="currentColor" strokeWidth="1" opacity="0.2" />
             </svg>
-          </motion.div>
+          </div>
         </div>
-      </motion.div>
+      </div>
     </div>
   );
 };

package/templates/RetroTv.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
-import { motion, AnimatePresence } from "framer-motion";
+
 import { cn } from "@/components/ui/cn";
 
 const RetroTv = ({ className }: { className?: string }) => {
@@ -121,21 +121,27 @@ const RetroTv = ({ className }: { className?: string }) => {
           animation: scanline 8s linear infinite;
           z-index: 3;
         }
+
+        @keyframes tvOn {
+          from { transform: scale(0.8); opacity: 0; }
+          to { transform: scale(1); opacity: 1; }
+        }
+
+        .animate-tv-on {
+          animation: tvOn 0.3s ease-out forwards;
+        }
       `}</style>
 
       <div className="relative w-full max-w-4xl flex flex-col items-center">
         <div className="w-full bg-[#2a2a2a] p-4 sm:p-8 rounded-[3rem] border-8 border-[#333] tv-frame">
           <div className="aspect-[4/3] w-full bg-black rounded-[2rem] overflow-hidden crt-curve border-4 border-black box-content relative">
-            <AnimatePresence>
-              {!isOn && (
-                <motion.div 
-                  initial={{ scaleY: 1 }}
-                  exit={{ scaleY: 0, opacity: 0 }}
-                  transition={{ duration: 0.1 }}
-                  className="absolute inset-0 bg-black z-[100] flex items-center justify-center"
-                />
-              )}
-            </AnimatePresence>
+            {/* <AnimatePresence> was here, replaced with conditional rendering and CSS based transitions */}
+            {!isOn && (
+              <div 
+                className="absolute inset-0 bg-black z-[100] flex items-center justify-center transition-all duration-100 origin-center"
+                style={{ transform: isOn ? 'scaleY(0)' : 'scaleY(1)', opacity: isOn ? 0 : 1 }}
+              />
+            )}
 
             {isOn && (
               <>
@@ -143,18 +149,16 @@ const RetroTv = ({ className }: { className?: string }) => {
                 <div className="scanline-overlay" />
                 
                 <div className="absolute inset-0 flex flex-col items-center justify-center z-10">
-                  <motion.div
-                    initial={{ scale: 0.8, opacity: 0 }}
-                    animate={{ scale: 1, opacity: 1 }}
-                    className="text-white text-center"
+                  <div
+                    className="text-white text-center animate-tv-on px-4"
                   >
-                    <h1 className="text-[6rem] sm:text-[10rem] font-bold tracking-tighter mix-blend-difference">
+                    <h1 className="text-[4rem] xs:text-[6rem] sm:text-[10rem] font-bold tracking-tighter mix-blend-difference">
                       404
                     </h1>
-                    <div className="px-4 py-2 bg-white text-black font-bold text-xl uppercase skew-x-[-12deg]">
+                    <div className="px-3 sm:px-4 py-1 sm:py-2 bg-white text-black font-bold text-sm xs:text-base sm:text-xl uppercase skew-x-[-12deg] inline-block">
                       No Signal
                     </div>
-                  </motion.div>
+                  </div>
                 </div>
 
                 <div className="absolute top-6 left-6 z-20 bg-green-500/80 text-black px-3 py-1 text-sm font-bold rounded-sm animate-pulse">

package/templates/SimplePage.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "framer-motion";
+
 import Link from "next/link";
 import { cn } from "@/components/ui/cn";
 
@@ -12,30 +12,45 @@ const SimplePage = ({ className }: { className?: string }) => {
         className
       )}
     >
+      <style jsx global>{`
+        @keyframes fadeInUp {
+          from { opacity: 0; transform: translateY(10px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+
+        @keyframes scaleIn {
+          from { transform: scale(0.95); }
+          to { transform: scale(1); }
+        }
+
+        .animate-fade-in-up {
+          animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+          opacity: 0;
+        }
+
+        .animate-scale-in {
+          animation: scaleIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+        }
+      `}</style>
       <div className="absolute inset-0 z-0 bg-[radial-gradient(circle_at_center,_transparent_0%,_rgba(0,0,0,0.02)_100%)] pointer-events-none" />
 
-      <motion.div 
-        initial={{ opacity: 0, y: 10 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
-        className="relative z-10 w-full max-w-[480px] text-center"
+      <div 
+        className="relative z-10 w-full max-w-[480px] text-center animate-fade-in-up"
       >
-        <div className="mb-12">
-          <motion.h1 
-            initial={{ scale: 0.95 }}
-            animate={{ scale: 1 }}
-            className="text-[120px] md:text-[160px] font-black tracking-tighter text-black dark:text-white leading-none select-none"
+        <div className="mb-8 sm:mb-12">
+          <h1 
+            className="text-[100px] xs:text-[120px] md:text-[160px] font-black tracking-tighter text-black dark:text-white leading-none select-none animate-scale-in"
           >
             404
-          </motion.h1>
-          <div className="h-px w-24 bg-black/5 dark:bg-white/5 mx-auto mt-4" />
+          </h1>
+          <div className="h-px w-16 sm:w-24 bg-black/5 dark:bg-white/5 mx-auto mt-4" />
         </div>
 
-        <div className="space-y-6">
-          <h2 className="text-2xl font-semibold text-black dark:text-white tracking-tight">
+        <div className="space-y-4 sm:space-y-6 px-4">
+          <h2 className="text-xl sm:text-2xl font-semibold text-black dark:text-white tracking-tight">
             Something went sideways.
           </h2>
-          <p className="text-gray-500 dark:text-gray-400 text-lg leading-relaxed max-w-sm mx-auto font-medium">
+          <p className="text-gray-500 dark:text-gray-400 text-base sm:text-lg leading-relaxed max-w-sm mx-auto font-medium">
             The page you requested is currently unavailable. 
             It may have been moved or doesn&apos;t exist.
           </p>
@@ -60,7 +75,7 @@ const SimplePage = ({ className }: { className?: string }) => {
             <span>Uptime 99.9%</span>
           </div>
         </div>
-      </motion.div>
+      </div>
     </div>
   );
 };

package/templates/Snow.tsx

@@ -2,14 +2,20 @@
 
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
-import { motion, AnimatePresence } from "framer-motion";
+
 import { cn } from "@/components/ui/cn";
 
 const Snow = ({ className }: { className?: string }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [isHovered, setIsHovered] = useState(false);
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -68,12 +74,14 @@ const Snow = ({ className }: { className?: string }) => {
       window.removeEventListener("resize", resize);
       cancelAnimationFrame(animationFrame);
     };
-  }, []);
+  }, [mounted]);
+
+  if (!mounted) return null;
 
   return (
     <div
       className={cn(
-        "min-h-screen flex flex-col items-center justify-center overflow-hidden bg-gradient-to-b from-[#b7d1e5] via-[#e8f2f6] to-white relative",
+        "min-h-screen w-full flex flex-col items-center justify-center overflow-hidden bg-gradient-to-b from-[#b7d1e5] via-[#e8f2f6] to-white relative",
         className
       )}
     >
@@ -81,15 +89,42 @@ const Snow = ({ className }: { className?: string }) => {
 
       <div className="absolute inset-0 z-0 bg-[radial-gradient(circle_at_center,_transparent_0%,_rgba(255,255,255,0.4)_100%)]" />
 
-      <motion.main 
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        className="z-20 text-center px-4"
+      <style jsx global>{`
+        @keyframes fadeInUp {
+          from { opacity: 0; transform: translateY(20px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+
+        .animate-fade-in-up {
+          animation: fadeInUp 0.8s ease-out forwards;
+          opacity: 0;
+        }
+
+        .hover-404:hover .text-404 {
+          transform: scale(1.05);
+          opacity: 0.3;
+        }
+        
+        .hover-404:hover .decoration-404 {
+          transform: translate(5px, -5px) rotate(10deg);
+        }
+
+        .text-404 {
+          transition: transform 0.3s ease, opacity 0.3s ease;
+        }
+        
+        .decoration-404 {
+          transition: transform 0.3s ease;
+        }
+      `}</style>
+
+      <main 
+        className="z-20 text-center px-4 animate-fade-in-up"
       >
-        <h1 className="text-4xl md:text-7xl font-bold text-[#5d7399] mb-4 tracking-tight">
+        <h1 className="text-3xl xs:text-4xl md:text-7xl font-bold text-[#5d7399] mb-4 tracking-tight">
           Frozen in Time.
         </h1>
-        <p className="text-[#5d7399]/70 text-lg md:text-2xl mb-12 max-w-2xl mx-auto font-medium">
+        <p className="text-[#5d7399]/70 text-base xs:text-lg md:text-2xl mb-8 sm:mb-12 max-w-xs xs:max-w-lg md:max-w-2xl mx-auto font-medium px-4">
           The page you are looking for has been buried under a heavy snowfall.
           Let&apos;s get you somewhere warmer.
         </p>
@@ -100,35 +135,33 @@ const Snow = ({ className }: { className?: string }) => {
         >
           Hitch a ride back home
         </Link>
-      </motion.main>
+      </main>
 
       <div className="absolute bottom-0 w-full h-[30vh] z-10">
         <svg viewBox="0 0 1440 320" className="absolute bottom-0 w-full h-full drop-shadow-[-20px_-20px_40px_rgba(255,255,255,0.5)]">
           <path fill="#f8f9fa" d="M0,192L48,197.3C96,203,192,213,288,192C384,171,480,117,576,117.3C672,117,768,171,864,197.3C960,224,1056,224,1152,202.7C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
         </svg>
 
-        <motion.div 
-          className="absolute bottom-[10%] left-1/2 -translate-x-1/2 z-20"
+        <div 
+          className="absolute bottom-[10%] left-1/2 -translate-x-1/2 z-20 hover-404"
           onMouseEnter={() => setIsHovered(true)}
           onMouseLeave={() => setIsHovered(false)}
         >
           <div className="relative group cursor-pointer">
-            <motion.h2 
-              className="text-8xl md:text-[12rem] font-black text-[#6b85b2] opacity-20 select-none tracking-tighter"
-              animate={isHovered ? { scale: 1.05, opacity: 0.3 } : {}}
+            <h2 
+              className="text-7xl xs:text-8xl md:text-[12rem] font-black text-[#6b85b2] opacity-20 select-none tracking-tighter text-404"
             >
               404
-            </motion.h2>
+            </h2>
             
-            <motion.div 
-              className="absolute -right-12 -top-12 w-16 h-16 pointer-events-none"
-              animate={isHovered ? { rotate: [0, -20, 10, 0], x: [0, -5, 5, 0] } : {}}
+            <div 
+              className="absolute -right-12 -top-12 w-16 h-16 pointer-events-none decoration-404"
             >
               <div className="w-1 h-20 bg-[#dd4040]/20 absolute left-1/2 -translate-x-1/2 top-0" />
               <div className="w-10 h-8 bg-[#dd4040] absolute bottom-0 left-0 rounded-sm" />
-            </motion.div>
+            </div>
           </div>
-        </motion.div>
+        </div>
       </div>
 
       <div className="absolute top-10 right-10 flex gap-4 opacity-20">