Easeful
A cubic-bezier studio. Shape a curve, test it across six real UI gestures, then copy the snippet for CSS, Framer, Spring, or Tailwind.
- Role
- Solo build
- Year
- 2026
- Category
- Interactive
- Weight
- 120g
- Price
- Single-origin
- Roast
- 2/5
- Notes
- Tactile · Precise · Curve-led
- Stack
- TypeScript · Vite · SVG
The origin
I kept tuning easing curves in production code without a clear way to feel the result. cubic-bezier.com lets you draw the curve; it does not show how that curve behaves in real interface motion. So I built the tool I wanted: a curve editor on the left, six representative UI gestures on the right — modal, drawer, toast, card flip, button press, page transition — all driven by the same curve at the same time.
The pull
Vanilla TypeScript and Vite. No framework, no state library, no animation library. The whole tool is one reactive store, six CSS-driven previews, and an SVG curve editor powered by pointer events. It lands at around 40KB gzipped, because a tool you reach for mid-build should not bring another stack with it. Twelve presets sit in the sidebar — half established conventions like Material standard, half new curves named for their feel. Saves go to localStorage. Export covers CSS, Framer Motion, React Spring, and Tailwind arbitrary values.
What came out
12 presets · 6 live previews · 4 export formats · ~40KB gz