Easeful

The origin

I keep tweaking easing curves in production code and never quite know if I've got the right one. cubic-bezier.com lets you draw the curve; it doesn't let you see it on a real 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 thing is one reactive store, six CSS-driven previews, and an SVG curve editor with pointer events. Around 40KB gzipped, because it had to be: a tool you reach for when you're already deep in a stack should not bring its own stack with it. Twelve presets ship in the sidebar — half real conventions like Material standard, half new ones I named for the feeling. 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