Sin conexión
Reconnexion en branchant le câble
La fiche pend librement ; en réessayant ou en la faisant glisser, elle entre dans la prise avec une étincelle et le voyant s'allume.
Réglages
Code
<div class="uvq15-plg"><svg class="sc" viewBox="0 0 260 110" aria-hidden="true"><path class="cb" d="M-10 86 C24 108 42 55 64 55"/><g class="pg" transform="translate(70 0)"><rect class="pr" x="30" y="44" width="14" height="5" rx="1.5"/><rect class="pr" x="30" y="61" width="14" height="5" rx="1.5"/><rect class="gr" x="-8" y="47" width="12" height="16" rx="3"/><rect class="bd" x="0" y="38" width="34" height="34" rx="8"/><rect class="hl" x="5" y="42" width="5" height="26" rx="2.5"/></g><rect class="pl" x="206" y="18" width="46" height="74" rx="9"/><rect class="ho" x="214" y="44" width="7" height="5" rx="1.5"/><rect class="ho" x="214" y="61" width="7" height="5" rx="1.5"/><circle class="led" cx="238" cy="30" r="3.2"/><g class="spk"><line x1="201.1" y1="51.0" x2="192.4" y2="46.0"/><line x1="208.0" y1="47.0" x2="208.0" y2="37.0"/><line x1="214.9" y1="51.0" x2="223.6" y2="46.0"/><line x1="214.9" y1="59.0" x2="223.6" y2="64.0"/><line x1="208.0" y1="63.0" x2="208.0" y2="73.0"/><line x1="201.1" y1="59.0" x2="192.4" y2="64.0"/></g></svg><div class="ft"><p class="st" aria-live="polite"><i></i><b>Hors ligne</b></p><button type="button" class="bt">Réessayer</button></div></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
Les états hors ligne se limitent souvent à une icône grise et un lien pour réessayer. Celui-ci donne une forme physique au moment : une fiche pend au bout de son câble près d'une prise murale et, avec Réessayer ou en la faisant glisser, elle entre dans la prise avec un ressort, une petite étincelle et un voyant vert. La courbe du câble suit le mouvement.
La couleur principale indique l'état connecté et la secondaire l'étincelle. Remplace la connexion simulée par ton vrai appel de reconnexion et ne déplace la fiche qu'en cas de succès. Déconnecter la retire, ce qui rend la démo facile à rejouer.