Animations UI sûres avec Claude Code: guide pratique

Partir du problème utilisateur

Une animation UI sûre avec Claude Code ne consiste pas à rendre une page plus spectaculaire. La bonne question est plus simple: quelle hésitation de l’utilisateur voulons-nous réduire? Une section qui apparaît au scroll peut orienter la lecture. Une micro-réaction sur un bouton confirme que le clic a été reçu. Un état de chargement évite de croire que l’interface est bloquée. Si le mouvement ne sert pas ce type de fonction, il risque de devenir une distraction.

Le piège courant est de demander à Claude Code “anime cette page”. Le résultat peut être joli en capture d’écran, mais une page réelle doit rester lisible sur mobile, garder le focus clavier, afficher les longs titres, respecter les blocs de code, les publicités, les tableaux de prix, les états vides et la préférence prefers-reduced-motion. Ce guide montre une approche sans librairie lourde: CSS, un petit helper JavaScript, puis une revue stricte.

Pour replacer cette méthode dans le reste du site, lisez aussi Claude Code design system, Claude Code responsive design et Claude Code performance optimization. Les références officielles à garder ouvertes sont Claude Code docs, MDN CSS animation, MDN Intersection Observer API, MDN prefers-reduced-motion et web.dev CSS animations. Intersection Observer indique quand un élément entre dans le viewport. prefers-reduced-motion permet de proposer moins de mouvement aux personnes qui l’ont demandé dans leur système.

Un prompt borné pour Claude Code

Il faut demander un changement petit et vérifiable. Une animation locale se relit facilement; une refonte animée de toute la page ouvre trop de risques.

Ajoute une animation UI légère à cet écran.
Le périmètre est limité aux cartes avant le CTA, à la section affichée après chargement et au retour visuel du bouton de sauvegarde.
Ne modifie pas les composants existants, les routes, le texte ni les tokens de design.
Privilégie CSS et un petit helper JavaScript. N'ajoute pas de librairie d'animation sans justification.
Retourne le Use case, les risques Pitfall, l'accessibilité, le comportement prefers-reduced-motion et le résultat en largeur 375px.

Ce prompt fixe la cible, les interdits et les preuves attendues. Claude Code produit de meilleurs diffs quand la contrainte est explicite. Sur un site publié, une carte produit, un formulaire de contact ou une table de prix ne doivent pas devenir moins compréhensibles parce que l’agent a privilégié l’effet visuel.

Use case（cas d’usage concrets）

Use case	Objectif	Zone animée	Critère de réussite
Article qui convertit	Aider à trouver la ressource suivante	Cartes liées et CTA	La lecture reste fluide
Dashboard SaaS	Clarifier sauvegarde, sync, chargement et erreur	Boutons, toast, états vides	Le sens ne dépend pas seulement de la couleur
Page produit	Guider dans les prix et bénéfices	Comparatifs, cartes d’offre	Le CTA principal reste visible
Revue d’équipe	Rendre le diff de Claude Code auditable	Périmètre et checklist	Intention et risque sont expliqués

Le premier Use case concerne les articles techniques. Après avoir lu le code, une personne peut vouloir des templates ou un accompagnement. Une apparition sobre autour des produits ClaudeCodeLab ou de la formation et consultation Claude Code peut guider sans interrompre la lecture. En revanche, un CTA qui pulse sans arrêt gêne la copie de code et fatigue vite.

Le deuxième Use case est le dashboard. Un bouton de sauvegarde qui réagit brièvement puis affiche “Enregistré” réduit l’incertitude. Le mouvement reste un signal secondaire: le texte, aria-busy, le focus et les messages d’erreur doivent porter l’information.

Le troisième Use case est la page produit. Les tableaux de prix et les comparaisons sont denses. Une apparition progressive aide à lire, mais une séquence lente retarde la décision. Pour du mouvement décoratif, 200 à 500 ms suffisent souvent; pour un retour à une action utilisateur, la réponse doit paraître immédiate.

Le quatrième Use case est la collaboration. Demandez à Claude Code de dire quel Use case chaque animation sert et quel Pitfall elle évite. La revue devient alors une discussion d’objectif, d’accessibilité et de risque, pas seulement de goût.

