把效果變成能重用的技能

先挑效果、複製提示詞，再依實際技術選 Skill。原站多數效果使用 Canvas 2D、CSS 與原生 JavaScript；名稱含 3D、Shader 或 Lottie，不表示預覽用了該套件，請查看「實作方式」。

已保存的官方 GitHub Skill

以下 4 份已存於桌面專案 github-skills，保留 MIT 授權與固定 commit。這 4 份已安裝至 Codex 全域技能庫，另有 Eric 特效庫索引供各專案按需求選用；不會同時載入全部內容。

效果 → 學習路線

1. 按鈕、文字與卡片：先用 CSS transition、keyframes、Web Animations API；複雜時間序列再參考 gsap-core。
2. 視差、捲動故事與數字揭示：參考 gsap-scrolltrigger；先確認真實捲動需求，原預覽中的自動捲動只是演示。
3. 粒子、地球與流場：先讀本庫 Canvas 2D 程式。需要真實 3D 模型、燈光或 GLSL 時，再參考 Three.js Skills（僅列為候選，未保存或執行）。
4. 節奏與轉場：motion-design 提供時長、緩動、編排原則；gsap-performance 用於清除計時器、離屏暫停及低動態偏好檢查。

使用方式

回到特效庫搜尋名稱，展開後複製提示詞。向 Codex 指定本專案、效果 ID、用途與配色，並要求讀取相應 Skill。完成後實測桌機、手機、觸控、鍵盤、離屏與低動態設定。

收藏日期：2026-10-30。效果來源與 GitHub Skill 各自保留原作者歸屬，Skill 的 MIT 授權不等於原站效果已獲商用授權。