Creating animations for the online can typically really feel time-consuming and difficult. As animation turns into an more and more necessary a part of the fashionable internet, I felt there was a necessity for one thing to make it simpler, one thing like shadcn/ui, however for animated parts.
That’s why I created Movement-Primitives: a library of pre-built, customizable, and easy-to-integrate movement parts designed to simplify the method of including animations to web sites.
Templates are a vital a part of the Movement-Primitives challenge, and Nim is the primary. Constructed as a sensible instance, it demonstrates how these parts can be utilized in a minimal and customizable portfolio template.
Nim is designed for builders, designers, and founders who need a clear private web site with a weblog and refined animated particulars. It’s free, open-source, and constructed with Subsequent.js 15, React 19, Tailwind CSS v4, and Movement-Primitives.
Designed for simplicity and usefulness, Nim is straightforward to customise. The weblog is powered by MDX, and animations are constructed utilizing Movement-Primitives.
What’s Movement-Primitives?
Movement-Primitives is an open-source library of customizable, pre-built movement parts. Constructed with Movement and Tailwind CSS, it’s designed to make the online extra interactive and pleasing.
Discover GitHub the repository and take a look at the documentation.
How Nim makes use of Movement-Primitives
Listed below are some parts used within the Nim template:
Textual content Impact
The “design engineer” title animates on entry with the TextEffect part utilizing a preset fade.
Morphing Dialog
For the video part, the MorphingDialog part transitions the video right into a centered view.
Highlight
Within the work expertise part, the Highlight part provides a cursor-following border impact.
Animated Background
On the weblog, hovering over components strikes the background with the AnimatedBackground part.
Textual content Loop
Within the footer, we use TextLoop to rotate by textual content
Textual content Morph
Within the weblog, we use TextMorph to transition from “Copy URL” to “Copied URL,” including a small, pleasing element.
Closing notes
Nim demonstrates how easy, well-crafted animations can add character to a minimal private web site, making it extra partaking and memorable.
Stay demo: https://nim-fawn.vercel.app/
GitHub repository: https://github.com/ibelick/nim
Taking it additional
If you happen to’re involved in exploring extra movement parts, pre-built sections, and templates, take a look at Movement-Primitives Professional.