¿A dónde viajamos?
Wischbarer Kartenstapel
Zieh die oberste Karte zur Seite und sie fliegt davon; die Like- und Überspringen-Buttons tun dasselbe.
Einstellungen
Code
<div class="uv-ksd"><p class="ti">Wohin reisen wir?</p><div class="dk"><article style="--g:#ff9a8b,#ff6a88"><span class="ph"></span><b>Kyoto</b><span>Japan</span><i class="nope">Weiter</i><i class="like">Gefällt mir</i></article><article style="--g:#ffd36e,#f79d5c"><span class="ph"></span><b>Lissabon</b><span>Portugal</span><i class="nope">Weiter</i><i class="like">Gefällt mir</i></article><article style="--g:#89f7fe,#66a6ff"><span class="ph"></span><b>Island</b><span>Ring Road</span><i class="nope">Weiter</i><i class="like">Gefällt mir</i></article><article style="--g:#f6d365,#fda085"><span class="ph"></span><b>Marrakech</b><span>Marokko</span><i class="nope">Weiter</i><i class="like">Gefällt mir</i></article></div><div class="bt"><button type="button" class="no" aria-label="Verwerfen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button><button type="button" class="ys" aria-label="Gefällt mir"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg></button></div></div>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
Wischstapel machen Auswählen zum Spiel, deshalb nutzen Dating-, Reise- und Rezept-Apps sie. Zieh die oberste Karte, sie folgt dem Finger mit leichter Drehung, während ein Like- oder Weiter-Stempel einblendet. Über einer Schwelle fliegt sie davon und wandert nach hinten, sonst federt sie zurück an ihren Platz.
Zwei runde Buttons darunter erledigen dasselbe für Maus und Tastatur. Die Karten sind einfache Artikel mit Verlauf, du kannst also Fotos, Preise oder Profile einsetzen und die Gestenlogik behalten.