Architecture de l’implémentation

On garde trois couches distinctes.

Couche	Rôle	Point à vérifier
HTML	Marquer les éléments animables	Titres, texte et CTA gardent leur sens
CSS	Définir opacité, distance, durée et easing	opacity et transform sont privilégiés
JavaScript	Déclencher et nettoyer	reduced motion, fallback et déconnexion sont traités

Ce découpage limite le diff. Le HTML reçoit data-reveal et la classe reveal; le CSS contient le style commun; le JavaScript ajoute is-visible et débranche l’observer. Le même modèle fonctionne ensuite dans Astro, React, Next.js ou une page statique.

HTML prêt à copier

<section class="motion-demo" aria-labelledby="motion-demo-title">
  <p class="eyebrow">ClaudeCodeLab workflow</p>
  <h2 id="motion-demo-title">Déploiement sûr d'animations UI</h2>
  <p>
    Définissez l'objectif, la cible et la vérification avant de demander le patch.
  </p>

  <div class="motion-grid">
    <article class="reveal" data-reveal>
      <h3>Design</h3>
      <p>Choisir un Use case et un critère de succès.</p>
    </article>
    <article class="reveal" data-reveal>
      <h3>Implémentation</h3>
      <p>Ajouter du mouvement avec des variables CSS et un petit helper JS.</p>
    </article>
    <article class="reveal" data-reveal>
      <h3>Vérification</h3>
      <p>Contrôler Pitfall, reduce motion, mobile et clavier.</p>
    </article>
  </div>

  <a class="motion-cta reveal" data-reveal href="/fr/training/">
    Parler formation Claude Code
  </a>
</section>

CSS prêt à copier

Le CSS anime surtout opacity et transform. Les propriétés comme width, height, top ou left peuvent déclencher plus de calculs de mise en page. will-change reste limité aux éléments concernés.

:root {
  --motion-duration: 420ms;
  --motion-distance: 16px;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-border: #d8e2ee;
  --motion-bg: #ffffff;
  --motion-text: #182230;
  --motion-accent: #2563eb;
}

.motion-demo {
  color: var(--motion-text);
  max-width: 920px;
  margin: 48px auto;
  padding: 24px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--motion-accent);
  font-weight: 700;
}

.motion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.motion-grid article {
  border: 1px solid var(--motion-border);
  border-radius: 8px;
  background: var(--motion-bg);
  padding: 16px;
}

.reveal {
  opacity: 0;
  transform: translateY(var(--motion-distance));
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--motion-accent);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.motion-cta:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .motion-demo {
    margin: 32px auto;
    padding: 16px;
  }

  .motion-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

JavaScript prêt à copier

Ce helper affiche chaque élément une fois, puis arrête l’observation. Si Intersection Observer n’est pas disponible, ou si la personne préfère moins de mouvement, les contenus sont visibles immédiatement.

export function setupScrollReveal(root = document) {
  const targets = Array.from(root.querySelectorAll("[data-reveal]"));
  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  if (targets.length === 0) {
    return () => {};
  }

  if (reduceMotion || !("IntersectionObserver" in window)) {
    targets.forEach((target) => target.classList.add("is-visible"));
    return () => {};
  }

  const observer = new IntersectionObserver(
    (entries) => {
      for (const entry of entries) {
        if (!entry.isIntersecting) continue;
        entry.target.classList.add("is-visible");
        observer.unobserve(entry.target);
      }
    },
    {
      root: null,
      rootMargin: "0px 0px -10% 0px",
      threshold: 0.1,
    },
  );

  targets.forEach((target) => observer.observe(target));

  return () => observer.disconnect();
}

document.addEventListener("DOMContentLoaded", () => {
  setupScrollReveal();
});

Dans Astro ou React, appelez setupScrollReveal() après le montage. Si un onglet ou une modale ajoute du contenu plus tard, passez le conteneur comme root pour éviter de rescanner toute la page.

Exemple de retour bouton

Le retour après clic doit être très court. Cet exemple utilise Web Animations API, mais réduit le mouvement si l’utilisateur l’a demandé et garde un texte d’état.

