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.
Testimonial-Karussell
Drei Zitate, die mit Fortschrittsbalken von selbst wechseln und bei Hover oder Fokus pausieren.
Einstellungen
Code
<section class="uv-ktc" aria-roledescription="carrusel" aria-label="Das sagen andere"><p class="ti">Das sagen andere</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>Hat uns im ersten Sprint zwei Wochen Layoutarbeit gespart.</blockquote><figcaption><span class="av" aria-hidden="true">MR</span><span><b>Marta Ruiz</b><span>Produktdesignerin</span></span></figcaption></figure><figure><blockquote>Kopieren, einfügen, Farbe anpassen. So einfach.</blockquote><figcaption><span class="av" aria-hidden="true">JL</span><span><b>Javier López</b><span>Frontend-Entwickler</span></span></figcaption></figure><figure><blockquote>Kunden merken die Sorgfalt in jeder Animation.</blockquote><figcaption><span class="av" aria-hidden="true">SG</span><span><b>Sara Gil</b><span>Kreativdirektorin</span></span></figcaption></figure></div><div class="pg"><button type="button" aria-label="Bewertung 1" class="on"><i></i></button><button type="button" aria-label="Bewertung 2"><i></i></button><button type="button" aria-label="Bewertung 3"><i></i></button></div></section>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Karten
Alle ansehen: KartenWofür du ihn nutzen kannst
Social Proof wirkt am besten in kleinen Dosen, eine Stimme nach der anderen. Diese Karte zeigt ein Zitat mit Initialen, Name und Rolle und blendet zum nächsten über, sobald sich sein Fortschrittsbalken gefüllt hat. Hover oder Fokus pausieren den Timer, und jeder Balken ist zugleich ein Button, um direkt zu einem Zitat zu springen.
Das Timing ist eine CSS-Animation, das Skript wartet nur auf ihr Ende und ist deshalb leicht. Bei reduzierter Bewegung bleiben die Balken voll und Zitate wechseln nur auf Wunsch.