From our sponsor: Agent.ai Builder is now open—no waitlist. Explore 12+ foundation models, no-code to full-code. Free!
Creating animations for the web can often feel time-consuming and challenging. As animation becomes an increasingly important part of the modern web, I felt there was a need for something to make it easier, something like shadcn/ui, but for animated components.
That’s why I created Motion-Primitives: a library of pre-built, customizable, and easy-to-integrate motion components designed to simplify the process of adding animations to websites.
Templates are an essential part of the Motion-Primitives project, and Nim is the first. Built as a practical example, it demonstrates how these components can be used in a minimal and customizable portfolio template.
Nim is designed for developers, designers, and founders who want a clean personal website with a blog and subtle animated details. It’s free, open-source, and built with Next.js 15, React 19, Tailwind CSS v4, and Motion-Primitives.
Designed for simplicity and usability, Nim is easy to customize. The blog is powered by MDX, and animations are built using Motion-Primitives.
What is Motion-Primitives?
Motion-Primitives is an open-source library of customizable, pre-built motion components. Built with Motion and Tailwind CSS, it’s designed to make the web more interactive and enjoyable.
Explore GitHub the repository and check out the documentation.
How Nim uses Motion-Primitives
Here are some components used in the Nim template:
Text Effect
The “design engineer” title animates on entry with the TextEffect component using a preset fade.
Morphing Dialog
For the video section, the MorphingDialog component transitions the video into a focused view.
Spotlight
In the work experience section, the Spotlight component adds a cursor-following border effect.
Animated Background
On the blog, hovering over elements moves the background with the AnimatedBackground component.
Text Loop
In the footer, we use TextLoop to rotate through text
Text Morph
In the blog, we use TextMorph to transition from “Copy URL” to “Copied URL,” adding a small, enjoyable detail.
Closing notes
Nim demonstrates how simple, well-crafted animations can add personality to a minimal personal website, making it more engaging and memorable.
Live demo: https://nim-fawn.vercel.app/
GitHub repository: https://github.com/ibelick/nim
Taking it further
If you’re interested in exploring more motion components, pre-built sections, and templates, check out Motion-Primitives Pro.
