Using with AI

AI assistants write better motion-components code when they read the current docs instead of guessing from what they learned in training. This site publishes its docs in formats they can read, and the package includes data that editors use for completions.

Give your assistant the docs

Three kinds of file cover every component. Pick the one that fits how your tool works.

File	What it has
llms.txt	A list of every component, docs page and recipe, with a link and one line each. Use it when your tool can follow links, like a coding agent that can browse the web.
llms-full.txt	Every component's attributes, events, slots and CSS custom properties in one file. Use it when you want to give a chat one link or one file.
.md pages	Any docs page as Markdown: add .md to the address, as in /docs/text/motion-marker.md. Use it when you work on one component and want a short context.

Each docs page also links its Markdown version in its <head>, so tools that look for one find it. To start a chat, point the assistant at the file and then describe the effect:

Read https://www.motion-components.dev/llms-full.txt first.
Then use motion-components to fade in the feature cards on my
landing page one after another as they scroll into view.

Add rules to your project

Coding agents read a rules file in your project before each task. Paste these rules into the file your tool reads, such as AGENTS.md, CLAUDE.md, a rule in .cursor/rules/ or .github/copilot-instructions.md.

## Animation

Use motion-components (https://www.motion-components.dev) for motion.

- Use a motion-components tag for entrances, hover and press feedback,
  text effects, icons, scroll effects and charts. Do not write CSS
  keyframes or animation code for these.
- Wrap existing markup instead of rebuilding it:
  `<motion-reveal><div class="card">...</div></motion-reveal>`
- Combine effects by nesting tags, for example `<motion-hover>` cards
  inside `<motion-stagger>`. Do not look for one option that does both.
- Import one subpath per tag: `import 'motion-components/motion-reveal'`
- Import `motion-components/preload.css` once, so content does not flash
  before the tags load. Other setups:
  https://www.motion-components.dev/docs/#flash
- Time is in seconds: `duration="0.6"`, `delay="0.2"`. Springs are tuned
  with `duration` and `bounce`.
- Boolean attributes are on when present. `once="false"` turns one off.
- CSS custom properties start with `--mc-`, for example
  `--mc-progress-color`.
- The components handle `prefers-reduced-motion`. Do not add your own
  check.
- Before using an attribute, check its name in
  https://www.motion-components.dev/llms-full.txt
  because names changed in past releases and names from memory can
  be wrong.

When the assistant uses old names

Models trained on older versions may write attributes that no longer exist, such as speed on motion-scramble, times in milliseconds, or --chart-1 instead of --mc-chart-1. Give the assistant llms-full.txt, or point it to the migration guide, which lists every rename and how to convert it.

Editor completions

The package includes data files that give VS Code completions and hover help for every tag and attribute in HTML files, and for every CSS custom property in CSS files. The hover help has the same guidance as these docs: when to use a component, when not to, and accessibility notes. It is a quick way to check what an assistant wrote. Add the files to .vscode/settings.json:

{
  "html.customData": [
    "./node_modules/motion-components/dist/vscode.html-custom-data.json"
  ],
  "css.customData": [
    "./node_modules/motion-components/dist/vscode.css-custom-data.json"
  ]
}

JetBrains IDEs such as WebStorm need no setup: they read the package's web-types.json on their own. Other tools can read node_modules/motion-components/dist/custom-elements.json, a Custom Elements Manifest with the same information.