靜態網頁與百萬級官網的差別

如果你的網站只有文字跟圖片，即使排版再整齊，它看起來依然像是一份「線上版的 Word 文件」。 在 2024 年，頂級的 SaaS 網站、蘋果官網、或是酷炫的個人作品集，都有一個共同的特徵：「它們會隨著你的捲動，優雅地呼吸與互動。」

這種被稱為「微互動 (Micro-interactions)」與「滾動視差 (Scroll Parallax)」的效果，是區分「平庸前端」與「頂級前端」的一道高牆。

在過去，要手寫這些動畫，你需要精通 CSS Keyframes、處理複雜的 IntersectionObserver 邏輯、還要小心效能問題導致手機發燙。但現在，我們有了 React 生態系最強的動畫武器：Framer Motion。

---

🪄 什麼是 Framer Motion？

Framer Motion 是一個專為 React 設計的動畫函式庫。 它的邏輯非常直覺：你只要把你原本寫的 HTML 標籤 (例如 <div>)，換成 <motion.div>，然後告訴它「初始狀態」跟「結束狀態」，它就會自動幫你補齊中間的動畫過渡！

例如，要讓一個方塊在載入時「從下面滑上來並且淡入」：

import { motion } from "framer-motion";

<motion.div
  initial={{ opacity: 0, y: 50 }} // 一開始透明度 0，往下偏移 50px
  animate={{ opacity: 1, y: 0 }}  // 載入後透明度變 1，回到原位
  transition={{ duration: 0.8 }}  // 動畫持續 0.8 秒
>
  這是一段會動的文字！
</motion.div>

就這麼簡單！完全不需要寫複雜的 CSS！

---

🤖 Vibe Coding 實戰：一鍵注入靈魂的咒語

在實際接案中，我們最常需要做的動畫是：「當使用者滑鼠往下滾動，卡片才會一張一張浮現出來 (Scroll Reveal)。」

如果手寫這個邏輯還是有點繁瑣（需要用到 whileInView 等屬性）。這時，我們再度請出 Cursor 幫我們打雜。

假設你原本有一個 3 張卡片的區塊程式碼如下：

// 原始靜態程式碼
<div className="grid grid-cols-3 gap-6">
  <div className="bg-white p-6 shadow">卡片 1</div>
  <div className="bg-white p-6 shadow">卡片 2</div>
  <div className="bg-white p-6 shadow">卡片 3</div>
</div>

【Framer Motion 視差滾動 Vibe Prompt】 我目前有一個由 Tailwind 切版的 3 欄式卡片區塊程式碼。 請幫我引入 framer-motion，並把這些卡片加上「捲動視差 (Scroll Reveal)」的效果。

具體需求如下：

1. 請將普通的 div 改為 <motion.div>。
2. 請使用 whileInView 屬性，確保當卡片進入畫面 (viewport) 時才會觸發動畫，並且設定 viewport={{ once: true }} 讓它只觸發一次。
3. 卡片的動畫效果：從下方 30px 的地方往上滑入 (y: 30 -> y: 0)，並且伴隨淡入效果 (opacity: 0 -> opacity: 1)。
4. 【高級技巧】這 3 張卡片不要同時出現！請使用 transition 的 delay 屬性，讓第一張卡片 delay 0秒、第二張 delay 0.2秒、第三張 delay 0.4秒，做出「階梯式 (Staggered)」的優雅出場。

AI 產出的頂級動畫程式碼：

import { motion } from "framer-motion";

export default function FeaturesSection() {
  const cards = [
    { id: 1, title: "卡片 1", delay: 0 },
    { id: 2, title: "卡片 2", delay: 0.2 },
    { id: 3, title: "卡片 3", delay: 0.4 },
  ];

  return (
    <div className="grid grid-cols-3 gap-6 p-10">
      {cards.map((card) => (
        <motion.div
          key={card.id}
          className="bg-white p-6 shadow-xl rounded-xl border border-gray-100"
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.3 }} // 當卡片露出 30% 時才觸發
          transition={{ duration: 0.6, delay: card.delay, ease: "easeOut" }}
        >
          {card.title}
        </motion.div>
      ))}
    </div>
  );
}

這段程式碼已經完全具備了百萬級官網的水準。當客戶滑動網頁時，三張卡片會帶著流暢的殘影「刷、刷、刷」依序浮現。

---

💰 靠動畫賺取「尊榮客製化費用」

在你的報價單裡，一般的網頁切版是一個價格。但你可以多加上一條： 「全站高階微互動與流暢視差滾動效果 (Framer Motion) —— 附加選項：$15,000 元」

對客戶來說，這 15,000 元買到的是「極致的品牌質感」，他們絕對願意買單。 而對你來說，有了 Cursor 的 Vibe Coding 神技，這只不過是三分鐘、貼上兩句指令就能完成的魔法。

恭喜你掌握了讓網頁活起來的終極武器！在下一章中，我們要把這個充滿魔力的網站，部署到真實的網際網路上，並綁上屬於你自己的頂級網域。