const button = document.querySelector("[data-save-button]");
const status = document.querySelector("[data-save-status]");

button?.addEventListener("click", async () => {
  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  button.setAttribute("aria-busy", "true");
  status.textContent = "Enregistrement...";

  if (!reduceMotion) {
    await button.animate(
      [
        { transform: "scale(1)" },
        { transform: "scale(0.97)" },
        { transform: "scale(1)" },
      ],
      { duration: 180, easing: "ease-out" },
    ).finished;
  }

  await new Promise((resolve) => window.setTimeout(resolve, 300));
  button.setAttribute("aria-busy", "false");
  status.textContent = "Enregistré";
});

L’interface doit rester compréhensible sans animation. Le texte change, le focus reste visible et les technologies d’assistance lisent l’état dans le DOM.

Pitfall（pièges concrets）

Le premier Pitfall est l’intention vague. “Rendre premium” n’est pas testable. “Afficher les trois cartes de prix quand elles entrent dans le viewport sans masquer le bouton d’achat” l’est.

Le deuxième Pitfall est une durée trop longue. Dans un article technique, la personne veut atteindre le code. Dans une page commerciale, elle veut comparer vite. Une séquence lente donne une impression de lourdeur.

Le troisième Pitfall est le débordement mobile. translateX(40px) combiné à des ombres, tableaux ou blocs de code peut créer un scroll horizontal en 375px. Préférez translateY() et testez 375px, 414px et tablette.

Le quatrième Pitfall est de signaler une erreur seulement par la couleur ou une secousse. Ajoutez texte d’erreur, aria-describedby, focus cohérent et libellés visibles.

Le cinquième Pitfall est d’ajouter une librairie trop tôt. GSAP ou Framer Motion peuvent être utiles pour des timelines complexes, mais un reveal de cartes, un toast ou un bouton ne justifient pas toujours ce coût.

Le sixième Pitfall est de valider le patch parce qu’il semble correct. Demandez à Claude Code la liste des fichiers modifiés, variables CSS, alternatives non retenues, comportement accessibilité et tests manuels.

Revue et validation

Après l’implémentation, envoyez un prompt de revue uniquement.

Revois uniquement le diff actuel. N'implémente rien de nouveau.
Signale dans cet ordre:
1. Risques d'accessibilité
2. Manque de prefers-reduced-motion
3. Risques en largeur mobile 375px
4. Problèmes de performance
5. Conflits avec CSS ou composants existants
6. Vérifications manuelles avant publication
Sois strict et cite les sélecteurs ou fichiers quand possible.

La vérification humaine couvre mouvement normal, reduced motion, clavier, mobile, réseau lent et données vides. Dans DevTools, émulez prefers-reduced-motion et vérifiez que l’information reste claire. Contrôlez que les CTA produits et formation restent visibles, que les blocs de code défilent dans leur propre zone et que le focus se voit bien.

Lien avec la conversion

L’animation UI ne crée pas de revenu seule. Elle aide la personne à poursuivre sans friction. Un développeur seul peut chercher des prompts et checklists dans les produits ClaudeCodeLab. Une équipe qui déploie Claude Code dans de vrais dépôts aura plutôt besoin de permissions, CI, règles de revue et sessions internes via formation et consultation Claude Code.

Dans un layout proche d’un article, le gain le plus net ne venait pas d’une grande animation hero. Il venait de cartes ressources et d’un CTA qui apparaissaient une fois, calmement, à la fin du contenu. Séparer implémentation, revue et correction a rendu le diff plus lisible et les risques plus visibles.

Résultat après essai

J’ai testé ce flux sur une page de type article. Le premier passage demandait seulement des cartes data-reveal, le support reduced motion et une courte réaction du bouton de sauvegarde. Le second passage était une revue stricte: largeur 375px, focus clavier, données vides et visibilité du CTA.

Le résultat était plus facile à auditer qu’une grande demande “anime toute la page”. Limiter le mouvement à opacity et transform: translateY() a réduit les surprises mobiles. La vraie amélioration venait de l’obligation de documenter le Use case, le Pitfall, le fallback sans mouvement et les contrôles manuels.