Kadou v3.2 正式發佈 — 新增粒子場引擎
寫下程式碼,動畫立刻活起來
可動 Kadou 是為產品團隊打造的互動動畫引擎。左邊寫、右邊跑—— 60fps 的物理彈簧、交錯編排與粒子系統,改一個參數就即時看見結果。
spring.tsx
編譯中…
1
點擊圓球,感受不同剛性與阻尼的彈簧
超過 48,000 位開發者與這些團隊每天都在用
流線科技
白鹿設計
NEBULA
Orbit Pay
山嵐媒體
PIXO Lab
為什麼選可動
動畫工程該有的一切,一個引擎裝好
從第一顆彈簧球到整頁編排,Kadou 把「調到順」的時間從幾天縮短到幾分鐘。
物理彈簧引擎
以剛性與阻尼描述動態,不再手調 cubic-bezier。中斷、接續、反向都自然流暢。
時間軸編排
stagger、sequence、並行群組一行搞定,複雜的進場秩序也能用宣告式寫完。
手勢驅動
拖曳、hover、按壓與慣性滑動內建支援,滑鼠與觸控事件直接餵進動畫系統。
效能監測面板
內建 FPS 與掉幀熱點追蹤,開發模式一鍵開啟,動畫卡頓無所遁形。
SSR 安全
所有隨機值與 DOM 存取都延後到 client,Next.js App Router 開箱即用零 hydration 警告。
遊樂場匯出
在線上遊樂場調好的參數,一鍵匯出成 production-ready 的 TypeScript 元件。
0 fps
低階裝置實測穩定輸出
0 kb
核心 gzip 體積
0k+
每月活躍開發者
0.0%
主流瀏覽器相容率
快速上手
三個指令,進入即時開發迴圈
01
安裝套件
一個套件,含 React 綁定與粒子引擎,零額外相依。
$npm install kadou
02
匯入引擎
熟悉的宣告式 API,五分鐘從現有專案無痛遷移。
$import { motion } from "kadou/react"
03
邊寫邊看
啟動本地遊樂場,改參數即時熱更新,所見即所得。
$kadou dev --playground
使用者見證
調參數的人,都回不去了
「以前調一顆彈簧要在編輯器和瀏覽器之間來回半天,現在滑桿一拖、程式碼同步更新,整個團隊的動畫語言終於統一了。」
「身為設計師,我可以直接在遊樂場裡調出想要的手感,再把匯出的元件丟給工程師。溝通成本幾乎歸零。」
「12kb 的核心跑出 60fps 的粒子場,這在我們的行銷頁上是決定性的差異。Lighthouse 分數一分都沒掉。」