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