How it works
From copy to moving in two minutes.
Every effect is one small block of code with your text and colours already in it. You never edit code: you paste it where your site accepts it, or let your AI do it for you.
Three steps
Pick, style, paste.
Pick an effect
Browse the effects and open one you like.
Make it yours
Type your own text and pick your background, text and accent colours. The preview updates as you go.
Copy and paste
Press Copy code or Copy for AI, then paste. The window tells you exactly where for your platform.
Two buttons
Copy code, or Copy for AI.
For site builders
Shopify, Webflow, Wix, WordPress, Framer and Squarespace all have a place for custom HTML. Paste it there and save.
For AI assistants
Building with Claude Code, Cursor, Lovable or Emergent? You get the code plus a ready-made instruction. Paste it into the chat and the assistant places it for you.
Connect your AI
Let your AI find, style and place the effects.
Create an account and your AI assistant can use the library directly. Tell it what your site needs in your own words. It searches the effects, shows you a live preview, sets your colours and text, and puts the code in the right place. You never need to know an effect's name.
Describe, don't search
“Something that makes my hero feel more premium.” Your AI looks through the whole library and suggests a few, with a reason for each.
See it move first
Every suggestion comes with a link to the live effect, so you choose before anything touches your site.
Your colours, your words
It reads your site's colours and fonts and sets them in the effect. Your text goes in where it belongs.
Put in the right spot
It knows where each effect goes on Shopify, Webflow, WordPress, React and more, and adds it for you.
Four steps
Set it up once, in about five minutes.
Create your access key
Press Create my access key. It is shown once, so copy it straight away. It is personal: keep it to yourself.
Add it to your AI
Pick your assistant below and paste what the page gives you. The page fills in your key, so there is nothing to edit.
Ask for what you want
Talk to your AI as usual. It reaches for the library whenever you ask for motion or animation.
One command
Open a terminal and paste the command from your account page. It looks like this, with your real key in place of the dots:
claude mcp add --transport http your-motion-designer https://yourmotiondesigner.com/mcp --header "Authorization: Bearer ymd_sk_••••••••••••••••••••••••••••
Then start Claude Code in your site's folder.
One settings entry
Open Cursor Settings, then MCP, then add a new server, and paste the block from your account page into mcp.json. Restart Cursor once.
One address
Open Settings, then Connectors, then add a custom connector, and paste the address from your account page. It contains your key, so treat it like a password.
Anything with MCP
Any assistant that supports MCP over HTTP works. Use the address and header shown on your account page.
Try saying
Ask in your own words.
- “My homepage feels static.”Your AI suggests a few effects for it, with previews.
- “Add a magnetic button to my hero, in my brand colours.”It fetches the effect, sets your colours, and adds it to the page.
- “What do you have for a pricing section?”It lists what fits, from calm to bold.
- “Something subtle, my brand is quiet and premium.”It leans towards small, slow effects and avoids heavy ones.
Your plan
Your AI can use what your plan includes.
The 11 free effects
Your AI can look through the whole library and show previews, but it can only place the 11 free effects.
All 195 effects
The moment the full library is unlocked for your account, the same key works for everything. There is nothing to set up again.
Where to paste
Your platform, step by step.
Shopify
In your admin, go to Online Store, then Customize. Click Add section, choose Custom Liquid, paste, then Save.
Webflow
In the Designer, press A, drag an Embed element onto the page, paste, then Save and Publish.
Wix
In the Editor, click Add, then Embed code, then Embed HTML. Choose Code, paste, then Update.
WordPress
In the page editor, add a Custom HTML block, paste, then Update.
Framer
Insert an Embed, set its type to HTML, and paste into the HTML box.
Squarespace
Edit the page, add a Code block, paste, then Save. Code blocks need a Business plan or higher.
Claude Code
Open Claude Code in your site's project folder, paste into the chat and press Enter.
Cursor
Open your project, paste into the chat and send. The instruction tells it where the effect goes.
Lovable
Paste into the chat of your project and send.
Emergent
Open your project in Emergent, paste into the chat and send.
Questions
Good to know.
Is it really free?
Yes. In the beta, 11 effects are free: enter your email once and copy as many as you like. The full library of 195 effects is coming, and beta users hear about it first.
Do I need to know how to code?
No. You change the text and colours in a simple window, press Copy, and paste. If you build with an AI assistant, Copy for AI includes the instruction, so the assistant does the placing.
Will it slow my site down?
Each effect is a single block of HTML, CSS and JavaScript with no libraries to load; most are under 6 KB. Animations pause when they're off screen.
Does it work on phones?
Yes. Effects are built for small screens, and the ones that follow a mouse play on their own when there's no mouse.
What about visitors who turn off animations?
Every effect respects the "reduce motion" setting on phones and computers, and shows a calm, still version instead.
Can I put the same effect on my page twice?
Yes. Each copy runs on its own without clashing with the others.
What is the AI connection?
A personal key that lets your AI assistant use the effects library directly: search it, preview effects, set your colours and place the code. It uses a standard called MCP, which Claude Code, Cursor, claude.ai and other assistants support. See the four steps.
Is my access key safe?
It is personal, shown only once, and stored on our side only in a form that cannot be turned back into the key. Do not share it. If it leaks or you lose it, make a new one on your account page: the old one stops working straight away.
My AI says an effect is locked.
Your plan does not include it yet. On the free plan your AI can place the 11 free effects. When the full library is unlocked for your account, the same key gives access to everything.
Is there a limit on what my AI can fetch?
Yes, a fair-use one: up to 20 effects in ten minutes and 80 a day. A normal build uses a handful.
Where does my email go?
If you use the email form, to our news list, so we can send your free effects and tell you about new ones. If you create an account, we keep your email to sign you in and send service messages, and you choose separately whether you also want news. Unsubscribe any time. The details are on the privacy page.
Try it