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

PalateKit

Se connecter
Menu

Demander une ressource

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

0 / 280

Une page, une vidéo ou une image en ligne.

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.

Sélection PalateKit

Principes de motion design pour l'interface v1.0.0

Utilisez cette ressource pour choisir les durées, les courbes et la chorégraphie des animations d'une interface

Nouveau

  • 484 téléchargements
  • 134 mentions J'aime
  • 163 sauvegardes

4,49 €

Accès à vie à cette ressource, avec ses mises à jour.

Installer avec la CLI

Dans un terminal, depuis le dossier voulu :

npx --yes palatekit@latest install motion-design-principles

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 applique une méthode en huit étapes pour décider de l'émotion visée, de la personnalité de mouvement, de la durée et de la courbe de chaque animation. Il s'appuie sur des tableaux chiffrés, des motifs prêts à l'emploi (entrées, états de succès et d'erreur, décalages) et une liste de contrôle qualité. Vous obtenez des animations cohérentes d'un écran à l'autre, qui fonctionnent avec CSS, GSAP, Framer Motion ou Lottie.

Choisie surtout par

Mise à jour le 2 novembre 2026

Tableau de durées et de courbes d'accélération pour animer une interface

Caractéristiques

Fonctionne dans
Guides d'installation
Génère avec
Le modèle de votre agent
Licence
MIT

Ressources similaires

Tout voir

Ce que vous obtenez

  • SKILL.md, traduit en français : arbre de décision, tableaux de durées, de courbes et de poids, règles de qualité
  • Dossier director : philosophie, personnalités de mouvement, cartographie des émotions, chorégraphie, principes de Disney
  • Dossier patterns : recettes d'entrée et de sortie, retour d'état, mouvements d'ambiance, séquences à plusieurs éléments
  • Dossier reference : tables de durées, choix des propriétés, dépannage, liste de contrôle qualité (en anglais)

Pour qui

  • Animer une page d'accueil, des cartes, des fenêtres modales ou des boutons avec un style de mouvement unique
  • Définir l'identité de mouvement d'une marque (courbe signature, trois durées, motif d'entrée)
  • Corriger une animation qui paraît robotique, trop lente ou chargée

Pas pour qui

  • Produire des vidéos de motion design rendues en MP4
  • Apprendre la syntaxe d'une bibliothèque d'animation en particulier

Étiquettes

  • animation
  • motion design
  • micro-interactions
  • interface
  • courbes

À propos

Vous dites

« Anime l'apparition des cartes de tarifs de ma page avec un style premium, puis donne-moi les durées et les courbes retenues. »

Tableau de durées et de courbes d'accélération pour animer une interface

Skill publiée par LottieFiles sous licence MIT, traduite par PalateKit.

Voir plus

Prérequis

À préparer
La description de l'élément ou de l'écran à animer et Le ressenti ou la personnalité de marque visés

Comment l'utiliser

  1. Installez la skill dans le dossier de skills de votre agent.
  2. Décrivez l'élément à animer et le ressenti voulu (calme, joueur, énergique).
  3. Laissez l'agent choisir l'archétype, puis vérifiez le résultat avec la liste de contrôle qualité.

Aperçu du contenu

Fichiers

  • director/choreography.md3,1 Ko
  • director/context-adaptation.md3,1 Ko
  • director/core-philosophy.md1,9 Ko
  • director/decision-framework.md2,9 Ko
  • director/disney-principles.md3,2 Ko
  • director/emotion-mapping.md2,9 Ko
  • director/motion-personality.md3 Ko
  • director/narrative-structure.md2,4 Ko
  • LICENSE1 Ko
  • NOTICE-PALATEKIT.md0,4 Ko
  • patterns/ambient-continuous.md2,8 Ko
  • patterns/entrance-exit.md2,8 Ko
  • patterns/multi-element.md2,4 Ko
  • patterns/state-feedback.md3,1 Ko
  • reference/property-selection.md2,9 Ko
  • reference/quality-checklist.md2,1 Ko
  • reference/timing-easing-tables.md2,9 Ko
  • reference/troubleshooting.md2,7 Ko
  • SKILL.md14,5 Ko

Origine et licence

Modifié par PalateKit

Auteur
lottiefiles
Source
github.com/lottiefiles/motion-design-skill/tree/f9a8a041b85185ee4881b3471d3415e939aac772/skills/motion-design
Licence
MIT

Notice

Version modifiée de « motion-design » (lottiefiles, 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 fichiers de référence sont-ils traduits ?

Seul SKILL.md est traduit en français. Les fichiers des dossiers director, patterns et reference restent en anglais, mais l'agent les lit sans difficulté.

Faut-il une bibliothèque d'animation précise ?

Non. Les valeurs de durée et de courbe s'appliquent à CSS, GSAP, Framer Motion, Lottie ou tout autre système.