Toolverse
All skills

motion-canvas

by davila7

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

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
davila7
Category
UX / Design
Views
97

About this skill

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

How to use

  1. Zainstaluj Motion Canvas i jego zależności (@motion-canvas/core, @motion-canvas/2d, @motion-canvas/ui, @motion-canvas/vite-plugin w wersji 3.0.0 lub wyższej) w swoim projekcie TypeScript.

  2. Skonfiguruj Vite z pluginem Motion Canvas, używając workaround'u createRequire zamiast standardowego import — jest to konieczne, ponieważ @motion-canvas/vite-plugin jest dystrybuowany jako CommonJS i spowoduje błędy w projektach ESM.

  3. Utwórz plik animacji TypeScript z funkcją generatora opisującą sekwencję klatek. Użyj sygnałów reaktywnych do zarządzania wartościami, które zmieniają się w czasie animacji.

  4. Dodaj elementy wizualne — tekst, kształty, grafikę wektorową — używając komponentów Canvas API dostępnych w Motion Canvas. Możesz synchronizować animacje z audio lub voice-over'ami.

  5. Uruchom podgląd w czasie rzeczywistym za pomocą edytora Motion Canvas, aby natychmiast zobaczyć zmiany i iterować nad animacją.

  6. Zbuduj projekt za pomocą Vite — skill zawiera szablony konfiguracji i wskazówki do rozwiązywania typowych błędów budowania i konfiguracji.

Related skills

competitive-analysis

by anthropics

Analyze competitors with feature comparison matrices, positioning analysis, and strategic implications. Use when researching a competitor, comparing product capabilities, assessing competitive positioning, or preparing a competitive brief for product strategy.

UX / Design
58160

cold-email

by alirezarezvani

When the user wants to write, improve, or build a sequence of B2B cold outreach emails to prospects who haven't asked to hear from them. Use when the user mentions 'cold email,' 'cold outreach,' 'prospecting emails,' 'SDR emails,' 'sales emails,' 'first touch email,' 'follow-up

UX / Design
2359

mermaid

by iOfficeAI

Render Mermaid diagrams as SVG or ASCII art using beautiful-mermaid. Use when users need to create flowcharts, sequence diagrams, state diagrams, class diagrams, or ER diagrams. Supports both graphical SVG output and terminal-friendly ASCII/Unicode output.

UX / Design
1881

market-sizing-analysis

by wshobson

This skill should be used when the user asks to \

UX / Design
4791

ux-writing

by content-designer

Create user-centered, accessible interface copy (microcopy) for digital products including buttons, labels, error messages, notifications, forms, onboarding, empty states, success messages, and help text. Use when writing or editing any text that appears in apps, websites, or

UX / Design
24114

writing-rap-lyrics

by asvskartheek

Helps write rap lyrics with proper rhythm, flow, cadences, and structure. Teaches musical fundamentals (bars, beats, tempo, BPM) and lyric formatting. Use when writing rap lyrics, creating verses, understanding flow, structuring bars, improving cadence, learning rhythm patterns,

UX / Design
21102