skills.rest
sangrokjung
sangrokjungCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

motion-canvas

Create programmatic videos with Motion Canvas and TypeScript.

1|Updated Feb 7, 2026
Search Tags:#typescript#video#animation#vite#programmatic#motion canvas
One-click install
npx skills add https://github.com/sangrokjung/claude-code-config-public --skill motion-canvas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-canvas
Source: https://github.com/sangrokjung/claude-code-config-public/tree/main/commands/motion-canvas
Command: npx skills add https://github.com/sangrokjung/claude-code-config-public --skill motion-canvas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide and setup for creating programmatic videos using Motion Canvas, addressing common setup issues and providing ready-to-use templates.

Core Features & Use Cases

  • Programmatic Video Creation: Generate videos using TypeScript and generator functions.
  • ESM/CommonJS Workarounds: Solves critical import issues for the Motion Canvas Vite plugin.
  • Full Setup Templates: Includes detailed steps for project initialization, configuration, and dependencies.
  • Use Case: You need to create an animated explainer video for a new software feature. This Skill will guide you through setting up Motion Canvas and creating your first animation scene.

Quick Start

Follow the complete setup guide to initialize a Motion Canvas project and create your first animation scene.

Frequently Asked Questions about motion-canvas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create programmatic videos using TypeScript?▼

To create programmatic videos with TypeScript, you can use Motion Canvas to generate animations via generator functions, utilizing this Skill's setup templates and Vite plugin configuration for project initialization.

Why does the Motion Canvas Vite plugin fail to import correctly?▼

The Motion Canvas Vite plugin often fails due to ESM/CommonJS import conflicts, which this Skill resolves by providing specific workarounds to ensure proper module loading during your project setup.

How do I set up a Motion Canvas project from scratch?▼

Setting up a Motion Canvas project involves initializing dependencies, configuring the Vite plugin, and following detailed setup templates to create your first animation scene using TypeScript.

Can I synchronize animations with audio in Motion Canvas?▼

Yes, synchronizing animations with audio in Motion Canvas is supported, and this Skill provides troubleshooting guidance to address common build errors and configuration challenges during the synchronization process.

What are the limitations of using Motion Canvas for video generation?▼

Limitations of programmatic video generation with Motion Canvas include potential ESM/CommonJS import conflicts and build configuration errors, which require specific workarounds provided in the setup templates.

Does motion-canvas work with Vite for animating explainer videos?▼

Yes, Motion Canvas works directly with Vite to animate explainer videos, providing a TypeScript-based environment that uses generator functions to programmatically define and render animation scenes.

Related Skills

Explore More Design & Creative Skills→
OpenAEC-FoundationOpenAEC-Foundation
4

vite-impl-project-setup

Automate Vite project setup with TypeScript configuration and environment typing.

Official
Advanced
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
Aurora-AIAurora-AI
1

gsap-animation-master

Orchestrate GSAP timelines and ScrollTrigger animations with cleanup and performance practices.

Community
Advanced
DevMatt6DevMatt6

video

Automate video content creation with AI generation models and avatars.

Community
Advanced