404lab 2.0.2 → 2.0.4

package/templates/Google.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { motion } from "framer-motion";
 import Link from "next/link";
 import { cn } from "@/components/ui/cn";
 import Image from "next/image";
@@ -14,76 +13,91 @@ const Google = ({ className }: { className?: string }) => {
         className
       )}
     >
-      <div className="absolute top-10 left-10 md:left-20">
+      <div className="absolute top-6 sm:top-10 left-6 sm:left-10 md:left-20">
         <Image
           src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"
           alt="Google"
           width={92}
           height={30}
-          className="opacity-80"
+          className="opacity-80 scale-90 sm:scale-100"
         />
       </div>
 
+      <style jsx global>{`
+        @keyframes fadeInSlide {
+          from { opacity: 0; transform: translateX(-30px); }
+          to { opacity: 1; transform: translateX(0); }
+        }
+        
+        @keyframes floatRotate {
+          0% { transform: translateY(0) rotate(0deg); }
+          25% { transform: translateY(-15px) rotate(-2deg); }
+          50% { transform: translateY(0) rotate(0deg); }
+          75% { transform: translateY(-15px) rotate(2deg); }
+          100% { transform: translateY(0) rotate(0deg); }
+        }
+
+        @keyframes popIn {
+          from { opacity: 0; transform: scale(0.8) rotate(10deg); }
+          to { opacity: 1; transform: scale(1) rotate(0deg); }
+        }
+
+        .animate-fade-in {
+          animation: fadeInSlide 0.8s ease-out forwards;
+          opacity: 0;
+        }
+
+        .animate-pop-in {
+          animation: popIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+          opacity: 0;
+          animation-delay: 200ms;
+        }
+
+        .animate-float {
+          animation: floatRotate 6s ease-in-out infinite;
+        }
+      `}</style>
       <div className="w-full max-w-5xl px-8 flex flex-col md:flex-row items-center justify-between gap-16 text-center md:text-left z-10">
-        <motion.div
-          initial={{ opacity: 0, x: -30 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 0.8, ease: "easeOut" }}
-          className="max-w-md"
+        <div
+          className="max-w-md animate-fade-in px-4"
         >
-          <h1 className="text-2xl md:text-3xl font-medium text-[#3c4043] mb-4">
-            <span className="font-bold text-4xl block mb-2">404.</span>
+          <h1 className="text-xl sm:text-2xl md:text-3xl font-medium text-[#3c4043] mb-4">
+            <span className="font-bold text-3xl sm:text-4xl block mb-2">404.</span>
             That&apos;s an error.
           </h1>
-          <p className="text-[#70757a] text-lg leading-relaxed mb-10">
+          <p className="text-[#70757a] text-base sm:text-lg leading-relaxed mb-8 sm:mb-10">
             The requested URL was not found on this server.{" "}
             <span className="text-[#3c4043] font-medium italic">That&apos;s all we know.</span>
           </p>
 
-          <div className="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
+          <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center md:justify-start">
             <Link
               href="/"
-              className="px-8 py-3 bg-[#1a73e8] text-white font-medium rounded-md hover:bg-[#185abc] hover:shadow-md transition-all active:scale-95"
+              className="px-8 py-3 bg-[#1a73e8] text-white font-medium rounded-md hover:bg-[#185abc] hover:shadow-md transition-all active:scale-95 text-center"
             >
               Back to Safety
             </Link>
-            <button className="px-8 py-3 text-[#1a73e8] font-medium rounded-md hover:bg-[#f1f3f4] transition-all">
+            <button className="px-8 py-3 text-[#1a73e8] font-medium rounded-md hover:bg-[#f1f3f4] transition-all text-center">
               Try a search
             </button>
           </div>
-        </motion.div>
+        </div>
 
-        <motion.div
-          initial={{ opacity: 0, scale: 0.8, rotate: 10 }}
-          animate={{ opacity: 1, scale: 1, rotate: 0 }}
-          transition={{ 
-            duration: 1, 
-            type: "spring", 
-            stiffness: 100,
-            delay: 0.2
-          }}
-          className="relative group"
+        <div
+          className="relative group animate-pop-in"
         >
