404lab 2.0.2 → 2.0.4

package/cli/core/templates.js

@@ -10,18 +10,20 @@ export const TEMPLATES = {
   stoneage: "StoneAge",
   amongus: "AmongUs",
   blueglitch: "BlueGlitch",
+  buggame: "BugGame",
   geeksforgeeks: "GeeksforGeeks",
   google: "Google",
   macos: "MacOs",
   modern: "ModernPage",
   particles: "Particles",
   poet: "Poet",
-  retro: "RetroTv",
+  retrotv: "RetroTv",
   simple: "SimplePage",
   snow: "Snow",
   strangethings: "StrangerThings",
-  terminal: "Terminal404",
-  vercel: "Vercel"
+  terminal: "Terminal",
+  vercel: "Vercel",
+  void: "Void",
 };
 
 export function getTemplateKeys() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "404lab",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "A CLI tool for generating beautiful custom 404 pages in Next.js projects",
   "type": "module",
   "preferGlobal": true,

package/templates/AmongUs.tsx

@@ -3,14 +3,22 @@
 import { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { motion } from "framer-motion";
+import { VT323 } from "next/font/google";
 import { cn } from "@/components/ui/cn";
 
+const vt323 = VT323({
+  weight: "400",
+  subsets: ["latin"],
+  display: "swap",
+});
+
 const AmongUs = ({ className }: { className?: string }) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [stars, setStars] = useState<{ id: number; x: number; y: number; size: number; speed: number; opacity: number }[]>([]);
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
+    setMounted(true);
     const initialStars = Array.from({ length: 100 }).map((_, i) => ({
       id: i,
       x: Math.random() * 100,
@@ -22,37 +30,20 @@ const AmongUs = ({ className }: { className?: string }) => {
     setStars(initialStars);
   }, []);
 
-  const typewriterVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.08,
-      },
-    },
-  };
-
-  const letterVariants = {
-    hidden: { opacity: 0, y: 5 },
-    visible: { opacity: 1, y: 0 },
-  };
+  const text = "THERE IS 1 IMPOSTOR AMONG US";
 
-  const text = "There is 1 Impostor among us";
+  if (!mounted) return null;
 
   return (
     <div
       ref={containerRef}
       className={cn(
-        "relative flex h-screen w-full flex-col items-center justify-center overflow-hidden bg-[#000000] text-white",
+        "relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-[#000000] text-white",
+        vt323.className,
         className
       )}
     >
       <style jsx global>{`
-        @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
-        
-        .among-us-font {
-          font-family: 'VT323', monospace;
-        }
 
         .star-field {
           position: absolute;
@@ -64,6 +55,12 @@ const AmongUs = ({ className }: { className?: string }) => {
           position: absolute;
           background: white;
           border-radius: 50%;
+          animation: moveStars linear infinite;
+        }
+
+        @keyframes moveStars {
+          from { left: 100%; }
+          to { left: -10%; }
         }
 
         .crt-overlay::before {
@@ -95,11 +92,60 @@ const AmongUs = ({ className }: { className?: string }) => {
           0% { bottom: 100%; }
           100% { bottom: -100px; }
         }
+
+        @keyframes floatRed {
+          0% { left: -25%; top: 40%; transform: rotate(0deg); }
+          25% { top: 45%; }
+          50% { top: 35%; }
+          75% { top: 40%; }
+          100% { left: 125%; top: 40%; transform: rotate(360deg); }
+        }
+
+        @keyframes floatBlue {
+          0% { left: -25%; top: 70%; transform: rotate(0deg); }
+          25% { top: 55%; }
+          50% { top: 65%; }
+          75% { top: 70%; }
+          100% { left: 125%; top: 70%; transform: rotate(-360deg); }
+        }
+
+        .animate-float-red {
+          animation: floatRed 20s linear infinite;
+        }
+
+        .animate-float-blue {
+          animation: floatBlue 28s linear infinite;
+          animation-delay: 12s;
+        }
+
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        
+        .fade-in {
+          animation: fadeIn 1s ease-out forwards;
+        }
+        
+        .fade-in-delayed {
+          opacity: 0;
+          animation: fadeIn 1s ease-out 3.5s forwards;
+        }
+
+        .fade-in-delayed-2 {
+          opacity: 0;
+          animation: fadeIn 1s ease-out 5s forwards;
+        }
+        
+        .fade-in-delayed-3 {
+          opacity: 0;
+          animation: fadeIn 1s ease-out 6.5s forwards;
+        }
       `}</style>
 
       <div className="star-field">
         {stars.map((star) => (
-          <motion.div
+          <div
             key={star.id}
             className="star"
             style={{
@@ -109,95 +155,46 @@ const AmongUs = ({ className }: { className?: string }) => {
               left: `${star.x}%`,
               opacity: star.opacity,
               boxShadow: `0 0 ${star.size * 2}px rgba(255, 255, 255, 0.5)`,
-            }}
-            animate={{
-              left: ["100%", "-10%"],
-            }}
-            transition={{
-              duration: 25 / star.speed,
-              repeat: Infinity,
-              ease: "linear",
-              delay: Math.random() * -25,
+              animationDuration: `${25 / star.speed}s`,
+              animationDelay: `${Math.random() * -25}s`,
             }}
           />
         ))}
       </div>
 
-      <div className="z-10 flex flex-col items-center text-center px-4 among-us-font select-none">
-        <motion.h1 
-          className="text-8xl md:text-[12rem] font-bold tracking-[0.1em] text-white mb-4 leading-none"
-          initial={{ opacity: 0, scale: 0.9 }}
-          animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 1.5, ease: "easeOut" }}
-        >
+      <div className="z-10 flex flex-col items-center text-center px-4 select-none">
+        <h1 className="text-7xl sm:text-9xl md:text-[12rem] font-bold tracking-[0.1em] text-white mb-2 sm:mb-4 leading-none fade-in">
           404
