loading screen

2026-04-28 12:23:52 +07:00
parent e374f606a9
commit 0e9bd2b166
15 changed files with 5896 additions and 27 deletions
@@ -0,0 +1,63 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import { NetrunnerMatrix } from "matrix-engine/NetrunnerMatrix";
+
+interface SplashScreenProps {
+  onComplete: () => void;
+}
+
+export function SplashScreen({ onComplete }: SplashScreenProps) {
+  const [isFadingOut, setIsFadingOut] = useState(false);
+
+  useEffect(() => {
+    // 1. Увеличиваем время показа до 5 секунд
+    const timer = setTimeout(() => {
+      setIsFadingOut(true);
+
+      // 2. Время на CSS-анимацию исчезновения (1 секунда)
+      setTimeout(onComplete, 1000);
+    }, 5000); // Было 3000
+
+    return () => clearTimeout(timer);
+  }, [onComplete]);
+
+  return (
+    <div
+      className={`fixed inset-0 z-[100] transition-opacity duration-1000 flex items-center justify-center bg-[#0a0a0c] ${
+        isFadingOut ? "opacity-0 pointer-events-none" : "opacity-100"
+      }`}
+    >
+      {/* ВАЖНО: Чтобы капли уже были на экране, в самом компоненте NetrunnerMatrix 
+          или в воркере должна быть логика предзаполнения.
+          Если её нет в WASM, мы можем схитрить в CSS, плавно проявляя сам холст.
+      */}
+      <NetrunnerMatrix isSecure={false} assetsPath="/wasm-matrix" />
+
+      <motion.div
+        initial={{ opacity: 0, scale: 0.8 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 1.5, ease: "easeOut" }}
+        className="relative z-10 flex flex-col items-center gap-4"
+      >
+        <h1 className="text-4xl font-black tracking-[0.3em] text-white drop-shadow-[0_0_15px_rgba(255,255,255,0.5)]">
+          NETRUNNER
+        </h1>
+
+        <div className="flex items-center gap-3">
+          <div className="w-12 h-[2px] bg-primary/50" />
+          <span className="text-[10px] font-mono text-primary uppercase tracking-widest animate-pulse">
+            Establishing secure connection
+          </span>
+          <div className="w-12 h-[2px] bg-primary/50" />
+        </div>
+      </motion.div>
+
+      <div
+        className="absolute inset-0 pointer-events-none bg-gradient-to-b from-transparent via-white/5 to-transparent h-1/2 w-full animate-scan"
+        style={{ animationDuration: "3s" }}
+      />
+    </div>
+  );
+}