404lab 2.0.2 → 2.0.4

package/templates/StoneAge.tsx

@@ -1,24 +1,34 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
 import Link from "next/link";
+import { Arvo } from "next/font/google";
 import { cn } from "@/components/ui/cn";
 
+const arvo = Arvo({
+  weight: ["400", "700"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
 const StoneAge = ({ className }: { className?: string }) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
   return (
     <div
       className={cn(
-        "min-h-screen bg-[#fcf8f0] flex flex-col items-center justify-center p-8 overflow-hidden relative font-serif",
+        "min-h-screen w-full bg-[#fcf8f0] flex flex-col items-center justify-center p-8 overflow-hidden relative",
+        arvo.className,
         className
       )}
     >
       <style jsx global>{`
-        @import url('https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&display=swap');
-        
-        .stone-age-font {
-          font-family: 'Arvo', serif;
-        }
-
         .paper-texture {
           background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
         }
@@ -28,57 +38,89 @@ const StoneAge = ({ className }: { className?: string }) => {
         }
       `}</style>
 
+      <style jsx global>{`
+        @keyframes floatUp {
+          0%, 100% { transform: translateY(0); }
+          50% { transform: translateY(-10px); }
+        }
+
+        @keyframes floatUpLarge {
+          0%, 100% { transform: translateY(0); }
+          50% { transform: translateY(-15px); }
+        }
+
+        @keyframes rock {
+          0%, 100% { transform: rotate(-2deg); }
+          50% { transform: rotate(2deg); }
+        }
+
+        @keyframes fadeInUp {
+          from { opacity: 0; transform: translateY(30px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+
+        .animate-float-up {
+          animation: floatUp 6s ease-in-out infinite;
+        }
+
+        .animate-float-up-large {
+          animation: floatUpLarge 8s ease-in-out infinite;
+          animation-delay: 1s;
+        }
+
+        .animate-rock {
+          animation: rock 4s ease-in-out infinite;
+        }
+
+        .animate-fade-in-up {
+          animation: fadeInUp 0.8s ease-out forwards;
+          opacity: 0;
+        }
+      `}</style>
+      
       <div className="absolute inset-0 paper-texture opacity-40 pointer-events-none" />
 
-      <motion.div 
-        animate={{ y: [0, -10, 0] }}
-        transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
-        className="absolute top-20 right-[15%] opacity-10 select-none"
+      <div 
+        className="absolute top-20 right-[15%] opacity-10 select-none animate-float-up"
       >
         <svg width="200" height="200" viewBox="0 0 200 200">
           <path d="M40 160 L80 40 L120 180 L160 80 L180 160 Z" fill="#4a3b2a" />
         </svg>
-      </motion.div>
+      </div>
 
-      <motion.div 
-        animate={{ y: [0, -15, 0] }}
-        transition={{ duration: 8, repeat: Infinity, ease: "easeInOut", delay: 1 }}
-        className="absolute bottom-20 left-[10%] opacity-10 select-none"
+      <div 
+        className="absolute bottom-20 left-[10%] opacity-10 select-none animate-float-up-large"
       >
         <svg width="250" height="250" viewBox="0 0 200 200">
           <path d="M50 180 L100 20 L150 160 Z" fill="#4a3b2a" />
         </svg>
-      </motion.div>
+      </div>
 
-      <motion.div 
-        initial={{ opacity: 0, y: 30 }}
-        animate={{ opacity: 1, y: 0 }}
-        className="relative z-10 w-full max-w-4xl flex flex-col items-center text-center"
+      <div 
+        className="relative z-10 w-full max-w-4xl flex flex-col items-center text-center animate-fade-in-up"
       >
         <div className="relative mb-8">
-          <motion.div
-            animate={{ rotate: [-2, 2, -2] }}
-            transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
-            className="relative z-20"
+          <div
+            className="relative z-20 animate-rock"
           >
             <img
               src="https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif"
               alt="Stone Age Illustration"
-              className="w-full max-w-[450px] h-auto rock-shadow rounded-3xl"
+              className="w-full max-w-[320px] sm:max-w-[450px] h-auto rock-shadow rounded-3xl"
             />
-          </motion.div>
+          </div>
           
           <div className="absolute -bottom-6 left-1/2 -translate-x-1/2 w-[80%] h-6 bg-black opacity-[0.05] blur-xl rounded-full" />
         </div>
 
-        <div className="stone-age-font">
-          <h1 className="text-4xl md:text-6xl font-black text-[#4a3b2a] mb-4 uppercase tracking-tighter">
+        <div className="px-4">
+          <h1 className="text-3xl sm:text-4xl md:text-6xl font-black text-[#4a3b2a] mb-4 uppercase tracking-tighter">
             Prehistoric 404
           </h1>
-          <p className="text-[#6b5844] text-xl md:text-2xl mb-12 max-w-xl mx-auto font-medium">
+          <p className="text-[#6b5844] text-lg sm:text-xl md:text-2xl mb-8 sm:mb-12 max-w-xl mx-auto font-medium">
             This endpoint hasn&apos;t been discovered yet. It&apos;s still in the early Jurassic.
           </p>
-
+          
           <div className="flex flex-col sm:flex-row gap-6 items-center justify-center">
             <Link
               href="/"
@@ -91,7 +133,7 @@ const StoneAge = ({ className }: { className?: string }) => {
             </button>
           </div>
         </div>
-      </motion.div>
+      </div>
 
       <div className="absolute bottom-10 w-full px-8 flex justify-between items-center text-[#4a3b2a]/20 font-bold uppercase tracking-[0.2em] text-[10px] sm:text-xs">
         <span>Pleistocene Era</span>

package/templates/StrangerThings.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from "@/components/ui/cn";
 
-// import Link from "next/link"; // UNCOMMENT THIS when using in your project
+import Link from "next/link";
 
 const StrangerThings = ({ className }: { className?: string }) => {
   return (
@@ -88,14 +88,19 @@ const StrangerThings = ({ className }: { className?: string }) => {
           animation: slideUpFadeIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) 2.5s forwards;
         }
 
-        .quote-top { font-size: 0.875rem; font-weight: 500; }
+        .quote-top { font-size: 0.75rem; font-weight: 500; }
         .quote-bottom { 
-          font-size: 1.5rem; 
+          font-size: 1.125rem; 
           font-weight: 700;
           opacity: 0;
           animation: slideUpFadeIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) 3s forwards;
         }
 
+        @media (min-width: 640px) {
+          .quote-top { font-size: 0.875rem; }
+          .quote-bottom { font-size: 1.5rem; }
+        }
+
         .cta {
           margin-top: 32px;
           padding: 12px 32px;
@@ -132,7 +137,7 @@ const StrangerThings = ({ className }: { className?: string }) => {
         >
           <svg
             className="w-[90%] sm:w-[500px] md:w-[636px] h-auto"
-            viewBox="-100 0 536 190"
+            viewBox="-110 0 556 190"
             xmlns="http://www.w3.org/2000/svg"
           >
             <defs>
@@ -311,13 +316,9 @@ const StrangerThings = ({ className }: { className?: string }) => {
         </div>
 
         <div className="flex justify-center">
-          {/* UNCOMMENT THIS when using in your project */}
-          {/* <Link href="/" className="cta" aria-label="Go to right side up">
-            Go to right side up
-          </Link> */}
-          <button className="cta" aria-label="Go to right side up">
+          <Link href="/" className="cta" aria-label="Go to right side up">
             Go to right side up
-          </button>
+          </Link>
         </div>
       </main>
     </div>

package/templates/{Terminal404.tsx → Terminal.tsx}

@@ -2,10 +2,10 @@
 
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
-import { motion, AnimatePresence } from "framer-motion";
+
 import { cn } from "@/components/ui/cn";
 
-const Terminal404 = ({ className }: { className?: string }) => {
+const Terminal = ({ className }: { className?: string }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [displayText, setDisplayText] = useState("");
   const [isDecrypted, setIsDecrypted] = useState(false);
@@ -88,6 +88,18 @@ const Terminal404 = ({ className }: { className?: string }) => {
         className
       )}
     >
+      <style jsx global>{`
+        @keyframes fadeInScale {
+          from { opacity: 0; transform: scale(0.9); }
+          to { opacity: 1; transform: scale(1); }
+        }
+
+        .animate-fade-in-scale {
+          animation: fadeInScale 0.6s ease-out forwards;
+          opacity: 0;
+        }
+      `}</style>
+
       <canvas 
         ref={canvasRef} 
         className="absolute inset-0 z-0 opacity-20 pointer-events-none" 
@@ -95,10 +107,8 @@ const Terminal404 = ({ className }: { className?: string }) => {
 
       <div className="absolute inset-0 z-1 pointer-events-none bg-[radial-gradient(circle_at_center,_transparent_0%,_rgba(0,0,0,0.8)_100%)]" />
 
-      <motion.div 
-        initial={{ opacity: 0, scale: 0.9 }}
-        animate={{ opacity: 1, scale: 1 }}
-        className="z-10 w-full max-w-4xl bg-black/40 backdrop-blur-sm border border-[#0f0]/20 p-8 sm:p-12 rounded-lg shadow-[0_0_50px_rgba(0,255,0,0.1)] relative overflow-hidden group"
+      <div 
+        className="z-10 w-full max-w-4xl bg-black/40 backdrop-blur-sm border border-[#0f0]/20 p-8 sm:p-12 rounded-lg shadow-[0_0_50px_rgba(0,255,0,0.1)] relative overflow-hidden group animate-fade-in-scale"
       >
         <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[#0f0]/40 to-transparent" />
         
@@ -107,11 +117,11 @@ const Terminal404 = ({ className }: { className?: string }) => {
           System Status: Breach Detected
         </div>
 
-        <h1 className="text-3xl sm:text-6xl font-bold text-[#0f0] mb-6 tracking-tighter drop-shadow-[0_0_15px_rgba(0,255,0,0.5)] min-h-[1.2em]">
+        <h1 className="text-2xl xs:text-3xl sm:text-6xl font-bold text-[#0f0] mb-4 sm:mb-6 tracking-tighter drop-shadow-[0_0_15px_rgba(0,255,0,0.5)] min-h-[1.2em] break-all">
           {displayText}
         </h1>
 
-        <p className="text-[#0f0]/80 text-lg sm:text-xl md:text-2xl mb-12 max-w-2xl leading-relaxed">
+        <p className="text-[#0f0]/80 text-base sm:text-lg md:text-xl lg:text-2xl mb-8 sm:mb-12 max-w-2xl leading-relaxed">
           The node you are attempting to ping is non-responsive. 
           The packets have been lost in the digital aether.
         </p>
@@ -137,7 +147,7 @@ const Terminal404 = ({ className }: { className?: string }) => {
         </div>
 
         <div className="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-[#0f0]/20 to-transparent" />
-      </motion.div>
+      </div>
 
       <div className="absolute bottom-6 right-6 text-[#0f0]/20 text-sm italic pointer-events-none">
         root@void:/# _
@@ -146,5 +156,5 @@ const Terminal404 = ({ className }: { className?: string }) => {
   );
 };
 
-export default Terminal404;
+export default Terminal;
 

package/templates/Vercel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "framer-motion";
+
 import Link from "next/link";
 import { cn } from "@/components/ui/cn";
 import { useEffect, useState } from "react";
@@ -13,7 +13,7 @@ const allLogs = [
 ];
 
 const Vercel = ({ className }: { className?: string }) => {
-  const [logs, setLogs] = useState<{ text: string, time: string }[]>([]);
+  const [logs, setLogs] = useState<{ text: string; time: string }[]>([]);
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
@@ -21,8 +21,11 @@ const Vercel = ({ className }: { className?: string }) => {
     let i = 0;
     const interval = setInterval(() => {
       if (i < allLogs.length) {
-        const time = new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
-        setLogs(prev => [...prev, { text: allLogs[i], time }]);
+        const now = new Date();
+        const time = now.getHours().toString().padStart(2, '0') + ':' + 
+                     now.getMinutes().toString().padStart(2, '0') + ':' + 
+                     now.getSeconds().toString().padStart(2, '0');
+        setLogs((prev) => [...prev, { text: allLogs[i], time }]);
         i++;
       } else {
         clearInterval(interval);
@@ -31,43 +34,90 @@ const Vercel = ({ className }: { className?: string }) => {
     return () => clearInterval(interval);
   }, []);
 
+  if (!mounted) return null;
+
   return (
     <div
       className={cn(
-        "min-h-screen bg-black text-white flex flex-col items-center justify-center p-8 overflow-hidden font-sans relative",
+        "min-h-screen w-full bg-black text-white flex flex-col items-center justify-center p-8 overflow-hidden font-sans relative",
         className
       )}
     >
+      <style jsx global>{`
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+
+        @keyframes fadeInUp {
+          from { opacity: 0; transform: translateY(10px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+
+        @keyframes fadeInRight {
+          from { opacity: 0; transform: translateX(-5px); }
+          to { opacity: 1; transform: translateX(0); }
+        }
+
+        @keyframes scaleIn {
+          from { opacity: 0; transform: scale(0.8); }
+          to { opacity: 1; transform: scale(1); }
+        }
+        
+        @keyframes blink {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0; }
+        }
+
+        .animate-fade-in {
+          animation: fadeIn 0.5s ease-out forwards;
+        }
+
+        .animate-fade-in-up {
+          animation: fadeInUp 0.5s ease-out forwards;
+          opacity: 0;
+        }
+
+        .animate-fade-in-right {
+          animation: fadeInRight 0.3s ease-out forwards;
+          opacity: 0;
+        }
+
+        .animate-scale-in {
+          animation: scaleIn 0.5s ease-out forwards;
+          opacity: 0;
+        }
+
+        .animate-blink {
+          animation: blink 0.8s infinite;
+        }
+        
+        .delay-200 { animation-delay: 200ms; }
+      `}</style>
+      
       <div className="absolute inset-0 z-0 opacity-20 [background-image:radial-gradient(#333_1px,transparent_1px)] [background-size:40px_40px]" />
       
       <div className="relative z-10 w-full max-w-2xl flex flex-col items-center">
-        <motion.div
-          initial={{ opacity: 0, scale: 0.8 }}
-          animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 0.5 }}
-          className="mb-16"
+        <div
+          className="mb-16 animate-scale-in"
         >
           <svg width="80" height="80" viewBox="0 0 75 65" fill="none">
             <path d="M37.5 0L75 65H0L37.5 0Z" fill="white" />
           </svg>
-        </motion.div>
+        </div>
 
-        <div className="text-center mb-16">
-          <motion.h1 
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="text-8xl sm:text-9xl font-bold tracking-tighter mb-4"
+        <div className="text-center mb-8 sm:mb-16">
+          <h1 
+            className="text-7xl sm:text-9xl font-bold tracking-tighter mb-4 animate-fade-in-up"
           >
             404
-          </motion.h1>
-          <motion.p 
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ delay: 0.2 }}
-            className="text-gray-400 text-lg sm:text-xl font-medium"
+          </h1>
+          <p 
+            className="text-gray-400 text-base sm:text-xl font-medium animate-fade-in delay-200 px-4"
+            style={{ opacity: 0, animationFillMode: 'forwards' }}
           >
             This deployment could not be found.
-          </motion.p>
+          </p>
         </div>
 
         <div className="w-full bg-[#111] border border-white/10 rounded-lg p-6 font-mono text-sm mb-12 shadow-2xl">
@@ -78,23 +128,19 @@ const Vercel = ({ className }: { className?: string }) => {
           </div>
           <div className="space-y-2">
             {logs.map((log, i) => (
-              <motion.div 
+              <div 
                 key={i}
-                initial={{ opacity: 0, x: -5 }}
-                animate={{ opacity: 1, x: 0 }}
                 className={cn(
-                  "flex gap-4",
+                  "flex gap-4 animate-fade-in-right",
                   log.text.includes("Error") || log.text.includes("failed") ? "text-red-400" : "text-gray-400"
                 )}
               >
                 <span className="text-gray-600">[{log.time}]</span>
                 <span>{log.text}</span>
-              </motion.div>
+              </div>
             ))}
-            <motion.span 
-              animate={{ opacity: [1, 0] }}
-              transition={{ repeat: Infinity, duration: 0.8 }}
-              className="inline-block w-2 h-4 bg-white/40 ml-1"
+            <span 
+              className="inline-block w-2 h-4 bg-white/40 ml-1 animate-blink"
             />
           </div>
         </div>