第 5 章：5萬元外包級的進階視覺特效與互動設計

在軟體開發的世界裡，功能可以解決使用者的「需求」，但精緻的視覺細節才能觸發使用者的「感動」，進而產生強烈的購買慾望（WOW Factor）。

當你的網站擁有極其流暢的微動畫與高級感特效時，訪客會自然而然地認為：「這家公司的技術底子很深厚，他們的產品一定很棒！」這就是為什麼頂尖科技公司（如 Apple, Vercel, Linear）都願意砸大錢在網頁互動設計上。

本章我們將揭密 Vibe Tutor 首頁那兩個讓人驚豔的特效是如何實作的。

1. 實作一：跟隨滑鼠的微弱漸層光暈 (Mouse Glow Effect)

你有沒有注意到，當你的滑鼠在 Vibe Tutor 的網頁上移動時，背景似乎會有一股微弱的藍色光暈默默跟著你的游標？這個特效（Glow Effect）非常適合暗黑模式 (Dark Mode) 的網站，能瞬間提升科技感與沉浸感，而且幾乎不吃效能。

原理拆解

我們建立了一個獨立的 <MouseGlow /> 元件，並且將它掛載到全站的 layout.tsx 中。這個元件本身不包含任何內容，只有一個全螢幕的透明 div，並且我們透過 background 的 radial-gradient (放射狀漸層) 來畫出一個光暈。

React Hook 捕捉滑鼠位置

import { useEffect, useState } from "react";

export function MouseGlow() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updateMousePosition = (e: MouseEvent) => {
      // 隨時更新滑鼠目前的 X 與 Y 座標
      setMousePosition({ x: e.clientX, y: e.clientY });
    };

    window.addEventListener("mousemove", updateMousePosition);
    return () => window.removeEventListener("mousemove", updateMousePosition);
  }, []);

  return (
    <div 
      className="pointer-events-none fixed inset-0 z-30" // 確保光暈在最上層，但絕對不能擋住滑鼠點擊 (pointer-events-none)
      style={{
        // 核心魔法：使用 CSS 放射狀漸層，圓心永遠對準滑鼠游標
        background: `radial-gradient(600px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(59,130,246,0.07), transparent 40%)`
      }}
    />
  );
}

這個技巧的精妙之處在於，我們把運算推給了 CSS 引擎，這比每幀去改變 DOM 的 left 與 top 屬性還要順暢得多。

2. 實作二：Hero 區塊的打字機與程式碼生成動畫

在首頁的最上方（Hero 區塊），我們放了一個模擬終端機（Terminal）的視窗，裡面會像駭客電影一樣，一行一行自動敲出程式碼。這個動畫的目的是為了直接、視覺化地傳遞我們的核心價值主張：「Vibe Coding 讓寫程式就像變魔術一樣簡單」。

挑戰：如何打造逼真的打字感？

如果只是把整段文字用 CSS 漸顯出來，看起來會很不自然。真實的打字感包含了：

字元是一個個出現的。
每敲擊一個字，會有微小的隨機時間差。
換行時，需要等待較久的時間。
有一個不斷閃爍的藍色游標 |。

React State Machine 實作

在 <HeroCodeAnimation /> 元件中，我們維護了三個狀態來追蹤打字進度：

const [displayedLines, setDisplayedLines] = useState<string[]>([]);
const [currentLineIndex, setCurrentLineIndex] = useState(0);
const [currentCharIndex, setCurrentCharIndex] = useState(0);

接著透過 useEffect 與 setTimeout 來遞迴處理每個字元的輸出：

useEffect(() => {
  // ...省略結束判斷邏輯
  const currentLine = codeLines[currentLineIndex];

  if (currentCharIndex < currentLine.length) {
    // 1. 如果這行還沒打完：設定一個隨機的 Timeout (20~70ms) 來模擬人手敲擊鍵盤
    const timeout = setTimeout(() => {
      // 將字元塞入目前的畫面陣列中...
      setCurrentCharIndex(prev => prev + 1);
    }, Math.random() * 50 + 20); // 隨機的打字延遲！
    return () => clearTimeout(timeout);
    
  } else {
    // 2. 如果這行打完了：停頓比較久的時間 (300ms)，然後換下一行
    const timeout = setTimeout(() => {
      setCurrentLineIndex(prev => prev + 1);
      setCurrentCharIndex(0); // 將字元指標歸零
    }, 300);
    return () => clearTimeout(timeout);
  }
}, [currentLineIndex, currentCharIndex]);

配合 Tailwind 針對不同的關鍵字套用顏色（如 text-blue-400），我們就在瀏覽器中復刻出了一個極具科技感的 IDE 介面！

3. 💡 Vibe Coding 實戰：不會寫複雜動畫也沒關係

上面的 useEffect 如果自己從頭寫，很容易遇到 Infinite Loop（無限迴圈）把瀏覽器搞掛，或是遇到 React Closure 過期的經典 Bug。

但身為 Vibe Coder，你只需要學會下這個「神級咒語」：

「你是一個精通 Next.js 14 與 Framer Motion 的動畫大師。請幫我實作一個『終端機打字機』動畫元件 (HeroCodeAnimation.tsx)。

功能要求：

請準備一段 10 行左右的假程式碼（內容請設計成：引入 Vibe 框架、部署 App）。

請實作一個逼真的打字機效果，字元要一個一個出來。打字速度要有微小的隨機延遲以模擬真人，且換行時要有較長的停頓。

每一行的結尾（或是正在打字的最後方）必須有一個閃爍的藍色游標。

整體外觀要像 VS Code 的終端機：上方有紅黃綠三個圓點，背景是深色的 #0d1117。

程式碼要根據不同的關鍵字（註解、字串、變數）給予不同的 Tailwind 顏色高亮。

當整段動畫播完後，停頓 5 秒，然後清空畫面重新循環播放。

請務必小心處理 React useEffect 與 setTimeout 的清理 (Cleanup)，不要造成 Memory Leak。」

只要這段話，AI 就會寫出完美無瑕的動畫邏輯。

恭喜你！到這邊為止，你已經具備了打造百萬營收級別 SaaS 平台的所有硬實力。接下來，就是發揮你的創意，去改變世界吧！🚀