Ma UI

Most component libraries treat animation as optional styling bolted on at the end. Developers add a fade here, a transition there, with no underlying rationale. The result is interfaces that move without purpose, or worse, do not move at all when they should. I wanted to build a library that started from the opposite assumption: motion is a first-class design concern, and every animation should have a reason to exist.

• 01

  The name comes from 間 (Ma), a Japanese concept describing the intentional pause between moments. In music it is the silence between notes. In design it is the space that gives movement meaning. Most animation feels gratuitous because it fills space rather than creating it. The library is built around that distinction.

• 02

  I chose to focus on AI-native product patterns specifically because general-purpose libraries like shadcn do not address them. Streaming text, AI thinking states, async action lifecycles. These are the interaction patterns that matter in 2026 and none of them have established component conventions yet.

• ·

  Every component is designed from its animated state first. The AsyncButton does not just change color when loading. It springs, weighs, and resolves. The FormField does not just turn red on error. It shakes with spring physics. The motion is not added at the end. It is the starting point.

• ·

  Every component on the docs site has a 'without animation' toggle. The goal was to make the before/after visceral. Switching it off makes the form field stop shaking, the button states cut hard, the skeleton pop. The toggle exists because the best argument for motion is the absence of it.

Ma UI is live at ma-ui.dev. Five components and a custom docs site built with Next.js and Tailwind. The landing page uses GSAP for scroll-driven section reveals. Component animations use Framer Motion throughout. Still a work in progess, as I add more components and build out the design tokens!

• ·

  The 'without animation' toggle was the best decision I made on this project. It forced me to justify every animation rather than just ship it. If the before and after look the same, the animation has no reason to exist. I would apply that constraint earlier on future projects.