106.9K+Scarica
Vai alla guida all’uso
Motion Canvasdi VideoZero

Motion Canvas Skill.

Scrivi scene Motion Canvas con generatori, segnali reattivi e nodi riutilizzabili.

  • TypeScript
  • Animazione Canvas
Scarica OpenDesignVedi la guida all'uso
Esame della fonte · motion-canvasSKILL.md
Attività Scrivi scene Motion Canvas con generatori, segnali reattivi e nodi riutilizzabili. Risultati Codice di scena Motion Canvas con la configurazione esistente del progetto. Prima di iniziare Fornisci un progetto Motion Canvas esistente, la versione installata e un brief di scena con l’ordine delle azioni. Decidi quali valori saranno segnali condivisi e quali momenti richiedono eventi temporali nominati.
Sintesi editoriale · fonte esaminata il 2026-11-02 · non è un esempio generato

01 Funzionalità

Scrivi scene Motion Canvas con generatori, segnali reattivi e nodi riutilizzabili

Costruisci scene Motion Canvas con tempi basati su generatori, segnali reattivi, riferimenti ai nodi, forme e transizioni esplicite.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

motion-canvas è un riferimento del framework per scrivere scene Motion Canvas in TypeScript. Spiega sequenze basate su generatori, segnali reattivi, riferimenti e gerarchia della scena, poi mostra come combinarli con forme, testo, tracciati e media.

La fonte include meccanismi pratici per stato e tempi: salvataggio e ripristino di nodi, attesa di eventi nominati, esecuzione di attività in background e conclusione di transizioni personalizzate. È utile quando un agente conosce già la scena da costruire e necessita dei concetti corretti del framework per esprimerla.

Risultati attesi

  • Codice di scena Motion Canvas con la configurazione esistente del progetto.
  • Segnali, componenti e sequenze temporali riutilizzabili.
  • Un progetto pronto per il flusso di anteprima e rendering configurato.
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Definire gli oggetti della scena

    Crea forme e testi necessari, assegna riferimenti e disponili in una chiara gerarchia di nodi.

  2. 02
    Collegare stato e tempi

    Usa segnali per i valori variabili e funzioni generatrici per la sequenza. Usa all() per azioni simultanee e yield* per una sequenza che attende la fine di un’animazione. Eventi waitUntil() nominati possono allineare una scena a un punto della narrazione.

  3. 03
    Controllare transizioni e output

    Aggiungi i nodi della scena entrante prima di avviare slideTransition(), così non compariranno bruscamente dopo. Un useTransition() personalizzato restituisce una funzione di fine da chiamare dopo l’animazione di transizione. Esamina anteprima o rendering configurato e conserva le impostazioni di output del progetto.

02 Quando usarlo

Quando usarla

Fornisci un progetto Motion Canvas esistente, la versione installata e un brief di scena con l’ordine delle azioni. Decidi quali valori saranno segnali condivisi e quali momenti richiedono eventi temporali nominati.

Adatta a

  • Un’animazione da codice richiede sequenze preciseGeneratori ed eventi temporali nominati rendono esplicite le relazioni tra azioni.
  • Più oggetti condividono un valore variabileI segnali calcolati possono derivare la geometria da un’unica fonte invece di aggiornare manualmente ogni nodo.

Limiti da verificare

  • Il framework deve essere disponibileLa skill è un riferimento, non un runtime Motion Canvas funzionante incluso.
  • È separata dall’automazione dell’editorNavigazione temporale, screenshot e controllo HTTP del rendering appartengono alla skill complementare motion-canvas-agent.
  • Gli esempi richiedono controlli sul progettoVersione del framework e configurazione di output esistenti devono guidare l’adattamento degli esempi.

Cosa portare

  • Brief di scenaDescrivi oggetti visibili, ordine delle azioni e spiegazione o storia.
  • Configurazione del progettoFornisci sorgenti Motion Canvas attuali e versione installata.
  • Tempi e outputSpecifica durata, eventi, dimensioni e formato di rendering richiesto.

03 Decisioni importanti

Le decisioni importanti

  1. Relazioni reattive nella scena

    Un segnale calcolato può sincronizzare dimensioni dipendenti.

  2. Sequenze leggibili

    Il codice generatore rende visibili attese, azioni parallele e transizioni nei sorgenti.

  3. Componenti riutilizzabili

    Nodi personalizzati e stati salvati supportano elementi visivi ripetuti e azioni reversibili.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Esamina la fonte e la configurazione

Descrivi oggetti visibili, ordine delle azioni e spiegazione o storia.

File sorgente originale
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas/SKILL.md

Il riferimento seguente apre le istruzioni originali. Verifica la configurazione del repository prima di usarle: non è un comando di installazione.

Inizia con un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio
Usa motion-canvas per costruire nel mio progetto esistente una breve scena con tre pacchetti che attraversano una coda. Assegna a ciascuno un’identità stabile e deriva la spaziatura della coda da un solo segnale. Introduci le etichette prima dell’azione, sposta i pacchetti in sequenza e sincronizza il contatore con lo stato visibile. Usa un evento nominato per la pausa esplicativa finale. Conserva versione installata del framework e impostazioni attuali di rendering. Consegna il codice della scena ed esamina le transizioni in entrata e uscita, soprattutto eventuali oggetti che appaiono soltanto dopo il completamento della transizione.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • Controlla relazioni dei segnali e riferimenti stabili agli oggetti.
  • Verifica ordine della sequenza, attività in background e completamento delle transizioni.
  • Esamina separatamente anteprima configurata e output effettivamente renderizzato.

OpenDesign offre uno spazio di lavoro di design locale per agenti di programmazione. Questa scheda non significa che la skill sia inclusa nel pacchetto né che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesignLeggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata e collegata qui sotto. Comportamento e requisiti upstream possono cambiare.

Proprietario della fonte
VideoZero
Repository
VideoZero/skills
File della skill
SKILL.md
Licenza
Apache-2.0
Snapshot esaminato
2026-11-02 · 670ff96af614
Sintesi editoriale della fonte
Scrivi scene Motion Canvas con generatori, segnali reattivi e nodi riutilizzabili.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore di popolarità datato, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Cosa apportano le funzioni generatrici?

Descrivono azioni temporali della scena tramite yield, attese e operazioni di animazione composte. La fonte le usa come principale meccanismo di sequenziamento.

A cosa servono i segnali?

Conservano valori variabili e possono derivarne altri in modo reattivo, per esempio le dimensioni di una forma da un raggio condiviso.

Include l’automazione degli screenshot?

Il riferimento del framework copre la creazione di scene. La skill complementare motion-canvas-agent documenta un ponte di controllo HTTP e screenshot per un editor in esecuzione.

OpenDesign

Tieni insieme il brief e il lavoro di design.

Tieni brief, materiali di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesignSfoglia le skill di design
File sorgente originale
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas/SKILL.md