只是想快速弄一個超炫的 液態玻璃效果、或者帥到掉渣的 3D卡片交互，不想放動畫，用程式寫一個又好懶。

這時候直接貼上現成元件庫最香了。

隆重介紹 —— Reactbit。

它裡面收錄了一堆可以直接貼上的互動元件，幫你把 物理引擎、動畫引擎、3D 渲染 都封裝好了。

但是呢，這背後其實用到很多重量級技術：

Reactbit 背後的技術

1. Matter.js

• 這是一個 2D 物理引擎，可以模擬重力、碰撞、彈性、摩擦力等等。
• 你如果要做掉落的小球、彈跳的物件，或拖拉拖曳交互，Matter 幾乎是標配。
• Reactbit 有些元件（像流體粒子效果）就偷偷用上了 Matter。
  

2. GSAP (GreenSock Animation Platform)

• 前端最有名的動畫函式庫之一。
• 特色是 效能高、API 簡單，能控制時間線（timeline），也能和 ScrollTrigger 搭配做「滾動觸發動畫」。
• Reactbit 中的許多流暢過場、彈性動畫，很大機率就是靠 GSAP 驅動。
  

3. OGL (Open Graphics Library)

• 一個輕量的 WebGL 框架，專注於 Shader 與 3D 視覺實驗。
• 雖然不像 Three.js 那麼龐大，但在「炫酷粒子」、「液態玻璃」、「shader 特效」這些小範圍場景很受歡迎。
• Reactbit 某些超視覺化的效果，就可能用 OGL 寫在背後。
  

4. Three.js

• 控制幾乎任何和 3D 有關的東西（模型、燈光、陰影、環境貼圖）

5. Framer Motion

• 專為 React 打造的動畫庫。
• 語法簡單，支援狀態切換（Variants）、自動過場（Layout Animations）、進場退場（AnimatePresence）。
• UI 過場效果（hover、按鈕縮放、淡入淡出）
  

6. Lenis

• 專注於 平滑滾動（smooth scroll） 的 JS 函式庫。
• 讓網頁的滾動更順滑、更可控，尤其適合做設計感強的互動網站。
• 輕量且新潮，但和 OGL 類似，也算小眾技術。
• 特色
  -- 慣性捲動：模擬 iOS / macOS 那種自然滾動的感覺。
  -- 動態速度控制：你可以設定滾動加速度、減速度，甚至做「慢慢滑停」。
  -- 與動畫庫搭配：常和 GSAP ScrollTrigger 搭配，讓滾動與動畫同步。
  -- React / Next.js 相容：也能直接用在 React 專案裡，不需要改 DOM 結構。
  

使用方式

點擊 Code 就有安裝單個元件方法和詳細使用方式啦，還可以選是否為tailwind ，JS 或 TS！

使用 Reactbit 的小提醒

雖然 Reactbit 提供了很多酷炫的元件，但還是要注意幾個坑：

1. 型別不完整
   • 雖然官方說支援 TypeScript，但有些元件型別標示很模糊，甚至直接給 any。(ノ｀Д)ノ,
   • 如果你在 TS 專案裡使用，可能會遇到 型別錯誤 或 編輯器補全失效 的情況。
2. 檔案體積可能很肥
   • 因為裡面有的元件直接拉進 matter.js、gsap、three.js，單一依賴就可能上百 KB。
   • 如果你只是要放一個簡單小動畫，結果引入半個物理引擎，打包大小瞬間膨脹。
3. 不一定適合生產環境
   • Reactbit 偏向 Showcase 或 快速 demo」，在實際專案用時要考慮效能與維護性。
   • 尤其是像 OGL 開發團隊小、社群小，如果未來作者不維護，元件可能會失效。
4. Code 很長很難改
   • 跟平常寫的方式真的很不一樣QAQ
5. 有些元件只適用亮或暗模式其中一個
   • 例如下面 Aurora 元件，在亮色模式根本是烏雲壓頂
     

想安裝來玩玩了嗎？或是想要用上述技術自己寫一個呢？想用Reactbit 但是遇到不明錯誤的，我們明天再說啦～