Dibuja tu patrón
Pista: dibuja una L
Déverrouillage par schéma de points
Relie les points en glissant : la ligne suit le doigt, un mauvais schéma tremble en rouge et le bon ouvre le cadenas.
Réglages
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">Dessine ton schéma</p><div class="pad" role="group" aria-label="Schéma de déverrouillage"><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>Indice : dessine un L</span><button type="button" class="ck" hidden>Vérifier</button></p></div>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 Micro-interactions
Voir tout : Micro-interactionsOù l’utiliser
Le schéma de déverrouillage est un geste connu des téléphones, et ce bloc le reconstruit avec des boutons et une ligne SVG. En glissant sur la grille de trois sur trois, les points se relient, ceux du milieu que l'on saute s'ajoutent seuls et au relâchement le schéma est vérifié : un mauvais clignote en rouge et tremble, le bon L passe au vert et ouvre le cadenas.
La couleur principale sert à la ligne et à la réussite, la secondaire à l'erreur. Au clavier, les flèches passent d'un point à l'autre, Entrée les ajoute et Vérifier valide. La séquence attendue se change dans le script, avec des indices de zéro à huit.