Skill · em Criar imagem, vídeo e arte

motion-canvas

Complete production-ready guide for Motion Canvas with ESM/CommonJS workarounds, full setup templates, and troubleshooting for programmatic video creation using TypeScript

Procedência

Antes de instalar

4 arquivos · 19 KB · só texto, nenhum script

Instalar na sua CLI

O comando baixa a versão fixada (commit 57f899e) direto da origem, para a pasta que a CLI lê. Precisa de curl (macOS e Linux); no Windows não há comando, porque o Rook Labs é para macOS.

Claude Code

Neste projeto: instala em .claude/skills/motion-canvas/.

d=".claude/skills/motion-canvas"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/video/motion-canvas"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/animations.md" "$u/references/animations.md" \
  -o "$d/references/generators.md" "$u/references/generators.md" \
  -o "$d/references/signals.md" "$u/references/signals.md"

Global: instala em ~/.claude/skills/motion-canvas/.

d="$HOME/.claude/skills/motion-canvas"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/video/motion-canvas"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/animations.md" "$u/references/animations.md" \
  -o "$d/references/generators.md" "$u/references/generators.md" \
  -o "$d/references/signals.md" "$u/references/signals.md"

Codex

Neste projeto: instala em .agents/skills/motion-canvas/.

d=".agents/skills/motion-canvas"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/video/motion-canvas"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/animations.md" "$u/references/animations.md" \
  -o "$d/references/generators.md" "$u/references/generators.md" \
  -o "$d/references/signals.md" "$u/references/signals.md"

Global: instala em ~/.agents/skills/motion-canvas/.

d="$HOME/.agents/skills/motion-canvas"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/video/motion-canvas"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/animations.md" "$u/references/animations.md" \
  -o "$d/references/generators.md" "$u/references/generators.md" \
  -o "$d/references/signals.md" "$u/references/signals.md"

Antigravity

Neste projeto: instala em .agents/skills/motion-canvas/.

d=".agents/skills/motion-canvas"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/video/motion-canvas"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/animations.md" "$u/references/animations.md" \
  -o "$d/references/generators.md" "$u/references/generators.md" \
  -o "$d/references/signals.md" "$u/references/signals.md"

Global: instala em ~/.gemini/antigravity-cli/skills/motion-canvas/.

d="$HOME/.gemini/antigravity-cli/skills/motion-canvas"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/video/motion-canvas"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/animations.md" "$u/references/animations.md" \
  -o "$d/references/generators.md" "$u/references/generators.md" \
  -o "$d/references/signals.md" "$u/references/signals.md"

Peça ao Rook

Já usa o Rook Labs? Cole no chat do Rook: instale a skill https://rooklabs.sh/marketplace/cct.motion-canvas

Prévia do SKILL.md

---
name: motion-canvas
description: Complete production-ready guide for Motion Canvas with ESM/CommonJS workarounds, full setup templates, and troubleshooting for programmatic video creation using TypeScript
version: 2.0.0
author: motion-canvas
repo: https://github.com/motion-canvas/motion-canvas
license: MIT
tags: [Video, TypeScript, Animation, Motion Canvas, Signals, Generators, Canvas API, Vector, Audio Sync, Vite, ESM]
dependencies: ["@motion-canvas/core>=3.0.0", "@motion-canvas/2d>=3.0.0", "@motion-canvas/ui>=3.0.0", "@motion-canvas/vite-plugin>=3.0.0"]
---

# Motion Canvas - Production-Ready Video Creation with TypeScript

Complete production-ready skill for creating programmatic videos using Motion Canvas, including critical ESM/CommonJS workarounds, full configuration templates, and comprehensive troubleshooting.

## ⚠️ CRITICAL: ESM/CommonJS Interoperability Issue

**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.

## When to use

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**

## Core Concepts

Motion Canvas allows you to create videos using:
- **Generator Functions**: Describe animations using JavaScript generators with `yield*` syntax
…

Ver todo o marketplace