-1 C
New York
Monday, February 3, 2025

Nim is a free and open-source private web site template constructed with Subsequent.js 15, React 19 and Movement-Primitives.


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.



Supply hyperlink

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles