Motion Primitives

Motion Primitives is ibelick's open source collection of animated React and Tailwind CSS primitives. This collection follows the 33 core components in the upstream public registry at commit 43a31886f505c0cd0f11887683cfb9ff36431f9c. Each listing installs from its canonical https://motion-primitives.com/c/{name}.json payload, so Catalogs does not host or fork the source.

The collection is organized into core components, text effects, number effects, interactive elements, toolbars, and advanced effects. The 94 public /e payloads are documentation examples of these components, not additional products. The two public /h hooks are bundled helpers and are also not separate listings.

Before installing

• Use React, Tailwind CSS, and Motion. Upstream currently targets React 18 and Tailwind CSS 4.
• Supply a conventional @/lib/utils cn helper backed by clsx and tailwind-merge. Twenty-five component files import it but the upstream payloads do not install it.
• Install lucide-react for Carousel, Dialog, Morphing Dialog, Toolbar Dynamic, and Toolbar Expandable. Those sources import Lucide even though their payloads omit the declaration.
• Infinite Slider, Sliding Number, and Toolbar Expandable also require react-use-measure.
• Preserve the @/lib and @/hooks aliases or rewrite imports after install.

No collection-wide provider, font, global CSS-variable block, or documentation site theme provider is required. Dark appearances use ordinary Tailwind dark: classes. Many primitives measure layout, render overlays, or follow the pointer, so their parent dimensions and overflow rules are part of the integration.

The upstream components do not currently implement a shared reduced-motion policy. Apply the consuming application's policy around continuous, entrance, pointer-following, and shared-layout animation before shipping.

Motion Primitives is MIT licensed. The actual upstream license file is LICENCE.md, despite a stale LICENSE.md link in the upstream README, and names ibelick as the 2024 copyright holder.