404lab 2.0.1 → 2.0.2

package/templates/Particles.tsx

@@ -1,89 +1,195 @@
 "use client";
 
-import { useEffect } from "react";
-import { tsParticles } from "tsparticles-engine";
-import { loadPolygonPath } from "tsparticles-path-polygon";
+import { useEffect, useState } from "react";
+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 = ({
+  fullScreen = true,
+  className,
+}: {
+  fullScreen?: boolean;
+  className?: string;
+}) => {
+  const [init, setInit] = useState(false);
 
-const Custom404Clean = () => {
   useEffect(() => {
-    const init = async () => {
-      await loadPolygonPath(tsParticles);
+    initParticlesEngine(async (engine) => {
+      await loadSlim(engine);
+    }).then(() => {
+      setInit(true);
+    });
+  }, []);
 
-      await tsParticles.load("tsparticles", {
-        background: {
-          color: "#000",
+  const particlesLoaded = async (container?: Container): Promise<void> => {
+    // console.log(container);
+  };
+
+  const options: ISourceOptions = {
+    background: {
+      color: "#050505",
+    },
+    fullScreen: {
+      enable: fullScreen,
+      zIndex: 0,
+    },
+    fpsLimit: 120,
+    particles: {
+      number: {
+        value: 80,
+        density: {
+          enable: true,
+          width: 800,
+          height: 800,
         },
-        fullScreen: {
+      },
+      color: {
+        value: "#ffd700",
+      },
+      shape: {
+        type: "circle",
+      },
+      opacity: {
+        value: {
+          min: 0.1,
+          max: 0.5,
+        },
+        animation: {
           enable: true,
-          zIndex: -1,
+          speed: 1,
+          sync: false,
         },
-        particles: {
-          color: {
-            value: "#ffd966",
-          },
-          number: {
-            value: 0,
-          },
-          size: {
-            value: 2,
-          },
-          opacity: {
-            value: 1,
-          },
-          shape: {
-            type: "circle",
-          },
-          move: {
-            enable: true,
-            speed: 6,
-            path: {
-              enable: true,
-              generator: "polygonPathGenerator",
-              options: {
-                sides: 6,
-                turnSteps: 30,
-                angle: 30,
-              },
-            },
-            trail: {
-              enable: true,
-              length: 20,
-              fillColor: "#000",
-            },
-          },
+      },
+      size: {
+        value: {
+          min: 0.1,
+          max: 3,
         },
-        emitters: {
-          rate: {
-            quantity: 1,
-            delay: 0.25,
+        animation: {
+          enable: true,
+          speed: 2,
+          sync: false,
+        },
+      },
+      links: {
+        enable: true,
+        distance: 150,
+        color: "#ffd700",
+        opacity: 0.2,
+        width: 1,
+      },
+      move: {
+        enable: true,
+        speed: 1,
+        direction: "none",
+        random: false,
+        straight: false,
+        outModes: {
+          default: "out",
+        },
+        attract: {
+          enable: true,
+          rotate: {
+            x: 600,
+            y: 1200,
           },
-          position: {
-            x: 50,
-            y: 50,
+        },
+      },
+    },
+    interactivity: {
+      detectsOn: "canvas",
+      events: {
+        onHover: {
+          enable: true,
+          mode: "grab",
+        },
+        onClick: {
+          enable: true,
+          mode: "push",
+        },
+        resize: {
+          enable: true,
+          delay: 0.5,
+        },
+      },
+      modes: {
+        grab: {
+          distance: 140,
+          links: {
+            opacity: 0.5,
           },
         },
-      });
-    };
-
-    init();
-  }, []);
+        push: {
+          quantity: 4,
+        },
+      },
+    },
+    detectRetina: true,
+  };
 
   return (
-    <div className="relative flex h-screen w-screen items-center justify-center bg-black text-white font-mono">
-      <div id="tsparticles" />
+    <div
+      className={cn(
+        "relative flex items-center justify-center bg-black text-white overflow-hidden select-none",
+        fullScreen ? "h-screen w-full" : "h-full w-full",
+        className
+      )}
+    >
+      {init && (
+        <Particles
+          id="tsparticles"
+          particlesLoaded={particlesLoaded}
+          options={options}
+          className="absolute inset-0 z-0"
+        />
+      )}
 
-      <div
-        data-content="404"
-        className="text-[25vw] relative animate-glitch 
-          before:content-[attr(data-content)] before:absolute before:left-0 
-          before:animate-glitchTop before:[clip-path:polygon(0_0,100%_0,100%_33%,0_33%)]
-          after:content-[attr(data-content)] after:absolute after:left-0 
-          after:animate-glitchBottom after:[clip-path:polygon(0_67%,100%_67%,100%_100%,0_100%)]"
+      <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"
       >
-        404
+        <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">
+            404
+          </h1>
+          <div className="absolute -inset-8 bg-[#ffd700]/10 blur-[100px] rounded-full z-[-1]" />
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.5 }}
+        >
+          <h2 className="text-2xl sm:text-4xl font-bold 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">
+            The coordinates you provided lead to a region of space that remains uncharted.
+          </p>
+
+          <div className="flex flex-col sm:flex-row gap-6 justify-center">
+            <Link
+              href="/"
+              className="px-10 py-4 bg-[#ffd700] text-black font-bold rounded-full hover:bg-[#ffed4a] transition-all transform hover:-translate-y-1 active:scale-95 shadow-xl shadow-[#ffd700]/20"
+            >
+              Return to Base
+            </Link>
+          </div>
+        </motion.div>
+      </motion.div>
+
+      <div className="absolute bottom-10 left-10 text-[10px] text-white/20 font-bold uppercase tracking-widest vertical-text">
+        Stellar Navigation System // Active
       </div>
     </div>
   );
 };
 
 export default Custom404Clean;
+

package/templates/Poet.tsx

@@ -1,71 +1,156 @@
 "use client";
 
+import { motion } from "framer-motion";
 import Link from "next/link";
-import Image from "next/image";
+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 } }
+  };
 
