106.9K+Télécharger
Aller au guide d’utilisation
Motion Canvaspar VideoZero

Motion Canvas Skill.

Écrivez des scènes Motion Canvas avec générateurs, signaux réactifs et nœuds réutilisables.

  • TypeScript
  • Animation Canvas
Télécharger OpenDesignVoir le guide d'utilisation
Revue de la source · motion-canvasSKILL.md
Tâche Écrivez des scènes Motion Canvas avec générateurs, signaux réactifs et nœuds réutilisables. Résultats Du code de scène Motion Canvas utilisant la configuration existante du projet. Avant de commencer Fournissez un projet Motion Canvas existant, sa version installée et un brief de scène avec l’ordre des actions. Déterminez les valeurs à partager sous forme de signaux et les moments nécessitant des événements temporels nommés.
Résumé éditorial · source examinée le 2026-11-02 · ce n’est pas un exemple généré

01 Fonctionnement

Écrivez des scènes Motion Canvas avec générateurs, signaux réactifs et nœuds réutilisables

Créez des scènes Motion Canvas avec timing par générateurs, signaux réactifs, références de nœuds, formes et transitions de scène explicites.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

motion-canvas est une référence du framework pour écrire des scènes Motion Canvas en TypeScript. Il explique le séquencement par générateurs, les signaux réactifs, les références et la hiérarchie de scène, puis montre comment les combiner avec formes, texte, tracés et médias.

La source inclut des mécanismes pratiques d’état et de timing : sauvegarde et restauration de nœuds, attente d’événements nommés, exécution de tâches en arrière-plan et clôture d’une transition personnalisée. Elle est utile lorsqu’un agent sait déjà quelle scène construire et a besoin des concepts corrects du framework pour l’exprimer.

Livrables attendus

  • Du code de scène Motion Canvas utilisant la configuration existante du projet.
  • Des signaux, composants et séquences temporelles réutilisables.
  • Un projet prêt pour son processus configuré d’aperçu et de rendu.
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Définir les objets de scène

    Créez les formes et textes nécessaires, attribuez des références et placez-les dans une hiérarchie de nœuds claire.

  2. 02
    Relier l’état au timing

    Utilisez des signaux pour les valeurs variables et des fonctions génératrices pour la séquence. Utilisez all() pour les actions simultanées et yield* pour une séquence qui attend la fin d’une animation. Des événements waitUntil() nommés peuvent aligner une scène sur un repère de narration.

  3. 03
    Vérifier les transitions et la sortie

    Ajoutez les nœuds de la scène entrante avant de lancer slideTransition() pour éviter leur apparition brutale après coup. Un useTransition() personnalisé renvoie une fonction de fin à appeler après l’animation de transition. Examinez l’aperçu ou le rendu configuré et préservez les réglages de sortie propres au projet.

02 Cas d’usage

Quand l’utiliser

Fournissez un projet Motion Canvas existant, sa version installée et un brief de scène avec l’ordre des actions. Déterminez les valeurs à partager sous forme de signaux et les moments nécessitant des événements temporels nommés.

Un bon choix

  • Une animation par code exige un séquencement précisLes générateurs et événements temporels nommés rendent explicites les relations entre actions.
  • Plusieurs objets partagent une valeur variableLes signaux calculés peuvent dériver la géométrie d’une source unique au lieu de mettre chaque nœud à jour manuellement.

Limites à vérifier

  • Le framework doit être disponibleLe skill est une référence, pas un environnement Motion Canvas fonctionnel inclus.
  • Il est distinct de l’automatisation de l’éditeurLa navigation temporelle, les captures et le contrôle HTTP du rendu relèvent du skill compagnon motion-canvas-agent.
  • Les exemples nécessitent des contrôles du projetLa version du framework et la configuration de sortie existantes doivent guider l’adaptation des exemples.

Éléments à fournir

  • Brief de scèneDécrivez les objets visibles, l’ordre des actions et l’explication ou le récit.
  • Configuration du projetFournissez les sources Motion Canvas actuelles et la version installée.
  • Timing et sortiePrécisez durée, événements, dimensions de l’image et format de rendu requis.

03 Décisions importantes

Les décisions importantes

  1. Relations de scène réactives

    Un signal calculé peut synchroniser les dimensions dépendantes.

  2. Séquencement lisible

    Le code générateur rend visibles attentes, actions parallèles et transitions dans les sources.

  3. Composants réutilisables

    Les nœuds personnalisés et états sauvegardés permettent des éléments visuels répétés et des actions réversibles.

04 Exemple de brief

Essayez un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Examinez la source et la configuration

Décrivez les objets visibles, l’ordre des actions et l’explication ou le récit.

Fichier source amont
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas/SKILL.md

Le lien ci-dessous ouvre les instructions d’origine. Vérifiez la configuration du dépôt avant utilisation ; ce n’est pas une commande d’installation.

Commencez par un livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d’exécuter le skill.

Exemple de brief
Utilise motion-canvas pour construire dans mon projet existant une courte scène montrant trois paquets traversant une file. Donne à chaque paquet une identité stable et dérive l’espacement de la file d’un seul signal. Introduis les libellés avant l’action, déplace les paquets successivement et synchronise le compteur avec l’état visible. Utilise un événement nommé pour la pause explicative finale. Préserve la version installée du framework et les réglages actuels de rendu. Livre le code de scène et examine ses transitions d’entrée et de sortie, surtout tout objet n’apparaissant qu’après la fin de la transition.

Examinez le résultat

Comparez le résultat réel à ces critères observables.

  • Vérifiez les relations entre signaux et la stabilité des références d’objets.
  • Vérifiez l’ordre de séquence, les tâches en arrière-plan et la fin des transitions.
  • Examinez séparément l’aperçu configuré et la sortie réellement rendue.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, ses identifiants et ses dépendances logicielles.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
VideoZero
Dépôt
VideoZero/skills
Fichier du skill
SKILL.md
Licence
Apache-2.0
Version examinée
2026-11-02 · 670ff96af614
Résumé éditorial de la source
Écrivez des scènes Motion Canvas avec générateurs, signaux réactifs et nœuds réutilisables.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Qu’apportent les fonctions génératrices ?

Elles décrivent les actions temporelles de la scène par des yields, attentes et opérations d’animation composées. La source en fait le principal mécanisme de séquencement.

À quoi servent les signaux ?

Ils stockent les valeurs variables et peuvent en dériver d’autres de manière réactive, par exemple la taille d’une forme à partir d’un rayon partagé.

Cela inclut-il l’automatisation des captures ?

La référence du framework couvre l’écriture de scènes. Le skill compagnon motion-canvas-agent documente une passerelle de contrôle HTTP et de capture pour un éditeur en cours d’exécution.

OpenDesign

Gardez votre brief et votre travail de design au même endroit.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas/SKILL.md