Dibuja tu patrón
Pista: dibuja una L
Entsperren mit Punktmuster
Verbinde die Punkte durch Ziehen: Die Linie folgt dem Finger, ein falsches Muster zittert rot und das richtige öffnet das Schloss.
Einstellungen
Code
<div class="uvq15-ptn"><span class="lk" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path class="sh" d="M8 11V7a4 4 0 0 1 8 0v4"/><rect x="5" y="11" width="14" height="10" rx="2.5"/></svg></span><p class="msg" aria-live="polite">Zeichne dein Muster</p><div class="pad" role="group" aria-label="Entsperrmuster"><svg viewBox="0 0 300 300" aria-hidden="true"><polyline class="ln" points=""/><line class="tl" x1="0" y1="0" x2="0" y2="0"/></svg><button type="button" class="dt" style="left:16.667%;top:16.667%" aria-label="1" aria-pressed="false"></button><button type="button" class="dt" style="left:50.000%;top:16.667%" aria-label="2" aria-pressed="false"></button><button type="button" class="dt" style="left:83.333%;top:16.667%" aria-label="3" aria-pressed="false"></button><button type="button" class="dt" style="left:16.667%;top:50.000%" aria-label="4" aria-pressed="false"></button><button type="button" class="dt" style="left:50.000%;top:50.000%" aria-label="5" aria-pressed="false"></button><button type="button" class="dt" style="left:83.333%;top:50.000%" aria-label="6" aria-pressed="false"></button><button type="button" class="dt" style="left:16.667%;top:83.333%" aria-label="7" aria-pressed="false"></button><button type="button" class="dt" style="left:50.000%;top:83.333%" aria-label="8" aria-pressed="false"></button><button type="button" class="dt" style="left:83.333%;top:83.333%" aria-label="9" aria-pressed="false"></button></div><p class="ht"><span>Tipp: Zeichne ein L</span><button type="button" class="ck" hidden>Prüfen</button></p></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 Mikrointeraktionen
Alle ansehen: MikrointeraktionenWofür du ihn nutzen kannst
Entsperrmuster kennen die meisten vom Handy, und dieser Block baut eines aus Buttons und einer SVG-Linie nach. Beim Ziehen über das Raster aus drei mal drei Punkten verbinden sich die Punkte, übersprungene mittlere Punkte kommen automatisch dazu, und beim Loslassen wird geprüft: Falsche Muster blinken rot und zittern, das richtige L wird grün und öffnet das Schloss.
Die Hauptfarbe gilt für Linie und Erfolg, die Zweitfarbe für den Fehler. Per Tastatur wechseln die Pfeiltasten zwischen den Punkten, Enter fügt sie hinzu und Prüfen sendet ab. Die erwartete Folge steht im Skript als Punktindizes von null bis acht.