重點整理
- Radiant 模板以 Next.js、Framer Motion 與 Tailwind CSS 打造，部落格使用 Sanity CMS。
- 動畫設計強調「適度」，以互動觸發與循環效果讓網站感覺有活力又不拖慢速度。
- 元件設計以可重複使用為核心，提供簡單 API 讓使用者快速替換為自己的產品內容。
- 採用 Headless CMS（Sanity），讓非工程師也能管理部落格內容與圖片。
為什麼這篇跟你有關？
如果你正在規劃公司行銷網站，或考慮用模板快速建立 SaaS 產品介紹頁，Tailwind CSS 團隊最新推出的 Radiant 模板值得參考。它不只是一組好看的畫面，更在動畫互動、元件設計、內容管理三個層面做了很多思考。以下我們用白話方式，帶你了解這些設計背後的邏輯，以及你可以怎麼應用在自己的網站上。
一、動畫互動：有活力但不拖慢速度
很多行銷網站會加入大量動畫，但一不小心就會變成「滑一下畫面，到處都在動」，反而讓使用者覺得網站很慢。Radiant 的做法是：
- 動畫由使用者互動觸發，例如滑鼠移上去才開始動，而不是頁面一載入就全部跑一遍。
- 採用循環動畫，讓元件在互動時感覺「活著」，而不是動完就停住。
- 大部分動畫使用 Framer Motion（一個 React 動畫套件）來實作，它的好處是寫法清楚，也方便其他人客製化。
其中一個有趣的技巧是「variant propagation」：當滑鼠移上父元件時，子元件會自動收到狀態變化，不需要一個一個傳下去。這樣即使元件結構很深，動畫也能順利觸發。
另外，Logo 時間軸動畫是直接用 CSS 實作的，利用負值的 animation-delay 讓每個 Logo 從不同位置開始移動，滑鼠移上時才播放，移開時就停在目前位置，不需要 JavaScript 來追蹤狀態。
二、元件設計：買模板最怕「只能看不能用」
買過模板的人可能都有這種經驗：範例內容很漂亮，但換成自己的產品就卡住了。Radiant 特別針對這個問題，設計了幾個通用圖形元件，例如：
- 地圖標記：適合展示服務據點或客戶分布。
- Logo 群組：適合展示合作品牌或客戶 Logo。
- 鍵盤快捷鍵：適合展示產品操作方式。
這些元件都提供了簡單的 API，例如 Logo 群組只需要傳入圖片路徑、位置與滑鼠移上時的動畫參數；鍵盤元件只需要傳入要反白的按鍵名稱。這樣一來，你可以很快把範例內容替換成自己的資料，而不需要重新寫版面。
三、部落格與內容管理：用 Headless CMS 讓非工程師也能更新
Radiant 的部落格這次沒有用常見的 MDX（一種把 Markdown 和 JSX 結合的寫法），而是改用 Sanity 這個 Headless CMS（無頭內容管理系統，意思是內容後台與前端畫面分開，可以透過 API 把內容送到任何地方）。
這樣做的好處是：
- 非工程師也能管理內容：不用開程式碼、不用下 commit，直接在 Sanity 後台編輯文章與上傳圖片。
- 內容以結構化格式回傳，可以對應到自訂的 React 元件，控制排版與樣式。
- 圖片自動託管，還可以即時調整尺寸、品質與格式。
- 可以自訂欄位，例如幫文章加上「是否置頂」的選項，讓特定文章顯示在特別區塊。
Sanity 是付費產品，但有免費額度可以試用。如果你之後想換其他 Headless CMS，Radiant 的整合方式也可以作為參考範例。
崴米的建議
- 動畫適度就好：行銷網站的動畫應該以「提升互動感」為目標，而不是「炫技」。建議先規劃哪些區塊需要動畫，並確保不會影響載入速度。
- 元件設計要考慮未來擴充：如果你打算用模板或請設計師建立網站，確認元件是否容易替換內容，避免日後要改版面時發現綁死了。
- 評估 CMS 需求：如果公司內部有非工程師需要經常更新部落格或產品資訊，考慮導入 Headless CMS，讓內容管理更直覺，也能減少對工程師的依賴。
想把這件事交給我們處理？
網頁設計：從企業官網到品牌形象頁，網頁設計與網站製作一次到位，做一個客戶看得懂、找得到你的網站
