Getting started.

01 — Bring it into your project.

Open an element and choose Download component. The ZIP includes its implementation, companion files, artwork, dependency list and an example with your selected settings. Copy components into your source tree and public assets into your public directory.

For repeat installations, download the Motiqo CLI. Move the downloaded archive into your React project folder, then run:

npm install --save-dev ./motiqo-cli-0.1.0.tgz
npx motiqo list
npx motiqo add luma --dir src/components/motiqo --dry-run
npx motiqo add luma --dir src/components/motiqo

The installer bundles all files and works offline after installation. It reports missing dependencies and protects existing files. Add --install to explicitly install missing packages with npm, with lifecycle scripts disabled. With pnpm, yarn or bun, install the listed dependencies using your own manager. Use --overwrite only after reviewing a conflict.

This is a downloadable package; it has not been published to the npm registry. React 19 is tested. WebGL components require a browser with the appropriate graphics support.

02 — Find the right mood.

Mood presets set a coherent combination of supported properties. Fine-tune individual controls, or choose Reset settings to return to defaults. Configurations are saved locally per component, including when you revisit from Saved.

Share configuration copies a link that restores your settings. Download component and Copy prompt use the same configuration. Source lets you inspect individual implementation files.

import Luma from './components/motiqo/luma';

export default function Example() {
  return <div style={{ height: 560 }}><Luma speed={0.7} /></div>;
}

Give canvas components a parent with a defined height. Styles are scoped and included; Tailwind and the Motiqo website stylesheet are optional. Keep companion files together and preserve artwork paths.

03 — Work with your agent.

npx motiqo skill

This installs the Motiqo skill at .agents/skills/motiqo/SKILL.md in your project. It guides compatible coding agents through discovery, dry-run installation, configuration and validation. It does not configure an MCP server.

04 — Or start with a prompt.

Copy prompt includes behavior, dependencies, selected properties and an import example. Choose an assistant with the adjacent arrow and supply the downloaded files so it can integrate the real implementation.

Preserve source attribution when an element uses an adapted engine. New artwork changes its visual identity; engine authorship remains credited.

Motion with room for everyone.

Components respect reduced motion and suspend animation when offscreen. The paused prop freezes motion. Reduced motion keeps keyboard inspection available for data components.

Aura exposes its score and risk semantically. Holdings announces selected positions. Pulse and Sentiment include data tables and keyboard inspection with meaningful, limited announcements. Sample values are illustrative. Provide your own labels and data when integrating a real product.

Test keyboard controls, contrast, touch and your actual layout before shipping. Automated checks cover behavior, exports and the installer; testing with assistive technology remains part of product validation.