From a Reel Comment to Open Source: Introducing ClipMotion

Moin Malek — Sun, 21 Dec 2025 08:19:50 +0000

While scrolling through Instagram Reels, I came across a website showing animation — a bulb product page where an ON/OFF switch smoothly toggled between images like a crossfade. It looked simple, but the animation was beautifully done.

I casually explained how it could be implemented in the comments.
To my surprise, many people reached out asking: “Can you share the code?”

That’s when I realized it could be great project since:

We constantly get inspired by animations from reels, shorts, and videos
But implementing them from scratch every time is repetitive and time-consuming or you might not know to do how do that.

That’s when I thought:

What if you could paste a video link and get a reusable animation component?

That idea became ClipMotion.

ClipMotion is an open-source CLI tool that helps you discover and add animation components inspired by real videos directly into your web projects.

ClipMotion is published on npm and works with most package managers.

Initialize ClipMotion in your project

npx clipmotion init

This sets up everything you need.

Add an animation component

# npx clipmotion <component-name...>
npx clipmotion image-crossfade

That’s it.
The component gets added to your project and is ready to use.

You can think of it as a bridge between animation inspiration and real code.

Why This Is Open Source (and Why I Need You)

I’ll be honest:

I’m not an animation expert.

And that’s exactly why ClipMotion is open source.

Instead of pretending to know everything, I decided to build a community-driven project.
To support that, I’ve added clear issue templates for:

🎨 Animation requests (Saw a cool animation in a reel? Just link it.)
🐛 Bug reports
💡 Ideas & improvements

You don’t need to be an animation wizard to contribute.
If you love frontend, motion, or developer experience — there’s space for you here.

Let’s Build an Animation-Driven Ecosystem

If you’ve ever:

Saved a reel because of an animation
Wanted to recreate it later
Or wished animations were easier to reuse

Then ClipMotion is for you.

🔗 GitHub: https://github.com/nerdboi008/clipmotion

⭐ Star the repo
🧩 Contribute an animation
💡 Request one you saw online

Sometimes the best projects really do start with a simple comment.

DEV Community: Moin Malek

From a Reel Comment to Open Source: Introducing ClipMotion

That’s when I thought:

Initialize ClipMotion in your project

Add an animation component

Why This Is Open Source (and Why I Need You)