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

Conception d'animations web v1.0.0

Utilisez cette ressource pour concevoir ou corriger les animations d'une interface web

Nouveau

  • 359 téléchargements
  • 112 mentions J'aime
  • 131 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 web-animation-design

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 règles précises : quel easing pour une entrée, un déplacement ou un survol, quelle durée, quand utiliser un ressort, quand ne pas animer. Il vérifie la performance (transform et opacity) et prévoit le mouvement réduit. Vous obtenez des animations plus naturelles et une revue claire des défauts.

Choisie surtout par

Mise à jour le 2 novembre 2026

Courbes d'easing et tableau avant/après d'une revue d'animation

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 : easing, durées, ressorts, performance, accessibilité, arbre de décision
  • PRACTICAL-TIPS.md : mises en œuvre détaillées des cas courants (en anglais)
  • Un format de revue en tableau avant/après

Pour qui

  • Rendre des modales, menus et infobulles plus fluides
  • Corriger une animation qui saccade
  • Ajouter le mouvement réduit à un site

Pas pour qui

  • Créer une vidéo de motion design
  • Animer un logo ou une illustration
  • Un site sans aucune interaction

Étiquettes

  • animation
  • easing
  • css
  • interface
  • microinteractions

À propos

Vous dites

« Revois les animations de mon menu déroulant et de ma modale : elles paraissent lentes. »

Courbes d'easing et tableau avant/après d'une revue d'animation

Skill publiée par vercel-labs sous licence MIT, traduite par PalateKit. Elle s'appuie sur le cours d'Emil Kowalski.

Voir plus

Prérequis

À préparer
Le code ou la description des composants à animer

Comment l'utiliser

  1. Copiez le dossier dans le dossier de skills de votre agent
  2. Indiquez les composants à animer ou à revoir
  3. Appliquez le tableau avant/après proposé

Aperçu du contenu

Fichiers

  • LICENSE1,1 Ko
  • NOTICE-PALATEKIT.md0,5 Ko
  • PRACTICAL-TIPS.md6,6 Ko
  • SKILL.md12,6 Ko

Origine et licence

Modifié par PalateKit

Auteur
vercel-labs
Source
github.com/vercel-labs/open-agents/tree/cf865e94de7729751c747171785b6ce57e7b178c/.agents/skills/web-animation-design
Licence
MIT

Notice

Version modifiée de « web-animation-design » (vercel-labs, 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

Pourquoi l'agent ne répond-il rien au début ?

La skill est conçue pour n'afficher qu'une phrase d'accueil tant qu'aucune question n'est posée. Posez ensuite votre demande.

Faut-il une bibliothèque d'animation ?

Non, les règles valent en CSS pur ; des exemples Framer Motion sont donnés si vous l'utilisez.