DS-001·個人項目 · 2026·120g
Easeful
一個 cubic-bezier 工作室。拉一條曲線,即時見到六個真實 UI 動作,亦可複製 CSS、Framer、Spring 或 Tailwind 的 snippet。
- 崗位
- 獨力開發
- 年份
- 2026
- 類型
- 互動
- 份量
- 120g
- 價錢
- 單品
- 烘焙度
- 2/5
- 風味
- 手感 · 精準 · 曲線主導
- 技術棧
- TypeScript · Vite · SVG
於 2026 出品 · 最佳品嚐期:永久
前往正式網站 ↗源起
在 production 寫 code 之際,我不停微調 easing curve,卻始終難以肯定挑得對。cubic-bezier.com 讓你畫一條曲線,卻看不到它在真實動畫中的樣貌。於是我索性做了一直想要的工具:左邊畫曲線、右邊六個常見 UI 動作 — modal、drawer、toast、card flip、按鈕點擊、頁面切換 — 同一條曲線同時驅動。
萃法
Vanilla TypeScript 加 Vite。沒有 framework、沒有 state library、沒有動畫 library。整個工具就是一個 reactive store、六個 CSS 驅動的 preview,再加一個用 pointer events 的 SVG 曲線編輯器。gzip 後約 40KB —— 必須如此精簡:當你已身處一個技術棧之中急需救援,這類工具就不該再夾帶自身那一套。Sidebar 有 12 個預設 — 一半是 Material standard 這類常見規範,另一半是我憑感覺命名。儲存放 localStorage。匯出支援 CSS、Framer Motion、React Spring,以及 Tailwind 的 arbitrary values。
出品
12 個預設 · 6 個即時預覽 · 4 種匯出格式 · 約 40KB gz