Skip to content

Search pages

Jump to any page on the site.

3 steps · about 2 minutes · no coding needed

Use it in your app

Pick where you build. Follow the numbered steps. Then run one quick test to see your feel in action.

Step 1 · Where do you build?

Step 2 · Follow these steps

  1. Download your 3 motion files.

    They hold the feel you picked. Save them anywhere, like your Downloads folder.

  2. Open your Project on claude.ai.

    Go to claude.ai/projects. Open the project you build in, or click New project.

  3. Add the 3 files to the project's knowledge.

    In the project, find the files area (it may be called Project knowledge or Files). Click + and upload the 3 files you downloaded. You can also drag them in.

  4. Tell Claude to follow them.

    In the same project, click Set project instructions, paste this rule, and save:

    Follow MOTION.md for every animation and transition. Use its recipes and tokens; never write raw durations, easings, or spring values.

  5. Start a chat in the project and ask for an interface.

    Anything Claude builds in that project now moves with your feel. Try the test below.

Step 3 · Check that it worked

Ask your AI for this, in the same project:

Build a small settings page with two switches, a Save button, a confirm dialog, and a toast that says “Saved”. Follow MOTION.md for all movement.

It worked if:

  • The Save button gives a small squeeze when you press it.
  • The dialog and the toast move like the app on the Find your feel page.
  • The code mentions motif or MOTION.md, and has no made-up timings like 300ms.

What are these files?

MOTION.md
The rules, in plain English, for your AI: which movement each part of the screen gets, and what never to do.
motif.css
Your feel as CSS. Works on any website, no code library needed.
motif.ts
Your feel for React apps that use the Motion library.
motif.tokens.json
The raw numbers, for design tools and token pipelines. Most people can skip it.

Questions

Do I need to know how to code?
No. With Claude.ai Projects or an app builder you only download, upload, and paste. The AI does the code.
What if I change my feel later?
Come back, change it, and repeat your steps. The new files replace the old ones, and everything that follows MOTION.md updates with them.
What does “feel” change, exactly?
How fast things move, how much they bounce, and how far they travel, for every button, menu, dialog, and list. See all 11 on the interactions page.