404lab 2.0.1 → 2.0.2

package/templates/RetroTv.tsx

@@ -1,164 +1,216 @@
 "use client";
 
-import { useEffect, useRef } from "react";
-import Image from "next/image";
+import { useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "@/components/ui/cn";
 
-const RetroTv = () => {
+const RetroTv = ({ className }: { className?: string }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [isOn, setIsOn] = useState(false);
+  const [noiseIntensity, setNoiseIntensity] = useState(0.8);
+  const [channel, setChannel] = useState(404);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsOn(true), 500);
+    return () => clearTimeout(timer);
+  }, []);
 
   useEffect(() => {
     const canvas = canvasRef.current;
-    if (!canvas) return;
+    if (!canvas || !isOn) return;
 
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
-    const WIDTH = 700;
-    const HEIGHT = 500;
-
-    canvas.width = WIDTH;
-    canvas.height = HEIGHT;
-
-    ctx.fillStyle = "white";
-    ctx.fillRect(0, 0, WIDTH, HEIGHT);
-
-    const imgData = ctx.getImageData(0, 0, WIDTH, HEIGHT);
-    const pix = imgData.data;
-
-    const flicker = setInterval(() => {
-      for (let i = 0; i < pix.length; i += 4) {
-        const color = Math.random() * 255 + 50;
-        pix[i] = color;
-        pix[i + 1] = color;
-        pix[i + 2] = color;
+    let animationFrame: number;
+
+    const resize = () => {
+      canvas.width = canvas.offsetWidth;
+      canvas.height = canvas.offsetHeight;
+    };
+    resize();
+    window.addEventListener("resize", resize);
+
+    const render = () => {
+      const w = canvas.width;
+      const h = canvas.height;
+      const imageData = ctx.createImageData(w, h);
+      const data = imageData.data;
+
+      for (let i = 0; i < data.length; i += 4) {
+        const val = Math.random() * 255 * noiseIntensity;
+        data[i] = val;
+        data[i + 1] = val;
+        data[i + 2] = val;
+        data[i + 3] = 255;
       }
-      ctx.putImageData(imgData, 0, 0);
-    }, 30);
 
-    return () => clearInterval(flicker);
-  }, []);
+      ctx.putImageData(imageData, 0, 0);
+      animationFrame = requestAnimationFrame(render);
+    };
 
-  return (
-    <div className="relative h-screen w-screen overflow-hidden bg-black">
-      <h1 className="absolute left-1/2 top-1/2 z-3 -translate-x-1/2 -translate-y-1/2 text-[200px] font-bold text-transparent glitch-text">
-        404
-      </h1>
-
-      <div className="absolute inset-0 z-3 frame">
-        <div />
-        <div />
-        <div />
-      </div>
-
-      <div className="absolute inset-0 z-2 opacity-0 caps">
-        <Image
-          src="http://ademilter.com/caps.png"
-          alt="caps"
-          className="h-full w-full"
-          fill
-        />
-      </div>
-
-      <canvas
-        ref={canvasRef}
-        className="absolute left-0 top-0 z-1 h-full w-full"
-      />
+    render();
 
-      <style jsx>{`
-        .glitch-text {
-          animation: glitch 2s linear infinite;
-          text-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
-        }
-
-        @keyframes glitch {
-          0% {
-            text-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
-          }
-          33% {
-            text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
-          }
-          66% {
-            text-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-          }
-          100% {
-            text-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
-          }
-        }
+    return () => {
+      cancelAnimationFrame(animationFrame);
+      window.removeEventListener("resize", resize);
+    };
+  }, [isOn, noiseIntensity]);
 
-        .caps {
-          animation: capsFlicker 8s linear infinite;
-        }
-
-        @keyframes capsFlicker {
-          0% {
-            opacity: 0;
-          }
-          10% {
-            opacity: 0.3;
-          }
-          20% {
-            opacity: 0.1;
-          }
-          30% {
-            opacity: 0.5;
-          }
-          40% {
-            opacity: 0;
-          }
-          50% {
-            opacity: 0.8;
-          }
-          55% {
-            opacity: 0;
-          }
-          100% {
-            opacity: 0;
-          }
-        }
-
-        .frame {
-          background: radial-gradient(
-            ellipse at center,
-            rgba(0, 0, 0, 0) 0%,
-            rgba(0, 0, 0, 0) 19%,
-            rgba(0, 0, 0, 0.9) 100%
-          );
+  return (
+    <div
+      className={cn(
+        "min-h-screen bg-[#1a1a1a] flex items-center justify-center p-4 sm:p-8 font-mono overflow-hidden select-none",
+        className
+      )}
+    >
+      <style jsx global>{`
+        .crt-curve {
+          position: relative;
+          overflow: hidden;
+          background: #000;
         }
-
-        .frame div {
+        
+        .crt-curve::after {
+          content: " ";
+          display: block;
           position: absolute;
+          top: 0;
           left: 0;
-          top: -20%;
-          width: 100%;
-          height: 20%;
-          background-color: rgba(0, 0, 0, 0.12);
-          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-          animation: scanline 12s linear infinite;
+          bottom: 0;
+          right: 0;
+          background: linear-gradient(rgba(18, 16, 16, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.04));
+          z-index: 2;
+          background-size: 100% 4px, 6px 100%;
+          pointer-events: none;
         }
 
-        .frame div:nth-child(1) {
-          animation-delay: 0s;
+        .crt-curve::before {
+          content: " ";
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          background: radial-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.3) 100%), linear-gradient(to bottom, rgba(18, 16, 16, 0) 0%, rgba(18, 16, 16, 0.1) 50%, rgba(18, 16, 16, 0) 100%);
+          z-index: 2;
+          pointer-events: none;
         }
 
-        .frame div:nth-child(2) {
-          animation-delay: 4s;
+        .tv-frame {
+          box-shadow: 
+            inset 0 0 40px rgba(0,0,0,0.8),
+            0 0 100px rgba(0,0,0,0.5),
+            0 20px 50px rgba(0,0,0,0.4);
         }
 
-        .frame div:nth-child(3) {
-          animation-delay: 8s;
+        @keyframes scanline {
+          0% { transform: translateY(-100%); }
+          100% { transform: translateY(100%); }
         }
 
-        @keyframes scanline {
-          0% {
-            top: -20%;
-          }
-          100% {
-            top: 100%;
-          }
+        .scanline-overlay {
+          width: 100%;
+          height: 100px;
+          background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%);
+          position: absolute;
+          top: 0;
+          left: 0;
+          animation: scanline 8s linear infinite;
+          z-index: 3;
         }
       `}</style>
+
+      <div className="relative w-full max-w-4xl flex flex-col items-center">
+        <div className="w-full bg-[#2a2a2a] p-4 sm:p-8 rounded-[3rem] border-8 border-[#333] tv-frame">
+          <div className="aspect-[4/3] w-full bg-black rounded-[2rem] overflow-hidden crt-curve border-4 border-black box-content relative">
+            <AnimatePresence>
+              {!isOn && (
+                <motion.div 
+                  initial={{ scaleY: 1 }}
+                  exit={{ scaleY: 0, opacity: 0 }}
+                  transition={{ duration: 0.1 }}
+                  className="absolute inset-0 bg-black z-[100] flex items-center justify-center"
+                />
+              )}
+            </AnimatePresence>
+
+            {isOn && (
+              <>
+                <canvas ref={canvasRef} className="absolute inset-0 w-full h-full opacity-30" />
+                <div className="scanline-overlay" />
+                
+                <div className="absolute inset-0 flex flex-col items-center justify-center z-10">
+                  <motion.div
+                    initial={{ scale: 0.8, opacity: 0 }}
+                    animate={{ scale: 1, opacity: 1 }}
+                    className="text-white text-center"
+                  >
+                    <h1 className="text-[6rem] sm:text-[10rem] font-bold tracking-tighter mix-blend-difference">
+                      404
+                    </h1>
+                    <div className="px-4 py-2 bg-white text-black font-bold text-xl uppercase skew-x-[-12deg]">
+                      No Signal
+                    </div>
+                  </motion.div>
+                </div>
+
+                <div className="absolute top-6 left-6 z-20 bg-green-500/80 text-black px-3 py-1 text-sm font-bold rounded-sm animate-pulse">
+                  CH {channel}
+                </div>
+              </>
+            )}
+          </div>
+
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-8 px-4">
+            <div className="flex flex-col gap-2">
+              <label className="text-[10px] uppercase text-white/40 tracking-widest">Intensity</label>
+              <input 
+                type="range" 
+                min="0" max="1" step="0.01" 
+                value={noiseIntensity} 
+                onChange={(e) => setNoiseIntensity(parseFloat(e.target.value))}
+                className="w-full h-1 bg-white/10 appearance-none rounded-full accent-white"
+              />
+            </div>
+            
+            <button 
+              onClick={() => setChannel(prev => (prev === 404 ? 13 : 404))}
+              className="px-4 py-2 bg-[#333] hover:bg-[#444] text-white/60 text-xs rounded-md transition-colors border-b-2 border-black"
+            >
+              CHANNEL
+            </button>
+
+            <button 
+              onClick={() => setIsOn(!isOn)}
+              className={cn(
+                "px-4 py-2 text-xs rounded-md transition-all border-b-2 border-black font-bold",
+                isOn ? "bg-red-900 text-red-100" : "bg-green-900 text-green-100"
+              )}
+            >
+              {isOn ? "POWER OFF" : "POWER ON"}
+            </button>
+
+            <Link 
+              href="/"
+              className="px-4 py-2 bg-white text-black text-xs rounded-md font-bold text-center hover:bg-gray-200 transition-colors"
+            >
+              HOME
+            </Link>
+          </div>
+        </div>
+
+        <div className="w-1/2 h-4 sm:h-8 bg-[#222] rounded-b-[2rem] mx-auto mt-[-4px] z-[-1]" />
+        
+        <div className="mt-12 text-white/10 text-xs tracking-[0.5em] uppercase pointer-events-none">
+          Solid State Electronics // Model 404-X
+        </div>
+      </div>
     </div>
   );
 };
 
 export default RetroTv;
+

package/templates/SimplePage.tsx

@@ -1,25 +1,69 @@
 "use client";
 
+import { motion } from "framer-motion";
 import Link from "next/link";
+import { cn } from "@/components/ui/cn";
 
-const SimplePage = () => {
+const SimplePage = ({ className }: { className?: string }) => {
   return (
-    <main className="flex min-h-screen items-center justify-center bg-black text-white">
-      <div className="w-full max-w-[420px] rounded-2xl border border-neutral-800 bg-neutral-950 px-8 py-10 text-center">
-        <h1 className="text-6xl font-bold tracking-tight">404</h1>
-        <h2 className="mt-2 text-sm font-medium">Page not found</h2>
-        <p className="mt-3 text-sm text-neutral-400">
-          The page you&apos;re looking for doesn&apos;t exist or was moved.
-        </p>
-        <Link
-          href="/"
-          className="mt-8 inline-block rounded-xl bg-white px-6 py-3 text-sm font-semibold text-black transition hover:opacity-90"
-        >
-          Go back home
-        </Link>
-      </div>
-    </main>
+    <div
+      className={cn(
+        "min-h-screen bg-white dark:bg-[#050505] flex items-center justify-center p-6 font-sans relative",
+        className
+      )}
+    >
+      <div className="absolute inset-0 z-0 bg-[radial-gradient(circle_at_center,_transparent_0%,_rgba(0,0,0,0.02)_100%)] pointer-events-none" />
+
+      <motion.div 
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
+        className="relative z-10 w-full max-w-[480px] text-center"
+      >
+        <div className="mb-12">
+          <motion.h1 
+            initial={{ scale: 0.95 }}
+            animate={{ scale: 1 }}
+            className="text-[120px] md:text-[160px] font-black tracking-tighter text-black dark:text-white leading-none select-none"
+          >
+            404
+          </motion.h1>
+          <div className="h-px w-24 bg-black/5 dark:bg-white/5 mx-auto mt-4" />
+        </div>
+
+        <div className="space-y-6">
+          <h2 className="text-2xl font-semibold text-black dark:text-white tracking-tight">
+            Something went sideways.
+          </h2>
+          <p className="text-gray-500 dark:text-gray-400 text-lg leading-relaxed max-w-sm mx-auto font-medium">
+            The page you requested is currently unavailable. 
+            It may have been moved or doesn&apos;t exist.
+          </p>
+        </div>
+
+        <div className="mt-16 flex flex-col gap-4">
+          <Link
+            href="/"
+            className="w-full bg-black dark:bg-white text-white dark:text-black font-bold py-5 rounded-2xl hover:opacity-90 transition-all active:scale-[0.98] shadow-2xl shadow-black/10 text-lg"
+          >
+            Return to Safety
+          </Link>
+          <button className="w-full text-gray-400 dark:text-gray-500 font-bold py-4 hover:text-black dark:hover:text-white transition-colors">
+            Contact Support
+          </button>
+        </div>
+
+        <div className="mt-24 pt-12 border-t border-black/[0.03] dark:border-white/[0.03] flex justify-between items-center text-[10px] text-gray-300 dark:text-gray-600 font-bold uppercase tracking-[0.2em]">
+          <span>© 2024 NOTFOUND</span>
+          <div className="flex gap-4">
+            <span>Status 404</span>
+            <span>Uptime 99.9%</span>
+          </div>
+        </div>
+      </motion.div>
+    </div>
   );
 };
 
 export default SimplePage;
+