apoorvlathey/motion-canvas-skills

Overview

This skill lets you create programmatic vector animations with TypeScript using the Motion Canvas library. It focuses on scene-driven, code-first animation where generator functions (yield*) control timing and sequencing. Use it to produce explainer videos, tutorials, data visualizations, and presentations with frame-accurate timing and optional audio synchronization.

How this skill works

You define a project with scenes written as generator functions that yield timed animation steps. Visual elements (Nodes) like Circle, Rect, Txt, Img, and Code are added to a scene and referenced via createRef for animation. Motion Canvas supports sequential, parallel, staggered, and looping patterns, reactive signals for computed values, and timeline markers to sync to audio or editor timeline events.

When to use it

• Building animated explainer videos or technical tutorials where timing and code-driven control matter
• Creating synchronized animations for narration or music using timeline markers and audio sync
• Animating UI concepts, data visualizations, and diagrams programmatically with precise transitions
• Generating presentations or recorded walkthroughs that require reusable, parameterized scenes
• Animating code snippets, highlighting edits, or demonstrating algorithm steps step-by-step

Best practices

• Structure projects into small scenes and import them in src/project.ts for modularity
• Use createRef for every node you animate and call the ref as a function when yielding
• Prefer signals for reactive values and computed state to keep visuals consistent automatically
• Combine yield* all(...) for parallel animations and sequence/stagger utilities for clear timing
• Configure rendering (resolution, frame rate, FFmpeg) in the editor before batch renders to avoid re-renders

Example use cases

• A 60–90 second explainer video with voiceover: sync scene events to audio markers using waitUntil
• Animated data visualization: animate signals to change chart shapes and labels over time
• Code tutorial: animate code edits and selections with the Code node to show refactors step-by-step
• Presentation slide transitions: compose slide scenes and use slideTransition/fadeTransition for polished cuts
• Micro-animations for product demos: loop and stagger animations to spotlight UI interactions