motion-canvas

Topics in the source

• Motion Canvas - Production-Ready Video Creation with TypeScript
• ⚠️ CRITICAL: ESM/CommonJS Interoperability Issue
• When to use
• Core Concepts
• Complete Setup Guide
• Step 1: Initialize Project
• Step 2: Configure package.json for ESM
• Step 3: Install ALL Required Dependencies

Complete production-ready skill for creating programmatic videos using Motion Canvas, including critical ESM/CommonJS workarounds, full configuration templates, and comprehensive troubleshooting. IMPORTANT: The @motion-canvas/vite-plugin package is distributed as CommonJS, which causes import errors in modern ESM projects. The standard import motionCanvas from '@motion-canvas/vite-plugin' WILL NOT WORK. You MUST use the createRequire workaround documented in the Setup section below. Use this skill whenever you are dealing with Motion Canvas code to obtain domain-specific knowledge about: Creating animated videos using TypeScript and generator functions Building animations with signals and reactive values Working with vector graphics and Canvas API Synchronizing animations with voice-overs and audio Using the real-time preview editor for instant feedback Implementing procedural animations with flow control Creating informative visualizations and diagrams Animating text, shapes, and custom components Setting up Motion Canvas projects from scratch with correct configuration Troubleshooting common setup and build errors Motion Canvas allows you to create videos using: Generator Functio

This is an excerpt. Refer to the complete source and its current requirements.