Eye Blink Toggle
A copy-paste animated icons component in pure HTML, CSS & vanilla JS. Zero dependencies, framework-agnostic, MIT-licensed.
Animated IconsHTMLJavaScriptCSSany framework
Copy into your project
HTML
<button class="nuda-ai2-eye-blink" type="button" aria-label="Hide password" aria-pressed="false">
<svg class="nuda-ai2-eye-blink__svg" viewBox="0 0 24 24" aria-hidden="true">
<g class="nuda-ai2-eye-blink__eye">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
<circle cx="12" cy="12" r="3" />
</g>
<line class="nuda-ai2-eye-blink__lid" x1="2" y1="12" x2="22" y2="12" />
</svg>
</button>JavaScript
/* Eye Blink Toggle — vanilla JS
Flips aria-pressed/label; CSS blinks the eye shut. */
(function () {
document.querySelectorAll(".nuda-ai2-eye-blink").forEach(function (btn) {
btn.addEventListener("click", function () {
var hidden = btn.getAttribute("aria-pressed") !== "true";
btn.setAttribute("aria-pressed", String(hidden));
btn.setAttribute("aria-label", hidden ? "Show password" : "Hide password");
});
});
})();CSS
.nuda-ai2-eye-blink {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: #09090b;
border: 1px solid rgba(255,255,255,.1);
border-radius: 10px;
color: #fafafa;
cursor: pointer;
transition: border-color .25s,color .25s;
}
.nuda-ai2-eye-blink:hover,.nuda-ai2-eye-blink:focus-visible {
border-color: rgba(228,255,84,.4);
outline: none;
}
.nuda-ai2-eye-blink:focus-visible {
box-shadow: 0 0 0 2px rgba(228,255,84,.5);
}
.nuda-ai2-eye-blink[aria-pressed="true"] {
color: #e4ff54;
}
.nuda-ai2-eye-blink__svg {
width: 28px;
height: 28px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.nuda-ai2-eye-blink__eye {
transform-origin: 12px 12px;
transition: transform .3s cubic-bezier(.4,.2,.2,1);
}
.nuda-ai2-eye-blink__lid {
opacity: 0;
transition: opacity .25s;
}
.nuda-ai2-eye-blink[aria-pressed="true"] .nuda-ai2-eye-blink__eye {
transform: scaleY(.08);
}
.nuda-ai2-eye-blink[aria-pressed="true"] .nuda-ai2-eye-blink__lid {
opacity: 1;
}
@media (prefers-reduced-motion:reduce) {
.nuda-ai2-eye-blink__eye {
transition: none;
}
}
How to use Eye Blink Toggle
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.