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.

Règles de durée et de courbes du mouvement v1.0.0

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

Nouveau

  • 499 téléchargements
  • 140 mentions J'aime
  • 250 sauvegardes

Gratuit

Installer avec la CLI

Dans un terminal, depuis le dossier voulu :

npx --yes palatekit@latest install motion-timing-easing-rules

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 des repères chiffrés : durée par type d'interaction, courbe selon l'entrée ou la sortie, mouvement réduit obligatoire et interdits universels. Il s'appuie sur trois guides de référence pour les courbes, les recettes d'entrée et de sortie et le choix d'un style. Vous obtenez des animations cohérentes, rapides et accessibles.

Choisie surtout par

Mise à jour le 2 novembre 2026

Tableau de durées et de courbes d'accélération pour les micro-interactions et transitions d'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 : durées, courbes, accessibilité et règles « à ne pas faire »
  • references/easing-guide.md : approfondissement des courbes et des ressorts
  • references/enter-exit-recipes.md et references/designers.md : motifs d'entrée et de sortie, choix de style

Pour qui

  • Fixer une échelle de durées commune pour un site
  • Corriger des animations trop lentes ou saccadées
  • Rendre un site conforme au mouvement réduit

Pas pour qui

  • Construire une animation précise avec son code complet
  • Une vidéo de motion design
  • Un projet sans interface animée

Étiquettes

  • motion
  • easing
  • durées
  • accessibilité
  • css

À propos

Vous dites

« Revois les durées et les courbes de mes transitions et rends-les cohérentes, avec le mouvement réduit. »

Tableau de durées et de courbes d'accélération pour les micro-interactions et transitions d'interface.

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

Voir plus

Prérequis

À préparer
Le site ou les composants à revoir

Comment l'utiliser

  1. Placez le dossier de la skill dans le dossier de skills de votre agent.
  2. Indiquez les pages ou composants concernés.
  3. Appliquez les corrections proposées et testez avec le mouvement réduit activé.

Aperçu du contenu

Fichiers

  • LICENSE1,6 Ko
  • NOTICE-PALATEKIT.md0,4 Ko
  • references/designers.md5,6 Ko
  • references/easing-guide.md7,8 Ko
  • references/enter-exit-recipes.md11,1 Ko
  • SKILL.md9,8 Ko

Origine et licence

Modifié par PalateKit

Auteur
athevon
Source
github.com/athevon/genjutsu/tree/1f518a71378b15d423389e546e767cffc86e14c3/skills/_jutsu/motion-principles
Licence
MIT

Notice

Version modifiée de « motion-principles » (athevon, 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

La skill renvoie à des skills voisines (gsap, framer-motion, etc.). Sont-elles nécessaires ?

Non. Ce sont des renvois facultatifs. Les règles de base et les trois guides de ce dossier suffisent.

Les exemples SwiftUI et Compose me concernent-ils ?

Seulement si vous développez une application mobile native. Pour un site web, utilisez les exemples CSS et JavaScript.