AIMRAN

Sin conexión

HTML + CSSMicrointeractions

Retry by plugging in the cable

The plug hangs loose; retry or drag it and it springs into the socket, a spark flies and the light turns on.

Settings

16px
1x

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>Offline</b></p><button type="button" class="bt">Retry</button></div></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Microinteractions

See all Microinteractions

Task completed check

MicrointeractionsReact + Motion

Star rating

MicrointeractionsReact + Motion

Avatar with status ring

MicrointeractionsReact + Motion

Bouncing notification badge

MicrointeractionsReact + Motion

Smooth accordion

MicrointeractionsReact + Motion

Copy command button

MicrointeractionsReact + Motion

Paper plane send button

MicrointeractionsReact + Motion

Elastic volume slider

MicrointeractionsReact + Motion

Where to use it

Offline states usually show a gray icon and a retry link. This one gives the moment a physical form: a plug dangles on its cable next to a wall socket, and pressing Retry or dragging the plug sends it into the socket with a spring, a small spark and a green pilot light. The cable curve recalculates as the plug moves.

The main color is the connected state and the secondary one the spark. Replace the simulated connection with your real reconnect call and only move the plug when it succeeds. Disconnect pulls it out again, which makes the demo easy to replay.