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.

• ·

  I designed each component with motion in mind from the start. The AsyncButton, for example, does more than change color while loading. Itsprings into place, and settles when the action is complete. FormField errors use a subtle shake instead of relying only on a red state. Motion is part of how each component communicates, rather than something added after the interaction is already designed.

• ·

  Every component on the docs site has a 'without animation' toggle. The goal was to make the before/after visible. Switching it off makes the form field stop shaking, the button states cut hard, the skeleton pop.

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.