合并创意 UI 升级：Matrix雨、Boot序列、打字机、神经网络动画

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Spectual

src/components/BootSequence.tsx

@@ -0,0 +1,71 @@
+import { useState, useEffect } from "react";
+
+const BOOT_LINES = [
+  { text: "[  OK  ] Starting neural network...", color: "var(--term-green)" },
+  { text: "[  OK  ] Loading model weights...", color: "var(--term-green)" },
+  { text: "[  OK  ] Initializing RAG pipeline...", color: "var(--term-green)" },
+  { text: "[  OK  ] Mounting vector database...", color: "var(--term-green)" },
+  { text: "[  OK  ] System ready.", color: "var(--term-green)" },
+  { text: "", color: "" },
+  { text: "Welcome to spectual.github.io", color: "var(--term-text)" },
+];
+
+interface BootSequenceProps {
+  onComplete: () => void;
+}
+
+const BootSequence = ({ onComplete }: BootSequenceProps) => {
+  const [visibleLines, setVisibleLines] = useState(0);
+  const [fading, setFading] = useState(false);
+
+  useEffect(() => {
+    const timers: ReturnType<typeof setTimeout>[] = [];
+
+    BOOT_LINES.forEach((_, i) => {
+      timers.push(setTimeout(() => setVisibleLines(i + 1), i * 340 + 150));
+    });
+
+    const totalTime = BOOT_LINES.length * 340 + 150;
+    timers.push(setTimeout(() => setFading(true), totalTime + 400));
+    timers.push(setTimeout(() => onComplete(), totalTime + 850));
+
+    return () => timers.forEach(clearTimeout);
+  }, [onComplete]);
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        backgroundColor: "var(--term-bg)",
+        zIndex: 1000,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        opacity: fading ? 0 : 1,
+        transition: "opacity 0.45s ease-out",
+        pointerEvents: fading ? "none" : "auto",
+      }}
+    >
+      <div style={{ fontFamily: "inherit", fontSize: "13px", minWidth: "320px" }}>
+        {BOOT_LINES.slice(0, visibleLines).map((line, i) => (
+          <div
+            key={i}
+            style={{
+              color: line.color || "transparent",
+              marginBottom: line.text ? "5px" : "14px",
+              animation: "fadeInLine 0.18s ease-out",
+            }}
+          >
+            {line.text || "\u00a0"}
+          </div>
+        ))}
+        {visibleLines > 0 && visibleLines <= BOOT_LINES.length && (
+          <span className="cursor-blink" />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default BootSequence;

src/components/ChatSection.tsx

@@ -20,6 +20,45 @@ const PREDEFINED_QUESTIONS = [
   "Any patents or publications?",
 ];
 
+// ── Neural network thinking indicator ─────────────────────────────────────
+const NN_FRAMES = [
+  "[●○○] ──▶ [○○] ──▶ [○]",
+  "[○●○] ──▶ [○○] ──▶ [○]",
+  "[○○●] ──▶ [○○] ──▶ [○]",
+  "[○○○] ──▶ [●○] ──▶ [○]",
+  "[○○○] ──▶ [○●] ──▶ [○]",
+  "[○○○] ──▶ [○○] ──▶ [●]",
+];
+
+const ThinkingIndicator = () => {
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    const id = setInterval(() => setFrame((f) => (f + 1) % NN_FRAMES.length), 180);
+    return () => clearInterval(id);
+  }, []);
+
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" }}>
+      <span style={{ color: "var(--term-blue)", fontSize: "11px", flexShrink: 0 }}>ai</span>
+      <span style={{ color: "var(--term-dim)" }}>: </span>
+      <span
+        style={{
+          color: "var(--term-dim)",
+          fontSize: "11px",
+          fontFamily: "inherit",
+          letterSpacing: "0.5px",
+        }}
+      >
+        {NN_FRAMES[frame]}
+      </span>
+      <span style={{ color: "var(--term-green)", fontSize: "12px" }}>thinking</span>
+      <span className="cursor-blink" />
+    </div>
+  );
+};
+
+// ── ChatSection ────────────────────────────────────────────────────────────
 const ChatSection = () => {
   const [messages, setMessages] = useState<Message[]>([
     {
@@ -32,6 +71,7 @@ const ChatSection = () => {
   const [inputValue, setInputValue] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [isServerOnline, setIsServerOnline] = useState(true);
+  const [typingMessageId, setTypingMessageId] = useState<string | null>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const isInitialLoad = useRef(true);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
@@ -76,6 +116,8 @@ const ChatSection = () => {
       toast.error("AI server is currently offline. Please try again later.");
       return;
     }
+    // Finish any ongoing typewriter immediately
+    setTypingMessageId(null);
 
     const userMessage: Message = {
       id: Date.now().toString(),
@@ -91,8 +133,9 @@ const ChatSection = () => {
 
     try {
       const response = await sendMessage(messageText);
+      const aiId = (Date.now() + 1).toString();
       const aiMessage: Message = {
-        id: (Date.now() + 1).toString(),
+        id: aiId,
         text: response.success
           ? response.response
           : response.response || "Sorry, I'm having trouble connecting right now. Please try again later.",
@@ -101,6 +144,7 @@ const ChatSection = () => {
       };
       if (!response.success) toast.error("Failed to get response. Please try again.");
       setMessages((prev) => [...prev, aiMessage]);
+      setTypingMessageId(aiId);
     } catch (error) {
       console.error("Error getting AI response:", error);
       toast.error("Failed to get response. Please try again later.");
@@ -127,10 +171,10 @@ const ChatSection = () => {
   };
 
   return (
-    <section className="px-4 pb-6">
+    <section className="px-4 pb-6" style={{ position: "relative", zIndex: 1 }}>
       <div className="max-w-4xl mx-auto">
         <div style={{ border: "1px solid var(--term-border)", backgroundColor: "var(--term-bg)" }}>
-          {/* Terminal title bar */}
+          {/* Terminal title bar — enhanced AI style */}
           <div
             style={{
               borderBottom: "1px solid var(--term-border)",
@@ -139,12 +183,25 @@ const ChatSection = () => {
               display: "flex",
               alignItems: "center",
               justifyContent: "space-between",
+              flexWrap: "wrap",
+              gap: "6px",
             }}
           >
             <span style={{ color: "var(--term-dim)", fontSize: "12px" }}>
-              bash — ~/chat
+              🧠{" "}
+              <span style={{ color: "var(--term-text)" }}>AI Assistant v2.0</span>
+              <span style={{ color: "var(--term-dim)" }}>
+                {" "}| model:{" "}
+              </span>
+              <span style={{ color: "var(--term-cyan)" }}>rag-powered</span>
+              <span style={{ color: "var(--term-dim)" }}>
+                {" "}| status:{" "}
+              </span>
+              <span style={{ color: isServerOnline ? "var(--term-green)" : "var(--term-red)" }}>
+                {isServerOnline ? "online" : "offline"}
+              </span>
             </span>
-            {/* Server status */}
+            {/* Server status dot */}
             <span
               style={{
                 fontSize: "11px",
@@ -161,6 +218,7 @@ const ChatSection = () => {
                   borderRadius: "50%",
                   backgroundColor: isServerOnline ? "var(--term-green)" : "var(--term-red)",
                   display: "inline-block",
+                  animation: isServerOnline ? "neuralPulse 2s ease-in-out infinite" : "none",
                 }}
               />
               {isServerOnline ? "server:online" : "server:offline"}
@@ -212,18 +270,14 @@ const ChatSection = () => {
             }}
           >
             {messages.map((message) => (
-              <MessageBubble key={message.id} message={message} />
+              <MessageBubble
+                key={message.id}
+                message={message}
+                isTyping={typingMessageId === message.id}
+                onTypingComplete={() => setTypingMessageId(null)}
+              />
             ))}
-            {isLoading && (
-              <div style={{ display: "flex", alignItems: "center", gap: "6px", color: "var(--term-dim)" }}>
-                <span style={{ color: "var(--term-blue)" }}>ai</span>
-                <span style={{ color: "var(--term-dim)" }}>: </span>
-                <span style={{ color: "var(--term-green)" }}>
-                  thinking
-                  <span className="cursor-blink" />
-                </span>
-              </div>
-            )}
+            {isLoading && <ThinkingIndicator />}
             <div ref={messagesEndRef} />
           </div>
 
@@ -261,11 +315,13 @@ const ChatSection = () => {
                       if (!isLoading && isServerOnline) {
                         e.currentTarget.style.borderColor = "var(--term-green)";
                         e.currentTarget.style.color = "var(--term-green)";
+                        e.currentTarget.style.backgroundColor = "rgba(63,185,80,0.06)";
                       }
                     }}
                     onMouseLeave={(e) => {
                       e.currentTarget.style.borderColor = "var(--term-border)";
                       e.currentTarget.style.color = "var(--term-dim)";
+                      e.currentTarget.style.backgroundColor = "transparent";
                     }}
                   >
                     [{index + 1}] {question}
@@ -311,10 +367,12 @@ const ChatSection = () => {
                 style={{
                   background: "transparent",
                   border: "none",
-                  color: inputValue.trim() && !isLoading && isServerOnline
-                    ? "var(--term-green)"
-                    : "var(--term-border)",
-                  cursor: inputValue.trim() && !isLoading && isServerOnline ? "pointer" : "default",
+                  color:
+                    inputValue.trim() && !isLoading && isServerOnline
+                      ? "var(--term-green)"
+                      : "var(--term-border)",
+                  cursor:
+                    inputValue.trim() && !isLoading && isServerOnline ? "pointer" : "default",
                   fontFamily: "inherit",
                   fontSize: "12px",
                   padding: "0 4px",

src/components/MatrixRain.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useRef } from "react";
+
+const ML_CHARS = "01∑∇θσλWbxy∂αβγπφψΩε∞≈∫∏μν∈⊕⊗‖∥";
+
+const MatrixRain = () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    // Lower density on mobile
+    const isMobile = window.innerWidth < 768;
+
+    const fontSize = 14;
+    let columns = 0;
+    let drops: number[] = [];
+
+    const resize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+      const newCols = isMobile
+        ? Math.floor(canvas.width / (fontSize * 3))
+        : Math.floor(canvas.width / fontSize);
+      if (newCols !== columns) {
+        columns = newCols;
+        drops = Array(columns).fill(1);
+      }
+    };
+    resize();
+    window.addEventListener("resize", resize);
+
+    let animId: number;
+    let lastTime = 0;
+    const frameInterval = isMobile ? 160 : 90;
+
+    const draw = (timestamp: number) => {
+      animId = requestAnimationFrame(draw);
+      if (timestamp - lastTime < frameInterval) return;
+      lastTime = timestamp;
+
+      // Very slow trail fade
+      ctx.fillStyle = "rgba(13, 17, 23, 0.06)";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      ctx.fillStyle = "rgba(63, 185, 80, 0.55)";
+      ctx.font = `${fontSize}px 'JetBrains Mono', monospace`;
+
+      const colSpacing = isMobile ? fontSize * 3 : fontSize;
+      for (let i = 0; i < drops.length; i++) {
+        const char = ML_CHARS[Math.floor(Math.random() * ML_CHARS.length)];
+        ctx.fillText(char, i * colSpacing, drops[i] * fontSize);
+
+        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+          drops[i] = 0;
+        }
+        drops[i]++;
+      }
+    };
+
+    animId = requestAnimationFrame(draw);
+
+    return () => {
+      cancelAnimationFrame(animId);
+      window.removeEventListener("resize", resize);
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        opacity: 0.035,
+        pointerEvents: "none",
+        zIndex: 0,
+      }}
+    />
+  );
+};
+
+export default MatrixRain;