Lo que dicen
Nos ahorró dos semanas de maquetación en el primer sprint.
Copiar, pegar y ajustar el color. Así de sencillo.
Los clientes notan el cuidado en cada animación.
HTML + CSSCartes
Carrousel de témoignages
Trois avis qui défilent seuls avec des barres de progression et se mettent en pause au survol ou au focus.
Réglages
16px
1x
Code
<section class="uv-ktc" aria-roledescription="carrusel" aria-label="Ce qu’on en dit"><p class="ti">Ce qu’on en dit</p><svg class="qm" viewBox="0 0 40 32" aria-hidden="true"><path d="M0 32V19C0 8 6 1.5 16 0l1.6 4C12 6 9.4 10 9.2 14H17v18zm23 0V19C23 8 29 1.5 39 0l1 4c-5.6 2-8.2 6-8.4 10H40v18z"/></svg><div class="sl"><figure class="on"><blockquote>On a gagné deux semaines d’intégration dès le premier sprint.</blockquote><figcaption><span class="av" aria-hidden="true">MR</span><span><b>Marta Ruiz</b><span>Designer produit</span></span></figcaption></figure><figure><blockquote>Copier, coller et ajuster la couleur. C’est tout.</blockquote><figcaption><span class="av" aria-hidden="true">JL</span><span><b>Javier López</b><span>Développeur front-end</span></span></figcaption></figure><figure><blockquote>Les clients remarquent le soin de chaque animation.</blockquote><figcaption><span class="av" aria-hidden="true">SG</span><span><b>Sara Gil</b><span>Directrice de création</span></span></figcaption></figure></div><div class="pg"><button type="button" aria-label="Avis 1" class="on"><i></i></button><button type="button" aria-label="Avis 2"><i></i></button><button type="button" aria-label="Avis 3"><i></i></button></div></section>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Cartes
Voir tout : CartesOù l’utiliser
La preuve sociale fonctionne mieux à petites doses, une voix à la fois. Cette carte affiche une citation avec les initiales, le nom et le poste de son auteur, puis passe à la suivante en fondu quand sa barre se remplit. Le survol ou le focus met le minuteur en pause, et chaque barre est aussi un bouton pour aller directement à une citation.
Le rythme est une animation CSS, le script attend seulement sa fin. Avec le mouvement réduit, les barres restent pleines et les citations changent au choix.