404lab 2.0.1 → 2.0.2

package/cli/core/templates.js

@@ -21,6 +21,7 @@ export const TEMPLATES = {
   snow: "Snow",
   strangethings: "StrangerThings",
   terminal: "Terminal404",
+  vercel: "Vercel"
 };
 
 export function getTemplateKeys() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "404lab",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A CLI tool for generating beautiful custom 404 pages in Next.js projects",
   "type": "module",
   "preferGlobal": true,
@@ -20,13 +20,13 @@
     "generator",
     "templates"
   ],
-  "author": "Your Name <your.email@example.com>",
+  "author": "Shreeteja Mutukundu <smutukundu2206@gmail.com>",
   "license": "MIT",
   "engines": {
     "node": ">=16.0.0"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/yourusername/404lab.git"
+    "url": "https://github.com/shreeteja172/404lab.git"
   }
 }

package/templates/AmongUs.tsx

@@ -1,152 +1,246 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { motion } from "framer-motion";
+import { cn } from "@/components/ui/cn";
 
-const AmongUs = () => {
+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 }[]>([]);
 
   useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const createStar = () => {
-      const { width, height } = container.getBoundingClientRect();
-      let right = Math.random() * Math.max(width, 1);
-      const top = Math.random() * Math.max(height, 1);
-
-      const star = document.createElement("div");
-      star.className =
-        "star pointer-events-none absolute w-[2px] h-[2px] bg-white animate-starTwinkle";
-      star.style.top = `${top}px`;
-      star.style.right = `${right}px`;
-
-      container.appendChild(star);
-
-      const runStar = setInterval(() => {
-        if (right >= width) {
-          star.remove();
-          clearInterval(runStar);
-        }
-        right += 3;
-        star.style.right = `${right}px`;
-      }, 10);
-    };
+    const initialStars = Array.from({ length: 100 }).map((_, i) => ({
+      id: i,
+      x: Math.random() * 100,
+      y: Math.random() * 100,
+      size: Math.random() * 2 + 0.5,
+      speed: Math.random() * 1.5 + 0.5,
+      opacity: Math.random() * 0.7 + 0.3,
+    }));
+    setStars(initialStars);
+  }, []);
 
-    const starInterval = setInterval(createStar, 120);
+  const typewriterVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.08,
+      },
+    },
+  };
 