-          <motion.div
-            animate={{ 
-              y: [0, -15, 0],
-              rotate: [0, -2, 2, 0]
-            }}
-            transition={{ 
-              duration: 6, 
-              repeat: Infinity, 
-              ease: "easeInOut" 
-            }}
+          <div
+            className="animate-float"
           >
             <img
               src="https://www.google.com/images/errors/robot.png"
               alt="Broken robot"
               className="w-[280px] md:w-[350px] h-auto drop-shadow-[0_20px_40px_rgba(0,0,0,0.1)] group-hover:drop-shadow-[0_30px_60px_rgba(0,0,0,0.15)] transition-all"
             />
-          </motion.div>
+          </div>
           
           <div className="absolute -z-10 bottom-4 left-1/2 -translate-x-1/2 w-32 h-6 bg-black opacity-[0.05] rounded-full blur-xl scale-x-150 animate-pulse" />
-        </motion.div>
+        </div>
       </div>
 
       <div className="absolute -bottom-24 -left-24 w-64 h-64 bg-[#4285F4] opacity-[0.03] rounded-full blur-3xl animate-pulse" />

package/templates/MacOs.tsx

@@ -2,7 +2,6 @@
 
 import { useEffect, useRef, useState, KeyboardEvent } from "react";
 import { useRouter } from "next/navigation";