-        </motion.h1>
+        </h1>
         
-        <motion.div
-          className="mb-8 h-12"
-          variants={typewriterVariants}
-          initial="hidden"
-          animate="visible"
-        >
-          <h2 className="text-2xl md:text-5xl text-red-500 uppercase font-black tracking-[0.2em]">
-            {text.split("").map((char, index) => (
-              <motion.span key={index} variants={letterVariants}>
-                {char}
-              </motion.span>
-            ))}
+        <div className="mb-6 sm:mb-8 h-8 sm:h-12 fade-in">
+          <h2 className="text-lg xs:text-xl sm:text-3xl md:text-5xl text-red-500 uppercase font-black tracking-[0.15em] sm:tracking-[0.2em] whitespace-nowrap">
+            {text}
           </h2>
-        </motion.div>
-
-        <motion.div 
-          className="space-y-6"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 3.5, duration: 1.2 }}
-        >
-          <p className="text-xl md:text-4xl text-gray-400 max-w-2xl mx-auto tracking-wide leading-relaxed">
+        </div>
+
+        <div className="space-y-4 sm:space-y-6 fade-in-delayed">
+          <p className="text-lg sm:text-2xl md:text-4xl text-gray-400 max-w-xl md:max-w-2xl mx-auto tracking-wide leading-relaxed">
             This page was ejected into space.
           </p>
           
-          <motion.p 
-            className="text-lg md:text-3xl text-white tracking-widest"
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 5, duration: 1 }}
-          >
-            <span className="text-red-600 font-bold px-2">404-Page</span> was not An Impostor.
-          </motion.p>
+          <p className="text-base sm:text-xl md:text-3xl text-white tracking-widest fade-in-delayed-2">
+            <span className="text-red-600 font-bold px-1 sm:px-2">404-Page</span> was not An Impostor.
+          </p>
           
-          <motion.div 
-            className="pt-12"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ delay: 6.5, duration: 1 }}
-          >
+          <div className="pt-8 sm:pt-12 fade-in-delayed-3">
             <Link
               href="/"
-              className="group relative inline-flex items-center justify-center px-12 py-4 font-bold text-white transition-all duration-300 bg-transparent border-2 border-white/30 hover:border-white hover:bg-white hover:text-black rounded-sm uppercase tracking-[0.3em] text-xl"
+              className="group relative inline-flex items-center justify-center px-8 sm:px-12 py-3 sm:py-4 font-bold text-white transition-all duration-300 bg-transparent border-2 border-white/30 hover:border-white hover:bg-white hover:text-black rounded-sm uppercase tracking-[0.2em] sm:tracking-[0.3em] text-lg sm:text-xl"
             >
               Return to Ship
             </Link>
-          </motion.div>
-        </motion.div>
+          </div>
+        </div>
       </div>
 
       <div className="absolute inset-0 pointer-events-none overflow-hidden">
-        <motion.div
-          className="absolute w-32 md:w-56 h-auto"
-          initial={{ left: "-25%", top: "40%", rotate: 0 }}
-          animate={{ 
-            left: "125%", 
-            top: ["40%", "45%", "35%", "40%"],
-            rotate: 360 
-          }}
-          transition={{ 
-            duration: 20, 
-            repeat: Infinity, 
-            ease: "linear" 
-          }}
-        >
+        <div className="absolute w-32 md:w-56 h-auto animate-float-red" style={{ left: '-25%' }}>
           <Image
             src="https://cdn.iconscout.com/icon/free/png-256/free-red-among-us-icon-svg-download-png-2691060.png"
             alt="Ejected Red"
