Dibuja tu patrón

Pista: dibuja una L

HTML + CSSMicro-interactions

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

16px
1x

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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Micro-interactions

Voir tout : Micro-interactions

Où 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.