Password copy with auto clear
On copy the password dots ripple in a wave and a ring counts down until the clipboard is cleared.
Settings
Code
<div class="uvq15-pwd"><header><span class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><div><b>Work email</b><small>lucia@estudio.es</small></div></header><div class="fd"><span class="pw" aria-hidden="true" translate="no"><span class="ch" style="--i:0"><i>•</i><b>L</b></span><span class="ch" style="--i:1"><i>•</i><b>i</b></span><span class="ch" style="--i:2"><i>•</i><b>n</b></span><span class="ch" style="--i:3"><i>•</i><b>c</b></span><span class="ch" style="--i:4"><i>•</i><b>e</b></span><span class="ch" style="--i:5"><i>•</i><b>.</b></span><span class="ch" style="--i:6"><i>•</i><b>A</b></span><span class="ch" style="--i:7"><i>•</i><b>z</b></span><span class="ch" style="--i:8"><i>•</i><b>u</b></span><span class="ch" style="--i:9"><i>•</i><b>l</b></span><span class="ch" style="--i:10"><i>•</i><b>.</b></span><span class="ch" style="--i:11"><i>•</i><b>2</b></span><span class="ch" style="--i:12"><i>•</i><b>0</b></span><span class="ch" style="--i:13"><i>•</i><b>2</b></span><span class="ch" style="--i:14"><i>•</i><b>7</b></span></span><button type="button" class="ey" aria-pressed="false" aria-label="Show password"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/><path class="sl" d="M4 4l16 16"/></svg></button><button type="button" class="cp" aria-label="Copy password"><span class="a"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/></svg></span><span class="b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></button></div><p class="cd" aria-hidden="true"><span class="rg"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" pathLength="100"/><circle class="t" cx="12" cy="12" r="10" pathLength="100"/></svg><b class="n">15</b></span><span>Will be cleared from the clipboard</span></p><p class="sr" aria-live="polite"></p></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.
More in Microinteractions
See all MicrointeractionsWhere to use it
Password managers copy secrets to the clipboard, and good ones clear it again after a few seconds. This entry shows that behavior: pressing copy sends a wave through the masked dots, the icon turns into a check and a ring counts down fifteen seconds before the clipboard is emptied. The eye button flips each dot into its character.
The main color is the copy button and the account icon, the secondary one the countdown ring. Change the password in the markup and the script copies exactly that text. It fits vaults, settings pages and any screen that shows API keys or recovery codes.