Motion Primitives
Small, composable animation building blocks rather than finished effects
Motion Primitives is a set of low level animated components for React: text effects, animated groups, transitions and disclosure patterns. It sits one layer below the effect catalogues, giving you the primitives to compose your own motion rather than a finished set piece.
What you get
The pieces are deliberately small. An animated group that staggers its children, a text effect that reveals per character, a transition panel. You assemble the moment rather than install it.
Because each primitive does one thing, they compose cleanly with each other and with your own components, which is rarely true of larger effect libraries.
How to use it well
This is the right shelf when you know what the motion should feel like and want the mechanics handled. It is the wrong shelf when you want to be shown an idea.
Establish one easing curve and one duration scale for the whole page first, then pass those into every primitive. Motion coherence comes from shared timing, not shared components.
Reach for it when
- you have a clear idea of the motion and want the plumbing done
- you are building a design system and need motion primitives inside it
- you want animation that does not announce which library you used
Watch out for
- it will not give you a finished hero, that is not what it is for
- some of the larger blocks sit behind a pro tier
- composing your own motion means you own the taste calls, which is more work than pasting an effect
Compare with these
- Landing pagesFree
Watermelon UI
Technical, animated landing templates installed through the shadcn CLI
- shadcn
- motion
- template
MITRead - Landing pagesFree tier
Magic UI
A large catalogue of animated marketing components for React
- animation
- shadcn
- motion
MITRead - Landing pagesFree tier
Aceternity UI
Big, cinematic hero effects with the code shown in full
- animation
- hero
- motion
Free to use, per the project's own termsRead