@@ -206,23 +203,9 @@ const AmongUs = ({ className }: { className?: string }) => {
             unoptimized
             className="drop-shadow-[0_0_20px_rgba(255,0,0,0.5)]"
           />
-        </motion.div>
+        </div>
         
-        <motion.div
-          className="absolute w-24 md:w-40 h-auto"
-          initial={{ left: "-25%", top: "70%", rotate: 0 }}
-          animate={{ 
-            left: "125%", 
-            top: ["70%", "55%", "65%", "70%"],
-            rotate: -360 
-          }}
-          transition={{ 
-            duration: 28, 
-            repeat: Infinity, 
-            ease: "linear",
-            delay: 12
-          }}
-        >
+        <div className="absolute w-24 md:w-40 h-auto animate-float-blue" style={{ left: '-25%' }}>
           <Image
             src="https://cdn.iconscout.com/icon/free/png-256/free-blue-among-us-icon-svg-download-png-2691064.png"
             alt="Ejected Blue"
@@ -231,7 +214,7 @@ const AmongUs = ({ className }: { className?: string }) => {
             unoptimized
             className="drop-shadow-[0_0_20px_rgba(0,0,255,0.5)] opacity-60"
           />
-        </motion.div>
+        </div>
       </div>
 
       <div className="crt-overlay pointer-events-none absolute inset-0 z-40"></div>

package/templates/BlueGlitch.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
 import Link from "next/link";
 import { cn } from "@/components/ui/cn";
 
@@ -128,71 +127,74 @@ const BlueGlitch = ({
           0% { bottom: 100%; }
           100% { bottom: -100px; }
         }
+
+        @keyframes appear {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+
+        .animate-appear {
+          animation: appear 0.5s ease-out forwards;
+        }
       `}</style>
 
-      <div className="crt-container max-w-5xl h-[80vh] border-8 border-double border-[#bbb]/20 rounded-lg overflow-hidden flex flex-col items-center justify-center">
+      <div className="crt-container w-full max-w-5xl h-[85vh] sm:h-[80vh] border-4 sm:border-8 border-double border-[#bbb]/20 rounded-lg overflow-hidden flex flex-col items-center justify-center m-4">
         <div className="scanline" />
         
-        <div className="w-full max-w-3xl dos-font text-xs sm:text-lg lg:text-xl space-y-4">
-          <div className="text-center mb-8">
-            <motion.div 
-              initial={{ scale: 0.9, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              className="inline-block"
+        <div className="w-full max-w-[90%] sm:max-w-3xl dos-font text-[10px] xs:text-xs sm:text-lg lg:text-xl space-y-3 sm:space-y-4">
+          <div className="text-center mb-6 sm:mb-8">
+            <div 
+              className="inline-block animate-appear"
             >
-              <div className="inverted-box text-3xl sm:text-5xl font-bold py-2 px-6">
+              <div className="inverted-box text-xl xs:text-2xl sm:text-5xl font-bold py-1.5 xs:py-2 px-4 xs:px-6">
                 WINDOWS
               </div>
-            </motion.div>
+            </div>
           </div>
 
-          <AnimatePresence>
+          <div>
             {bootStep >= 1 && (
-              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+              <div className="animate-appear">
                 A fatal exception 404 has occurred at C0DE:ABAD1DEA.
-              </motion.div>
+              </div>
             )}
             
             {bootStep >= 2 && (
-              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+              <div className="animate-appear">
                 * The system could not find the file you requested.
-              </motion.div>
+              </div>
             )}
 
             {bootStep >= 3 && (
-              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+              <div className="animate-appear">
                 * Press ANY BUTTON to try finding it again in the void.
-              </motion.div>
+              </div>
             )}
 
             {bootStep >= 4 && (
-              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+              <div className="animate-appear">
                 * Contact your network administrator if this continues.
-              </motion.div>
+              </div>
             )}
 
             {bootStep >= 5 && (
-              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="pt-8">
+              <div className="pt-8 animate-appear">
                 Current State: <span className="text-red-500 underline">ERROR_PAGE_NOT_FOUND</span>
-              </motion.div>
+              </div>
             )}
 
             {bootStep >= 6 && (
-              <motion.div 
-                initial={{ opacity: 0 }} 
-                animate={{ opacity: 1 }}
-                className="text-center pt-12"
+              <div 
+                className="text-center pt-12 animate-appear"
               >
                 Press any button to return home
                 <span className="inline-block w-3 h-6 bg-[#bbb] ml-2 animate-pulse align-middle" />
-              </motion.div>
+              </div>
             )}
 
             {bootStep >= 7 && (
-              <motion.div 
-                initial={{ opacity: 0, y: 20 }} 
-                animate={{ opacity: 1, y: 0 }}
-                className="flex justify-center pt-8"
+              <div 
+                className="flex justify-center pt-8 animate-appear"
               >
                 <Link
                   href="/"
@@ -200,9 +202,9 @@ const BlueGlitch = ({
                 >
                   Return to Safety
                 </Link>
-              </motion.div>
+              </div>
             )}
-          </AnimatePresence>
+          </div>
         </div>
 
         <div className="absolute bottom-4 left-4 opacity-30 text-[10px] dos-font uppercase tracking-tighter">