Toutes les ressources premium et membres pour 8,99 €/mois, en abonnement sans engagement. Voir les offres

PalateKit

Menu

Demander une ressource

Décrivez en une phrase la ressource qui vous manque. Nous vous écrirons quand elle sera publiée.

0 / 280

Débloquer PalateKit

Tout débloquer

Offre

Le paiement vaut acceptation de nos conditions générales de vente.

Paiement sécurisé par Stripe. Reçus et factures envoyés par e-mail.

Content de vous revoir

Connectez-vous pour installer, télécharger ou sauvegarder cette ressource. Un compte gratuit suffit pour les ressources gratuites.

Animation de schémas et graphiques v1.0.0

Utilisez cette ressource pour animer un schéma ou un graphique pour expliquer une structure ou des chiffres

Nouveau

  • 475 téléchargements
  • 202 mentions J'aime
  • 140 sauvegardes

Gratuit

Installer avec la CLI

Dans un terminal, depuis le dossier voulu :

npx --yes palatekit@latest install diagram-chart-animation

Sans option, la skill va dans ~/.agents/skills/ ; ajoutez --agent claude-code (ou codex, cursor…) pour viser un agent.

Première fois : connectez la CLI avec

npx --yes palatekit@latest login

L'agent révèle votre schéma dans l'ordre nœuds, liens, étiquettes, met en valeur l'élément actif et fait circuler les données sur les connecteurs. Il anime aussi barres, courbes et compteurs, avec un réglage pour le mouvement réduit. Vous obtenez un fichier HTML autonome, ou une composition Remotion si la sortie est une vidéo.

Mise à jour le 2 novembre 2026

Schéma de trois nœuds reliés qui se révèlent un à un, avec une barre de graphique qui grandit.

Caractéristiques

Guides d'installation
Génère avec
Le modèle de votre agent
Utilise
  • Navigateur web
  • Playwright (facultatif, pour les captures de contrôle)
Licence
MIT

Ressources similaires

Tout voir

Ce que vous obtenez

  • SKILL.md, traduit en français : principe de révélation, aide-mémoire des mouvements, extraits SVG, CSS et JavaScript, et liste de contrôle.
  • references/diagram-and-chart-recipes.md : recettes complètes pour schémas de séquence, d'architecture et graphiques avec D3, Framer Motion et Remotion.

Pour qui

  • Vous expliquez un processus ou une architecture lors d'un cours ou d'une présentation.
  • Vous voulez un graphique qui se construit pour un rapport client en ligne.
  • Vous préparez une vidéo explicative pilotée par des données.

Pas pour qui

  • Créer le schéma à partir de rien sans en décrire le contenu.
  • Des animations 3D ou des effets de particules.

Étiquettes

  • schéma
  • graphique
  • animation svg
  • explication
  • données

À propos

Vous dites

« Anime ce schéma de notre parcours client : les étapes apparaissent une à une, puis les chiffres montent jusqu'à leur valeur. »

Schéma de trois nœuds reliés qui se révèlent un à un, avec une barre de graphique qui grandit.

Skill publiée par iart-ai sous licence MIT, traduite par PalateKit.

Voir plus

Prérequis

À préparer
Le schéma ou la structure à animer. et Les chiffres exacts à afficher.
Dépendances
Navigateur web et Playwright (facultatif, pour les captures de contrôle)

Comment l'utiliser

  1. Décrivez ou collez le schéma et les données à animer.
  2. L'agent produit un fichier HTML avec une seule ligne de temps.
  3. Il le fige à plusieurs instants pour contrôler l'ordre et les chiffres.

Aperçu du contenu

Fichiers

  • LICENSE1,1 Ko
  • NOTICE-PALATEKIT.md0,5 Ko
  • references/diagram-and-chart-recipes.md9,3 Ko
  • SKILL.md9,8 Ko

Origine et licence

Modifié par PalateKit

Auteur
iart-ai
Source
github.com/iart-ai/explainer-video-skills/tree/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/diagram-animation
Licence
MIT

Notice

Version modifiée de « diagram-animation » (iart-ai, MIT) : traduction française et fiche par PalateKit.

Avis des utilisateurs

–

Aucune note pour l'instant

Chargement des avis…

Supprimer votre avis ?

Votre note et votre commentaire seront retirés de la fiche.

Questions fréquentes

Les scripts d'aide cités sont-ils inclus ?

Non, ils sont facultatifs et ne sont pas livrés ; la vérification se fait avec une capture Playwright décrite dans la skill.

Le fichier fonctionne-t-il hors ligne ?

Il charge GSAP depuis un CDN dans l'exemple ; téléchargez la bibliothèque si vous voulez un fichier entièrement hors ligne.