-    return () => {
-      clearInterval(starInterval);
-      container.querySelectorAll(".star").forEach((s) => s.remove());
-    };
-  }, []);
+  const letterVariants = {
+    hidden: { opacity: 0, y: 5 },
+    visible: { opacity: 1, y: 0 },
+  };
+
+  const text = "There is 1 Impostor among us";
 
   return (
     <div
       ref={containerRef}
-      className="relative flex h-screen w-full items-center justify-center overflow-hidden bg-gradient-to-t from-[#2e1753] via-[#1f1746] to-[#050819] text-white font-['Tomorrow']"
+      className={cn(
+        "relative flex h-screen w-full flex-col items-center justify-center overflow-hidden bg-[#000000] text-white",
+        className
+      )}
     >
-      <div className="absolute top-[8%] text-center">
-        <p className="text-red-400 tracking-[0.3em] text-sm">
-          THERE IS 1 IMPOSTOR AMONG US
-        </p>
-        <h1 className="text-7xl font-extrabold mt-2">404</h1>
-        <p className="mt-2 opacity-80">This page was ejected into space.</p>
-
-        <Link
-          href="/"
-          className="inline-block mt-6 rounded-md bg-red-500 px-5 py-2 text-sm font-semibold hover:opacity-90 transition"
-        >
-          Return to Ship
-        </Link>
-      </div>
-
-      <Image
-        src="https://cdn.iconscout.com/icon/free/png-256/free-red-among-us-icon-svg-download-png-2691060.png"
-        alt="Impostor"
-        width={120}
-        height={120}
-        unoptimized
-        className="absolute top-[55%] w-24 h-auto animate-astronautFly"
-      />
-
-      <Image
-        src="https://cdn.iconscout.com/icon/free/png-256/free-blue-among-us-icon-svg-download-png-2691064.png"
-        alt="Crewmate"
-        width={120}
-        height={120}
-        unoptimized
-        className="absolute bottom-[10%] left-[15%] w-24 h-auto animate-floatCrew"
-      />
-
       <style jsx global>{`
-        @keyframes astronautFly {
-          0% {
-            left: -120px;
-          }
-          25% {
-            top: 52%;
-            transform: rotate(10deg);
-          }
-          50% {
-            top: 58%;
-            transform: rotate(20deg);
-          }
-          75% {
-            top: 62%;
-            transform: rotate(10deg);
-          }
-          100% {
-            left: 110%;
-            transform: rotate(20deg);
-          }
+        @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
+        
+        .among-us-font {
+          font-family: 'VT323', monospace;
         }
 
-        @keyframes floatCrew {
-          0% {
-            transform: translateY(0px);
-          }
-          50% {
-            transform: translateY(-12px);
-          }
-          100% {
-            transform: translateY(0px);
-          }
+        .star-field {
+          position: absolute;
+          inset: 0;
+          pointer-events: none;
         }
 
-        @keyframes starTwinkle {
-          0% {
-            background: rgba(255, 255, 255, 0.4);
-          }
-          25% {
-            background: rgba(255, 255, 255, 0.8);
-          }
-          50% {
-            background: rgba(255, 255, 255, 1);
-          }
-          75% {
-            background: rgba(255, 255, 255, 0.8);
-          }
-          100% {
-            background: rgba(255, 255, 255, 0.4);
-          }
+        .star {
+          position: absolute;
+          background: white;
+          border-radius: 50%;
         }
 
-        .animate-astronautFly {
-          animation: astronautFly 7s linear infinite;
+        .crt-overlay::before {
+          content: " ";
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
+          z-index: 30;
+          background-size: 100% 3px, 3px 100%;
+          pointer-events: none;
         }
 
-        .animate-starTwinkle {
-          animation: starTwinkle 3s linear infinite;
+        .crt-scanline {
+          width: 100%;
+          height: 100px;
+          z-index: 31;
+          background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.05) 10%, rgba(0, 0, 0, 0.1) 100%);
+          opacity: 0.1;
+          position: absolute;
+          bottom: 100%;
+          animation: scanline 8s linear infinite;
         }
 
-        .animate-floatCrew {
-          animation: floatCrew 3s ease-in-out infinite;
+        @keyframes scanline {
+          0% { bottom: 100%; }
+          100% { bottom: -100px; }
         }
       `}</style>
+
+      <div className="star-field">
+        {stars.map((star) => (
+          <motion.div
+            key={star.id}
+            className="star"
+            style={{
+              width: star.size,
+              height: star.size,
+              top: `${star.y}%`,
+              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,
+            }}
+          />
+        ))}
+      </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" }}
+        >
+          404
+        </motion.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>
+            ))}
+          </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">
+            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>
+          
+          <motion.div 
+            className="pt-12"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 6.5, duration: 1 }}
+          >
+            <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"
+            >
+              Return to Ship
+            </Link>
+          </motion.div>
+        </motion.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" 
+          }}
+        >
+          <Image
+            src="https://cdn.iconscout.com/icon/free/png-256/free-red-among-us-icon-svg-download-png-2691060.png"
+            alt="Ejected Red"
+            width={250}
+            height={250}
+            unoptimized
+            className="drop-shadow-[0_0_20px_rgba(255,0,0,0.5)]"
+          />
+        </motion.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
+          }}
+        >
+          <Image
+            src="https://cdn.iconscout.com/icon/free/png-256/free-blue-among-us-icon-svg-download-png-2691064.png"
+            alt="Ejected Blue"
+            width={200}
+            height={200}
+            unoptimized
+            className="drop-shadow-[0_0_20px_rgba(0,0,255,0.5)] opacity-60"
+          />
+        </motion.div>
+      </div>
+
+      <div className="crt-overlay pointer-events-none absolute inset-0 z-40"></div>
+      <div className="crt-scanline z-50"></div>
+      <div className="absolute inset-0 pointer-events-none bg-[radial-gradient(circle_at_center,_transparent_0%,_rgba(0,0,0,0.7)_100%)] z-20"></div>
     </div>
   );
 };
 
 export default AmongUs;
+
+