Transparente Glas-Bezahlkarte
Eine durchsichtige Karte mit dicken Kanten, die die Formen dahinter verzerren; tipp sie an und sie dreht sich mit Lichtblitz.
Einstellungen
Code
<div class="uvq11-card"><div class="bg" aria-hidden="true"><i class="o1"></i><i class="o2"></i><i class="o3"></i><i class="o4"></i></div><button type="button" class="cd" aria-pressed="false" aria-label="Karte umdrehen"><span class="fc fr"><span class="ed"></span><span class="tp"><b class="lg">AIMRAN</b><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8.5 8.5a5 5 0 0 1 0 7M12 6a8.5 8.5 0 0 1 0 12M15.5 3.5a12 12 0 0 1 0 17"/></svg></span><span class="chp"></span><span class="nu">4821 •••• •••• 0427</span><span class="bt"><span class="nm">LUCÍA MARTÍN</span><span class="ex">09/29</span></span></span><span class="fc bk"><span class="ed"></span><span class="ms"></span><span class="sg"><i></i><b>482</b></span><span class="fn">Demokarte</span></span><span class="sw"></span></button></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 Liquid Glass
Alle ansehen: Liquid GlassWofür du ihn nutzen kannst
Eine durchsichtige Bezahlkarte über kräftigen, langsam treibenden Formen, damit das Glas etwas zu brechen hat. Die Vorderseite nutzt einen leichten Backdrop-Blur, ein maskierter Randstreifen verwischt und erhellt stärker und imitiert so die dicke, polierte Kante. Nummer, Chip und Kontaktlos-Symbol wirken eingraviert, die Rückseite zeigt Magnetstreifen, Unterschriftsfeld und Code.
Ändere die beiden Hintergrundfarben und trag den Namen der Karteninhaberin ein. Das Umdrehen ist ein einziger Toggle-Button mit Lichtschweif über die Oberfläche, passend für Fintech-Seiten, Checkout-Vorschauen und Premium-Mitgliedschaften.