DESIGN SYSTEM / INTERACTIONS
讓細節有感，
而不喧賓奪主。
這裡是可實際操作的 網站特效庫。移動滑鼠、點擊切換、向下捲動，感受不同互動的節奏；同一組效果能套用四套主題，並尊重手機觸控與減少動態設定。
預覽風格
動效強度
正在檢查動效是否載入…
檢查中…
看不到動畫？查看裝置設定點擊展開 Windows、macOS、iOS 與 Android 設定教學
這個網站會遵守裝置或瀏覽器回報的 prefers-reduced-motion 設定。如果系統關閉動畫或啟用「減少動態」，進場、圖片 Zoom、動態底線等效果可能會被停用。這不是網頁載入失敗；你可以保持原有的無障礙偏好，改用上方的「仍要在此頁試玩動畫」進行暫時預覽。
Windows 11
設定 → 協助工具 → 視覺效果 → 動畫效果：開啟
你截圖中的就是這個開關。與旁邊的「透明效果」不同，不必為了動畫打開透明效果。
Windows 10
設定 → 輕鬆存取 → 顯示 → 在 Windows 中顯示動畫：開啟
也可以在 Windows 設定中搜尋「動畫」。
01 · ENTRANCE
Reveal · 進場效果
用輕量的方向、縮放與透明度提示內容層次；不讓每一行文字都飛進來。
fade-up淡入上移移到畫面中，或點「重播效果」
soft-zoom柔和縮放移到畫面中，或點「重播效果」
blur-up模糊淡入移到畫面中，或點「重播效果」
clip-up遮罩揭露移到畫面中，或點「重播效果」
元件：Reveal.astro 變體：fade-up / fade / soft-zoom / blur-up / slide-left / slide-right / clip-up
02 · RHYTHM
Stagger · 依序出場
文章卡或服務流程用有節制的時差引導視線；單組控制，不製造整頁動畫瀑布。
元件：StaggerGroup.astro + Reveal.astro 參數：step / start
03 · POINTER
Tilt 與 Spotlight · 卡片互動
桌面上移動滑鼠試試。觸控與減少動態會自動降級，不讓卡片搖晃影響閱讀。
3D TILT / MAX 3°
適度的立體感
輕微旋轉回應滑鼠方向，適合少量品牌展示卡片。
SPOTLIGHT / POINTER
隨指標移動的柔光
聚焦視線而不遮蔽文字或增加戲劇性的光暈。
元件：MotionCard.astro 參數：tilt / spotlight / tiltMax
04 · IMAGERY
Zoom 與 Pan · 圖片動態
同一張本地示範素材，呈現平滑縮放與少量滑鼠視差；文章圖表不建議使用 Pan。
元件：ZoomImage.astro 參數：effect = zoom / pan / none
05 · MICRO FEEDBACK
磁吸按鈕與動態連結
只有必要時才讓主要 CTA 有更強的操作感；連結不只靠 Hover 才能辨識。
元件：MagneticButton.astro / UnderlineLink.astro
06 · CONTENT
FAQ · 可調式展開
以原生 details / summary 製作，鍵盤可以操作，沒有 JavaScript 也可以開合。
特效會讓手機網站變慢嗎？
這組示範以輕量網頁技術與少量 JavaScript 製作，手機與觸控會停用不必要的指標追蹤效果。仍應依實際裝置測試。
訪客設定「減少動態」會怎樣？
Reveal 不會隱藏內容，傾斜、磁吸與平移會被停用，閱讀與鍵盤操作保持正常。
可以換成我自己的品牌顏色嗎？
可以。示範沿用紙墨、晨光、靜室與植感的既有 CSS 變數，AI 可依 Motion Skill 調整強度和使用區域。
元件：MotionFAQ.astro 參數：variant = line / soft / cards
BEFORE YOU ADD MOTION
什麼時候該動？什麼時候保持安靜？
動效不是越多越精緻。好的動效讓訪客看懂操作、注意重點；不需要動的地方，保持穩定反而比較舒服。
適合加一點動效
- 操作有回應：按鈕被點擊、選單展開、FAQ 開合。
- 幫助理解：分組內容輕微依序出現，提示閱讀順序。
- 清楚的狀態：真正送出資料時顯示等待或完成結果。
通常保持安靜更好
- 長篇文章：內文不必一段段延遲顯示。
- 重要資訊：服務內容、價格、聯絡方式直接看得到。
- 手機與輔助操作：不可只靠滑鼠 Hover 才能看到資訊。
- 純裝飾：沒有用途的漂浮、閃爍、持續旋轉先不要加。
挑選原則：先說出「這個動效幫訪客完成什麼」，再挑效果；說不出目的就先不用。每頁以少量、輕微的互動為起點，並尊重「減少動態」設定。
07 · MORE IDEAS
更多現成動效靈感
找不到想要的效果？可以到這些網站看看別人做好的範例，將連結交給 AI 協助評估。這些工具不會自動安裝進你的網站。
① 先看本站特效
淡入、按鈕回饋、卡片與圖片互動，可能已經夠用了。
② 到外部網站試玩
挑喜歡的速度、方向和感覺，不必先懂程式。
③ 請 AI 檢查再使用
優先讓內容好讀，確認手機、鍵盤和減少動態設定。
Astro 專用
AstroAnimate
想找專門給 Astro 網站的現成動畫能參考按鈕、卡片、文字出現等完整範例；先看看哪個效果真的有幫助。
可以找：按鈕回饋、卡片輕微浮起、文字淡入
許多功能與我們現有 Reveal、MotionCard 重疊；這是較新的專案，先比對版本及實際效果，不要預設安裝。
特色視覺
astro-webtools
想找拍立得或便利貼等特殊畫面可以看看照片像拍立得、文字霓虹、手寫便利貼等裝飾效果。
可以找：拍立得圖片、便利貼、SVG 文字效果
這些屬於特殊視覺裝飾，不建議全站使用；其導航元件也不是新的 Motion Effect。
簡單動效
Animista
想讓文字或圖片自然出現可以直接播放淡入、滑入、縮放等效果，挑喜歡的速度和方向。
可以找：文字淡入、圖片滑入、標題進場
適合小幅度 CSS 動效；複雜動畫先不要加入。
簡單動效
Animate.css
想快速試試標題和圖片進場挑選文字淡入、滑入、柔和縮放的效果，先看看適合哪個段落。
可以找：標題淡入、區段進場、圖片輕微縮放
現有 Reveal 通常已能完成類似效果。官方採 Hippocratic License 2.1，正式複製或商業使用前須核對授權。
滑鼠與鍵盤回饋
Hover.css
想讓按鈕和連結有細緻回饋提供滑鼠移到按鈕、文字連結或圖片上的細微變化，可以比較不同手感。
可以找：按鈕輕微放大、底線、邊框與陰影
手機通常沒有滑鼠懸停，效果必須降級。商業網站及可供學員再散布的 Starter 有額外授權條件；先評估，不直接複製。
互動細節
Uiverse
想找有回饋感的按鈕與卡片有很多人分享按鈕、卡片和滑鼠移過去的小效果，可以打開直接看。
可以找：按鈕按下回饋、連結底線、卡片 Hover
範例品質不同，請 AI 選簡單、易閱讀的，不要滿頁閃動。
進階互動
Motion
想讓捲動與畫面切換更順暢適合需要文字依序出現、捲動時顯示閱讀進度等比較細緻的互動。
可以找：依序出現、閱讀進度、捲動揭露
進階做法需要程式，先檢查我們特效庫能不能完成。
進階捲動
GSAP
想做有故事節奏的捲動動畫適合文章敘事、長頁面需要精準控制的段落動畫。
可以找：捲動觸發、分段進場、視差敘事
容易做得太花；只有有清楚閱讀目的才考慮。
捲動出現
AOS
想讓區段捲到眼前才出現常見的向上浮現、淡入效果，可以快速比較不同節奏。
可以找：卡片逐段出現、文字浮現、列表淡入
我們已經有 Reveal／Stagger，通常不必為同樣功能再裝一套。
載入提示
CSS Loaders
真的需要等候提示時再來看提供很多載入中的小動畫，適合按下送出後真的需要等待的功能。
可以找：載入提示、等待進度
一般靜態個人網站不需要載入動畫，更不能放假的送出成功畫面。
部分範例可能需要額外程式或付費授權。先挑真正有用的效果，正式採用前請 AI 檢查相容性、授權及使用者是否能選擇減少動畫。