-import { motion, AnimatePresence } from "framer-motion";
 import { cn } from "@/components/ui/cn";
 
 type OutputLine = {
@@ -30,8 +29,11 @@ const MacOs = ({ className }: { className?: string }) => {
   }, []);
 
   useEffect(() => {
-    if (bootDone && inputRef.current && window.self === window.top) {
-      inputRef.current.focus();
+    if (bootDone && inputRef.current) {
+      const isIframe = typeof window !== 'undefined' && window.self !== window.top;
+      if (!isIframe) {
+        inputRef.current.focus({ preventScroll: true });
+      }
     }
   }, [bootDone]);
 
@@ -72,80 +74,73 @@ const MacOs = ({ className }: { className?: string }) => {
         <div className="absolute bottom-[-10%] left-[-10%] w-[500px] h-[500px] bg-blue-600/10 rounded-full blur-[120px]" />
       </div>
 
-      <motion.div 
-        initial={{ opacity: 0, y: 40, scale: 0.95 }}
-        animate={{ opacity: 1, y: 0, scale: 1 }}
-        transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
-        className="w-full max-w-4xl mx-4 z-10"
+      <div 
+        className="w-full max-w-4xl mx-auto px-4 z-10 animate-fade-in-scale"
       >
         <div className="rounded-xl overflow-hidden shadow-[0_30px_100px_rgba(0,0,0,0.6)] border border-white/10 backdrop-blur-3xl bg-[#1c1c1e]/80">
-          <div className="flex items-center justify-between px-4 py-3 bg-white/5 border-b border-white/5">
-            <div className="flex items-center gap-2">
-              <div className="w-3.5 h-3.5 rounded-full bg-[#ff5f57] shadow-inner" />
-              <div className="w-3.5 h-3.5 rounded-full bg-[#febc2e] shadow-inner" />
-              <div className="w-3.5 h-3.5 rounded-full bg-[#28c840] shadow-inner" />
+          <div className="flex items-center justify-between px-4 py-2 sm:py-3 bg-white/5 border-b border-white/5">
+            <div className="flex items-center gap-1.5 sm:gap-2">
+              <div className="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-[#ff5f57] shadow-inner" />
+              <div className="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-[#febc2e] shadow-inner" />
+              <div className="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-[#28c840] shadow-inner" />
             </div>
-            <div className="text-[13px] text-white/40 font-medium tracking-wide">
+            <div className="text-[11px] sm:text-[13px] text-white/40 font-medium tracking-wide truncate px-2">
               guest — zsh — 80×24
             </div>
-            <div className="w-12" />
+            <div className="w-8 sm:w-12" />
           </div>
 
-          <div
-            ref={terminalRef}
-            onClick={() => inputRef.current?.focus()}
-            className="p-6 h-[500px] overflow-y-auto custom-scrollbar text-[14px] leading-relaxed selection:bg-blue-500/30"
-          >
-            <AnimatePresence>
-              {output.map((line, i) => (
-                <motion.div 
-                  key={i}
-                  initial={{ opacity: 0, x: -5 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  className="mb-1"
-                >
-                  {line.type === "command" && (
-                    <div className="flex items-center gap-2">
-                      <span className="text-[#32d74b] font-bold">➜</span>
-                      <span className="text-[#64d2ff] font-bold">~</span>
-                      <span className="text-white">{line.text}</span>
-                    </div>
-                  )}
-                  {line.type === "output" && (
-                    <div className="text-white/80 pl-6">{line.text}</div>
-                  )}
-                  {line.type === "system" && (
-                    <div className="text-white/40 italic">{line.text}</div>
-                  )}
-                  {line.type === "error" && (
-                    <div className="text-[#ff453a] pl-6 font-medium">{line.text}</div>
-                  )}
-                  {line.type === "warning" && (
-                    <div className="text-[#febc2e] pl-6">{line.text}</div>
-                  )}
-                </motion.div>
-              ))}
-            </AnimatePresence>
-
-            {bootDone && (
-              <div className="flex items-center gap-2 mt-1">
-                <span className="text-[#32d74b] font-bold">➜</span>
-                <span className="text-[#64d2ff] font-bold">~</span>
-                <input
-                  ref={inputRef}
-                  value={input}
-                  onChange={(e) => setInput(e.target.value)}
-                  onKeyDown={(e) => e.key === "Enter" && runCommand(input)}
-                  className="bg-transparent border-none outline-none flex-1 text-white caret-[#32d74b]"
-                  spellCheck={false}
-                />
+            <div
+              ref={terminalRef}
+              onClick={() => inputRef.current?.focus()}
+              className="p-4 sm:p-6 h-[400px] sm:h-[500px] overflow-y-auto custom-scrollbar text-[12px] sm:text-[14px] leading-relaxed selection:bg-blue-500/30"
+            >
+              <div>
+                {output.map((line, i) => (
+                  <div 
+                    key={i}
+                    className="mb-1 animate-fade-in-left"
+                  >
+                    {line.type === "command" && (
+                      <div className="flex items-center gap-2">
+                        <span className="text-[#32d74b] font-bold">➜</span>
+                        <span className="text-[#64d2ff] font-bold">~</span>
+                        <span className="text-white break-all">{line.text}</span>
+                      </div>
+                    )}
+                    {line.type === "output" && (
+                      <div className="text-white/80 pl-5 sm:pl-6 break-words">{line.text}</div>
+                    )}
+                    {line.type === "system" && (
+                      <div className="text-white/40 italic break-words">{line.text}</div>
+                    )}
+                    {line.type === "error" && (
+                      <div className="text-[#ff453a] pl-5 sm:pl-6 font-medium break-words">{line.text}</div>
+                    )}
+                    {line.type === "warning" && (
+                      <div className="text-[#febc2e] pl-5 sm:pl-6 break-words">{line.text}</div>
+                    )}
+                  </div>
+                ))}
               </div>
-            )}
-          </div>
-        </div>
-
-      </motion.div>
 
+              {bootDone && (
+                <div className="flex items-center gap-2 mt-1">
+                  <span className="text-[#32d74b] font-bold">➜</span>
+                  <span className="text-[#64d2ff] font-bold">~</span>
+                  <input
+                    ref={inputRef}
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && runCommand(input)}
+                    className="bg-transparent border-none outline-none flex-1 text-white caret-[#32d74b] min-w-0"
+                    spellCheck={false}
+                  />
+                </div>
+              )}
+            </div>
+        </div>
+      </div>
       <style jsx>{`
         .custom-scrollbar::-webkit-scrollbar {
           width: 8px;
@@ -160,6 +155,25 @@ const MacOs = ({ className }: { className?: string }) => {
         .custom-scrollbar::-webkit-scrollbar-thumb:hover {
           background: rgba(255, 255, 255, 0.2);
         }
+
+        @keyframes fadeInScale {
+          from { opacity: 0; transform: translateY(40px) scale(0.95); }
+          to { opacity: 1; transform: translateY(0) scale(1); }
+        }
+
+        @keyframes fadeInLeft {
+          from { opacity: 0; transform: translateX(-5px); }
+          to { opacity: 1; transform: translateX(0); }
+        }
+
+        .animate-fade-in-scale {
+          animation: fadeInScale 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+          opacity: 0;
+        }
+
+        .animate-fade-in-left {
+          animation: fadeInLeft 0.2s ease-out forwards;
+        }
       `}</style>
     </main>
   );

package/templates/ModernPage.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "framer-motion";
+
 import Link from "next/link";
 import { cn } from "@/components/ui/cn";
 
@@ -18,36 +18,57 @@ const ModernPage = ({ className }: { className?: string }) => {
         <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-blue-900/20 blur-[120px] rounded-full animate-pulse [animation-delay:2s]" />
       </div>
 
-      <motion.div 
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.8, ease: "easeOut" }}
-        className="relative z-10 w-full max-w-2xl"
+      <style jsx global>{`
+        @keyframes fadeSlideUp {
+          from { opacity: 0; transform: translateY(20px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        
+        @keyframes scaleIn {
+          from { opacity: 0; transform: scale(0.9); }
+          to { opacity: 1; transform: scale(1); }
+        }
+
+        .animate-fade-slide-up {
+          animation: fadeSlideUp 0.8s ease-out forwards;
+          opacity: 0;
+        }
+
+        .animate-scale-in {
+          animation: scaleIn 0.5s ease-out forwards;
+          opacity: 0;
+          animation-delay: 200ms;
+        }
+
+        .animate-fade-slide-up-delayed {
+          animation: fadeSlideUp 0.8s ease-out forwards;
+          opacity: 0;
+          animation-delay: 400ms;
+        }
+      `}</style>
+      
+      <div 
+        className="relative z-10 w-full max-w-2xl animate-fade-slide-up"
       >
-        <div className="bg-white/[0.03] backdrop-blur-xl border border-white/10 rounded-[2.5rem] p-12 md:p-20 text-center shadow-2xl overflow-hidden group">
+        <div className="bg-white/[0.03] backdrop-blur-xl border border-white/10 rounded-[1.5rem] sm:rounded-[2.5rem] p-8 sm:p-12 md:p-20 text-center shadow-2xl overflow-hidden group">
           <div className="absolute inset-0 bg-gradient-to-br from-white/[0.05] to-transparent pointer-events-none" />
           
-          <motion.div
-            initial={{ scale: 0.9, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            transition={{ delay: 0.2, duration: 0.5 }}
-            className="relative inline-block mb-8"
+          <div
+            className="relative inline-block mb-6 sm:mb-8 animate-scale-in"
           >
-            <h1 className="text-[8rem] md:text-[12rem] font-black leading-none tracking-tighter bg-gradient-to-b from-white to-white/20 bg-clip-text text-transparent select-none">
+            <h1 className="text-[6rem] sm:text-[10rem] md:text-[12rem] font-black leading-none tracking-tighter bg-gradient-to-b from-white to-white/20 bg-clip-text text-transparent select-none">
               404
             </h1>
             <div className="absolute -inset-4 bg-white/5 blur-3xl rounded-full z-[-1] group-hover:bg-white/10 transition-colors" />
-          </motion.div>
+          </div>
 
-          <motion.div
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.4 }}
+          <div
+            className="animate-fade-slide-up-delayed"
           >
-            <h2 className="text-2xl md:text-3xl font-bold text-white mb-4 tracking-tight">
+            <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-white mb-3 sm:mb-4 tracking-tight">
               Lost in the Digital Ether.
             </h2>
-            <p className="text-gray-400 text-lg mb-12 max-w-md mx-auto leading-relaxed">
+            <p className="text-gray-400 text-base sm:text-lg mb-8 sm:mb-12 max-w-md mx-auto leading-relaxed">
               The page you are seeking has drifted beyond our reach. 
               Let&apos;s navigate you back to solid ground.
             </p>
@@ -55,15 +76,15 @@ const ModernPage = ({ className }: { className?: string }) => {
             <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
               <Link
                 href="/"
-                className="w-full sm:w-auto px-10 py-4 bg-white text-black font-bold rounded-2xl hover:bg-gray-200 transition-all transform hover:-translate-y-1 active:scale-95 shadow-xl shadow-white/5"
+                className="w-full sm:w-auto px-8 sm:px-10 py-3.5 sm:py-4 bg-white text-black font-bold rounded-xl sm:rounded-2xl hover:bg-gray-200 transition-all transform hover:-translate-y-1 active:scale-95 shadow-xl shadow-white/5"
               >
                 Go Home
               </Link>
-              <button className="w-full sm:w-auto px-10 py-4 border border-white/10 text-white font-bold rounded-2xl hover:bg-white/5 transition-all active:scale-95">
+              <button className="w-full sm:w-auto px-8 sm:px-10 py-3.5 sm:py-4 border border-white/10 text-white font-bold rounded-xl sm:rounded-2xl hover:bg-white/5 transition-all active:scale-95">
                 Take a Tour
               </button>
             </div>
-          </motion.div>
+          </div>
         </div>
         
         <div className="mt-12 flex justify-center gap-8 text-[10px] text-white/20 font-bold uppercase tracking-[0.3em]">
@@ -73,7 +94,7 @@ const ModernPage = ({ className }: { className?: string }) => {
           <span>•</span>
           <span>Stable Connection</span>
         </div>
-      </motion.div>
+      </div>
     </div>
   );
 };

package/templates/Particles.tsx

@@ -5,7 +5,6 @@ import Particles, { initParticlesEngine } from "@tsparticles/react";
 import { loadSlim } from "@tsparticles/slim";
 import { type Container, type ISourceOptions } from "@tsparticles/engine";
 import { cn } from "@/components/ui/cn";
-import { motion } from "framer-motion";
 import Link from "next/link";
 
 const Custom404Clean = ({
@@ -148,28 +147,46 @@ const Custom404Clean = ({
         />
       )}
 
-      <motion.div 
-        initial={{ opacity: 0, scale: 0.9 }}
-        animate={{ opacity: 1, scale: 1 }}
-        transition={{ duration: 1, ease: "easeOut" }}
-        className="relative z-10 text-center px-6"
+      <style jsx global>{`
+        @keyframes fadeInScale {
+          from { opacity: 0; transform: scale(0.9); }
+          to { opacity: 1; transform: scale(1); }
+        }
+        
+        @keyframes slideUpFade {
+          from { opacity: 0; transform: translateY(20px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+
+        .animate-fade-in-scale {
+          animation: fadeInScale 1s ease-out forwards;
+          opacity: 0;
+        }
+
+        .animate-slide-up-fade {
+          animation: slideUpFade 0.8s ease-out forwards;
+          opacity: 0;
+          animation-delay: 500ms;
+        }
+      `}</style>
+
+      <div 
+        className="relative z-10 text-center px-6 animate-fade-in-scale"
       >
-        <div className="relative inline-block mb-12">
-          <h1 className="text-[12rem] sm:text-[18rem] font-black tracking-tighter leading-none text-transparent bg-clip-text bg-gradient-to-b from-[#ffd700] to-transparent opacity-80">
+        <div className="relative inline-block mb-8 sm:mb-12">
+          <h1 className="text-[8rem] sm:text-[12rem] md:text-[18rem] font-black tracking-tighter leading-none text-transparent bg-clip-text bg-gradient-to-b from-[#ffd700] to-transparent opacity-80">
             404
           </h1>
-          <div className="absolute -inset-8 bg-[#ffd700]/10 blur-[100px] rounded-full z-[-1]" />
+          <div className="absolute -inset-4 sm:-inset-8 bg-[#ffd700]/10 blur-[60px] sm:blur-[100px] rounded-full z-[-1]" />
         </div>
 
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.5 }}
+        <div
+          className="animate-slide-up-fade"
         >
-          <h2 className="text-2xl sm:text-4xl font-bold mb-6 tracking-tight text-white/90">
+          <h2 className="text-xl sm:text-3xl md:text-4xl font-bold mb-4 sm:mb-6 tracking-tight text-white/90">
             Lost in the Golden Void
           </h2>
-          <p className="text-white/40 text-lg mb-12 max-w-lg mx-auto leading-relaxed">
+          <p className="text-white/40 text-base sm:text-lg mb-8 sm:mb-12 max-w-xs sm:max-w-lg mx-auto leading-relaxed">
             The coordinates you provided lead to a region of space that remains uncharted.
           </p>
 
@@ -181,10 +198,10 @@ const Custom404Clean = ({
               Return to Base
             </Link>
           </div>
-        </motion.div>
-      </motion.div>
+        </div>
+      </div>
 
-      <div className="absolute bottom-10 left-10 text-[10px] text-white/20 font-bold uppercase tracking-widest vertical-text">
+      <div className="absolute bottom-6 sm:bottom-10 left-6 sm:left-10 text-[8px] sm:text-[10px] text-white/20 font-bold uppercase tracking-widest vertical-text hidden xs:block">
         Stellar Navigation System // Active
       </div>
     </div>