-const Poet = () => {
   return (
-    <main className="min-h-screen bg-[#777] flex items-center justify-center p-4">
-      <div className="max-w-5xl w-full border-2 border-black bg-black text-white">
-        <div className="bg-[#d0d0d0] text-black px-4 py-3 border-b-2 border-black font-mono">
-          <div className="text-xl font-bold">
-            404 &raquo; Document Not Found
-          </div>
-          <div className="text-sm mt-1">
-            The requested document{" "}
-            <span className="font-semibold">&quot;/missing.pdf&quot;</span> does
-            not exist.
-          </div>
-          <div className="mt-2 text-sm">
-            <Link href="/" className="underline font-semibold">
-              GO Back
-            </Link>{" "}
-            - or -{" "}
-            <Link href="/" className="underline font-semibold">
-              GO Home
-            </Link>
-          </div>
-        </div>
+    <div
+      className={cn(
+        "min-h-screen bg-[#1a1a1a] flex items-center justify-center p-6 relative overflow-hidden font-serif",
+        className
+      )}
+    >
+      <style jsx global>{`
+        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&display=swap');
+        
+        .gothic-font {
+          font-family: 'Playfair Display', serif;
+        }
+
+        .parchment {
+          background-color: #f4ecd8;
+          background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
+          box-shadow: 
+            inset 0 0 100px rgba(0,0,0,0.1),
+            0 20px 50px rgba(0,0,0,0.5);
+          position: relative;
+        }
 
-        <div className="flex flex-col md:flex-row">
-          <div className="flex-1 p-6 font-serif leading-snug text-lg">
-            <p>Once upon a midnight dreary,</p>
-            <p>While I web surfed, weak and weary,</p>
-            <p>For pages long forgotten yore.</p>
-            <p>When I clicked my fav&apos;rite href,</p>
-            <p>Suddenly there came a warning,</p>
-            <p>and my heart was filled with mourning,</p>
+        .parchment::after {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background: radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.05) 100%);
+          pointer-events: none;
+        }
+      `}</style>
 
-            <p className="mt-4 text-2xl">
-              Mourning for my dear{" "}
-              <span className="italic">&quot;/missing.pdf&quot;</span>,
-            </p>
+      <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]"
+      >
+        <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>
 
-            <p className="mt-4">&quot;Tis not possible!&quot; I muttered,</p>
+      <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="flex-1 gothic-font">
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            animate="visible"
+            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">
+              // Archive: /missing.pdf
+            </motion.p>
 
-            <p className="text-3xl mt-2">
+            <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>
+            
+            <motion.p variants={lineVariants} className="pt-4 text-xl md:text-2xl italic font-medium">
+              Mourning for my dear &quot;/missing.pdf&quot;,
+            </motion.p>
+
+            <motion.p variants={lineVariants} className="pt-4">&quot;Tis not possible!&quot; I muttered,</motion.p>
+            
+            <motion.p variants={lineVariants} className="text-2xl md:text-3xl font-bold leading-tight">
               &quot;Give thine pages, I implore!&quot;
-            </p>
+            </motion.p>
 
-            <p className="text-4xl mt-6">
-              Quoth the server, <span className="font-bold">404</span>.
-            </p>
-          </div>
+            <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">
+                Quoth the server, &quot;Nevermore.&quot;
+              </p>
+            </motion.div>
+          </motion.div>
 
-          <div className="w-full md:w-[320px] bg-black flex items-center justify-center p-4">
-            <Image
-              src="/raven.png"
-              alt="Raven"
-              width={320}
-              height={420}
-              className="max-h-105 object-contain opacity-90"
-              priority
-            />
-          </div>
+          <motion.div 
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 3 }}
+            className="mt-12 flex gap-6"
+          >
+            <Link 
+              href="/"
+              className="px-6 py-2 border-b-2 border-[#8b0000] text-[#8b0000] font-bold hover:bg-[#8b0000]/5 transition-all active:scale-95"
+            >
+              Back to Light
+            </Link>
+            <button className="px-6 py-2 text-[#2c241a]/60 font-bold hover:text-[#2c241a] transition-all">
+              Mourn Again
+            </button>
+          </motion.div>
         </div>
-      </div>
-    </main>
+
+        <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"
+          >
+            <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" />
+              <path fill="currentColor" d="M100 40 C110 40 130 50 130 80 C130 110 110 140 100 150 C90 140 70 110 70 80 C70 50 90 40 100 40 Z" />
+              <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>
+      </motion.div>
+    </div>
   );
 };
 
 export default Poet;
+