Chapter 2: Install Motion+ for React

Core Idea

Install Motion+ for React from the private npm registry using an environment variable, with setup for npm, pnpm, Bun, Yarn, and CI.

Key Concepts

• Quick start (npm, pnpm, Bun): **1.
• Where to put the token: Your package manager reads ${MOTION_TOKEN} from the process environment at install time.
• Yarn: Yarn 1 (Classic) ignores the scoped-registry line in .npmrc
• CI: Add MOTION_TOKEN as a secret in your CI provider and expose it as an environment variable.
• Migrating from the URL-based install: If you previously installed Motion+ via https://api.motion.dev/registry.tgz?...:
• Troubleshooting: 1.
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

@motionplus:registry=https://api.motion.dev/npm/
//api.motion.dev/npm/:_authToken=${MOTION_TOKEN}

• What it demonstrates: Core usage pattern for Install Motion+ for React.

Key Takeaways

1. Install Motion+ for React supports Quick start (npm, pnpm, Bun).
2. Install Motion+ for React supports Where to put the token.
3. Install Motion+ for React supports Yarn.

Connects To

• Custom cursor & follow-cursor animations: related Motion doc page.
• React carousel component: related Motion doc page.
• Ticker: related Motion doc page.
• Install the Motion AI Kit: related Motion doc page.