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.

Micro-interactions d'interface web v1.0.0

Utilisez cette ressource pour animer les retours visuels d'une interface web

Nouveau

  • 302 téléchargements
  • 233 mentions J'aime
  • 214 sauvegardes

Gratuit

Installer avec la CLI

Dans un terminal, depuis le dossier voulu :

npx --yes palatekit@latest install ui-micro-interactions

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 principes précis (durées de 100 à 250 ms, transform et opacity seulement, entrées plus lentes que les sorties) et choisit entre Framer Motion et le CSS pur. Il livre une démo HTML autonome dont chaque état peut être figé avec ?state= pour être capturé et contrôlé. La réduction de mouvement est toujours prise en charge.

Choisie surtout par

Mise à jour le 2 novembre 2026

Bouton like, interrupteur et toast animés dans une page HTML autonome, avec leurs états au repos et ouvert.

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 : principes, recettes et méthode de vérification
  • references/framer-motion-recipes.md : variants, AnimatePresence, layout, Reorder, gestes
  • references/css-recipes.md : @starting-style, allow-discrete, popovers, @property, réduction de mouvement

Pour qui

  • Vous voulez un bouton like, un interrupteur ou un toast agréables à utiliser
  • Vous animez l'ouverture d'un tiroir, d'une modale ou le tri d'une liste
  • Vous cherchez des effets légers sans bibliothèque lourde

Pas pour qui

  • Des animations cinématiques ou des vidéos de présentation
  • Une animation d'illustration SVG complexe
  • Un site sans interactions à animer

Étiquettes

  • micro-interaction
  • framer motion
  • css
  • ux
  • animation

À propos

Vous dites

« Anime ce bouton « ajouter au panier » : retour d'appui instantané, puis transformation en coche de confirmation, avec la réduction de mouvement respectée. »

Bouton like, interrupteur et toast animés dans une page HTML autonome, avec leurs états au repos et ouvert.

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

Voir plus

Prérequis

À préparer
L'élément d'interface à animer, ou une capture et Votre technologie (React ou HTML et CSS)

Comment l'utiliser

  1. Installez la skill dans le dossier de skills de votre agent.
  2. Décrivez l'interaction à animer et indiquez si votre projet utilise React ou du CSS pur.
  3. Ouvrez la démo, testez chaque état avec ?state= et validez le rendu.

Aperçu du contenu

Fichiers

  • LICENSE1,1 Ko
  • NOTICE-PALATEKIT.md0,4 Ko
  • references/css-recipes.md4,9 Ko
  • references/framer-motion-recipes.md6 Ko
  • SKILL.md9,9 Ko

Origine et licence

Modifié par PalateKit

Auteur
iart-ai
Source
github.com/iart-ai/web-animation-skills/tree/b6dba3eb759726845a44163ff0bad70dd9e7fbb6/skills/micro-interaction
Licence
MIT

Notice

Version modifiée de « micro-interaction » (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

Faut-il Framer Motion ?

Non. La skill propose aussi une voie en CSS pur (@starting-style, transition-behavior). Framer Motion (motion/react) sert aux gestes, aux sorties animées et aux transitions de mise en page.

À quoi servent les scripts cités dans le texte ?

À capturer des états de la démo. Ils ne sont pas livrés ici et restent facultatifs : la commande Playwright donnée dans la skill suffit.