Animations pour site web : choix et construction
Ce skill aide à choisir une animation pour un site web et à la construire, à partir de 30 recettes. Les fichiers dans le dossier :
- placements.md : 8 emplacements sur le site, et quelles animations conviennent à chaque emplacement.
- recipes.md : spécifications de construction pour chacune des 30 animations.
Étape 1 : Demander où l'appliquer
Quand le skill est chargé, poser d'abord cette question, dans la langue de l'utilisateur, avec la liste numérotée. Ne pas commencer à écrire du code avant d'avoir une réponse.
"Où sur le site souhaitez-vous l'animation ?"
- Zone d'ouverture (Hero) d'une page d'atterrissage
- Transition au défilement ou entre écrans
- Cartes et grille de fonctionnalités
- Formulaires, champs de saisie et code à usage unique
- Boutons, interrupteurs et indicateurs de progression
- Navigation et menus
- Présentation de produit ou d'application (maquette téléphone, carrousel)
- Personnage ou effet qui suit le curseur sur toute la page
Si l'utilisateur a déjà indiqué l'emplacement dans sa demande, passer à l'étape 2 et préciser quel emplacement a été compris.
Étape 2 : Demander quel type d'animation
Lire placements.md et afficher uniquement les options de l'emplacement choisi, dans une liste numérotée. Pour chaque option : nom, une phrase dans la langue de l'utilisateur décrivant ce que l'on voit, et niveau de complexité. Demander à l'utilisateur de choisir un numéro, ou de décrire une combinaison de deux.
Si l'utilisateur n'est pas sûr, recommander l'une d'elles et justifier en une phrase selon ce qui est connu : type d'entreprise, public cible, et niveau de complexité qu'il est prêt à maintenir.
Étape 3 : Trois questions rapides avant la construction
Poser en un seul message :
- Sur quoi construit-on : HTML/CSS/JS simple, React, Next.js, Webflow, WordPress ou autre chose ?
- Quel est le contenu : titre, texte, images, couleurs de marque, logo. S'il n'y en a pas, utiliser du contenu factice et le signaler.
- Le site doit-il fonctionner sur tous les navigateurs et sur mobile ? Les animations marquées "expérimental" reposent sur une API disponible uniquement sur Chrome.
Étape 4 : Construction
- Ouvrir dans recipes.md la recette choisie et lire les spécifications complètes.
- Construire une implémentation à partir de zéro selon les spécifications et le contenu de l'utilisateur.
- Choisir l'outil le plus simple qui obtient l'effet : CSS avant Canvas, et Canvas avant WebGL. Utiliser Three.js ou R3F uniquement lorsqu'il y a une profondeur, un éclairage ou un shader réel.
- Exposer les "boutons de réglage" de la recette en tant que variables en haut du fichier, ou dans un petit panneau (par exemple lil-gui ou Leva), afin de pouvoir les ajuster sans toucher au code.
- Pour les recettes marquées Chrome uniquement : construire un fallback, comme une capture du HTML sous forme de texture ou une version CSS simple. Vérifier la prise en charge à l'exécution et non par user agent.
Étape 5 : Vérification avant livraison
Passer en revue la liste et signaler à l'utilisateur ce qui a été vérifié et ce qui ne l'a pas été :
- prefers-reduced-motion : dans ce réglage, l'animation s'arrête ou est remplacée par une version statique.
- Performances : viser 60fps sur un ordinateur standard. Arrêter la boucle lorsque le composant n'est pas visible (IntersectionObserver) et lorsque l'onglet est masqué. Limiter devicePixelRatio à 2.
- Mobile : toucher au lieu de hover, et version plus légère ou statique sur un appareil faible.
- Accessibilité : le texte reste du HTML réel, accessible au lecteur d'écran et aux moteurs de recherche. Un effet qui cache du contenu ne bloque pas la lecture.
- Si je n'ai pas exécuté le code dans le navigateur, l'écrire explicitement.