Animated interface design tool for macOS.
## Principle MCP Server: Advanced Animation Design The **Principle MCP Server** integrates the motion design tool directly into Google Antigravity, enabling AI assistants to create, manage, and export interactive animations and transitions programmatically. This integration brings sophisticated animation capabilities to your development workflow for crafting delightful user experiences. ### Why Principle MCP? - **Timeline Animation**: Create complex animations with keyframes and easing curves - **Interactive Drivers**: Build animations driven by scrolling, dragging, and other interactions - **Component System**: Create reusable animated components for consistent motion design - **Export Options**: Generate video previews, GIFs, and developer-ready specifications - **macOS Integration**: Native Mac app with smooth performance and system integration ### Key Features #### 1. Animation Creation ```python from anthropic import Anthropic client = Anthropic() response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Create a smooth page transition animation with a fade and slide effect" }], tools=[{ "name": "principle_animate", "description": "Create animations" }] ) ``` #### 2. Driver Configuration ```python # Set up interaction drivers response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Create a scroll-driven parallax animation for the hero section" }], tools=[{"name": "principle_drivers", "description": "Configure interaction drivers"}] ) ``` #### 3. Component Management ```python # Manage animated components response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Create a reusable button component with hover and press states" }], tools=[{"name": "principle_components", "description": "Manage components"}] ) ``` #### 4. Export Operations ```python # Export animations response = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, messages=[{ "role": "user", "content": "Export this transition as a video preview and generate timing specifications" }], tools=[{"name": "principle_export", "description": "Export animations"}] ) ``` ### Configuration ```json { "mcpServers": { "principle": { "command": "npx", "args": ["-y", "@anthropic/mcp-principle"], "env": { "PRINCIPLE_PATH": "/Applications/Principle.app" } } } } ``` ### Use Cases **Micro-Interactions**: Design and prototype subtle UI animations for enhanced user experience. **Page Transitions**: Create smooth navigation transitions for web and mobile applications. **Motion Specifications**: Generate timing and easing specifications for developer implementation. **Animation Previews**: Export video demonstrations of motion design for stakeholder review. The Principle MCP Server brings advanced animation design directly into your development workflow, enabling sophisticated motion design for delightful user experiences.
{
"mcpServers": {
"principle": {}
}
}