I built a motion library where the site becomes the preview

Most UI libraries are built around one flow:

Browse → Copy → Paste

That works well for components.

But motion is different.

You cannot fully judge a cursor effect, animated background, card hover, or button interaction from a static screenshot.

Even a small preview box is not always enough.

Sometimes you need to feel the effect across a real interface before deciding if it belongs in your project.

That became the main idea behind GrabMotion.

👉 https://grabmotion.dev

GrabMotion is a customizable motion playground with 25+ copy-ready motion effects for modern websites.

The flow is simple:

Feel → Tune → Apply → Copy → Ship

The difference

I like tools like shadcn, Magic UI, Aceternity UI, and other modern UI libraries.

They have made it much easier to copy polished UI patterns into real projects.

But most of these tools are optimized for components.

You browse a component, copy the code, paste it into your project, and customize it later.

That is useful.

But I wanted to explore a different workflow for motion.

Motion is not only about how something looks.

It is about how it feels.

So GrabMotion is built around customization before copying.

The site becomes the playground

The most important feature I recently added is Apply Mode.

Some effects now have an apply button directly on the homepage card.

When you click it, the effect is temporarily applied to the GrabMotion website itself.

Not inside a tiny demo box.

Not as a screenshot.

Not as a separate page.

The actual site becomes the preview.

That means you can try things like:

• animated backgrounds across the whole interface


• cursor effects while browsing the site


• cursor-driven overlays


• card interaction previews


• motion effects in a more realistic layout

Then, if the effect feels right, you can open it, customize it, and copy the code.

If it does not feel right, stop it and try another one.

That small change makes the product feel less like a gallery and more like a motion playground.

Why this matters

A particle background might look amazing in a small preview.

But on a real page, it might be too distracting.

A cursor trail might look cool in isolation.

But across a full layout, it might feel too heavy.

A card hover might look polished in a demo.

But it needs to feel right with actual content around it.

That is why I wanted GrabMotion to answer one question before users copy anything:

Does this motion actually feel good in context?

What is inside GrabMotion

GrabMotion currently includes 25+ effects across:

• Canvas backgrounds


• Cursor effects


• Button interactions


• Card hover effects


• Text effects


• Overlay-style motion patterns

Some current effects include:

• Dot Grid


• Particle Field


• Liquid Grid


• Bird Swarm


• Star Field


• Lightning Storm


• Vortex Tunnel


• Gravity Button


• Sheen Button


• Spotlight Button


• Slice Button


• Magnetic Buttons


• 3D Tilt


• Proximity Glow


• Edge Flow Card


• X-Ray Card


• Comet Trail


• Cursor Trail


• Rope Cursor


• Googly Eyes


• Pixel Dissolve


• Neon Thread


• Fire & Smoke


• Elastic Cursor


• Text Scramble


• Glitch Text


• Physics Tooltip

Each effect includes

Every effect is designed to be explored, adjusted, and copied.

Depending on the effect, you get:

• live interactive preview


• customization controls


• editable code output


• copy-to-clipboard support


• full-screen code viewer


• dark/light theme support


• responsive layout


• reduced-motion handling where applicable


• pointer-event friendly snippets where possible

Every effect supports:

• React


• Vue


• Vanilla JS

Some styling-first effects also include:

• CSS


• Tailwind snippets

The goal is not just to show nice animations.

The goal is to make motion easier to use in real projects.

Built for designers, developers, and vibe coders

GrabMotion is built for people who want to move fast without losing control over the details.

That includes:

• designers exploring interaction ideas


• frontend developers looking for reusable motion snippets


• product builders polishing landing pages and interfaces


• vibe coders building with AI-assisted workflows

Sometimes you do not need a full component.

Sometimes you just need:

• a better hover effect


• a smoother cursor interaction


• a more interesting background


• a button that feels alive


• a small detail that makes the interface feel more polished

That is where GrabMotion fits.

Built with AI-assisted development

GrabMotion was designed, developed, and launched by me using AI-assisted development.

I used tools like Cursor + Claude as part of the workflow.

But this was not just prompting a random animation gallery into existence.

The real work was in making product decisions:

• What should the core workflow be?


• How should customization work?


• Which effects deserve site-wide apply mode?


• How should code templates be structured?


• How do you keep canvas effects smooth?


• How do you make generated code readable?


• How do you make motion feel useful instead of decorative?

AI helped me move faster.

But taste still mattered.

Debugging still mattered.

Interaction design still mattered.

Knowing when something felt wrong still mattered.

That is what vibe coding means to me.

Not just asking AI to write code.

But using AI across the full product workflow:

Think → Design → Build → Debug → Refine → Ship

Tech stack

GrabMotion is built with:

• Next.js 14


• App Router


• TypeScript


• Tailwind CSS


• Shiki


• Framer Motion


• HTML Canvas

It is a static frontend project.

No auth.

No backend.

No database.

Just a focused product for exploring, customizing, applying, and copying motion effects.

What is next

This is still an early version of GrabMotion.

I will keep adding more effects, improving Apply Mode, polishing the customization experience, and making the generated snippets better.

The goal is not to become another component library.

The goal is to make motion easier to feel, tune, and ship.

Try it here:

👉 https://grabmotion.dev

Follow updates on LinkedIn:

👉 https://www.linkedin.com/company/grabmotion/

Feedback is welcome.