I built a motion library where the site becomes the preview

Hadil C — Mon, 01 Jun 2026 07:44:48 +0000

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.

Traditional UI libraries	GrabMotion
Copy the component first	Feel the effect first
Customize after pasting	Tune before copying
Preview in isolation	Apply effects in context
Edit values manually	Adjust visually
Then ship	Then copy the version you want

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: