The spark, a tiny friction everyone feels
It was a late-night e-commerce login on desktop. I typed a password, mistyped one character, and automatically reached for my mouse to click "show password." The interaction broke my typing flow completely.
But this happens every time I login. And I spend 90% of my time with hands on the keyboard. Why was this interaction still designed for the mouse?
The cost of this micro-friction
- 1Type blind and hope
Accept the masked password, trust your typing, handle consequences
- 2Break typing context
Reach for mouse, click, interrupt flow, return to keyboard
- 3Choose weaker passwords
Unconsciously select simpler passwords to reduce verification cost
The design doesn't respect how people actually work.
Why This Matters at Scale
Password fields appear in every authentication system, every design system. Yet they're inconsistent across products. No standard. Everyone reinvents. Most land on a weaker solution than necessary.
Before engineering, I validated in Figma
Rather than diving straight into code, I designed the interaction in Figma first. This forced me to think through the details, test interaction states, and see if the solution actually worked before committing engineering time.
Keyboard first
Cmd/Ctrl+8 toggles visibility without leaving the keyboard. Primary interaction designed for how people actually work.
Visual feedback
Animated eye icon that changes state instantly. No ambiguity. Clear confirmation that the toggle worked.
WCAG 2.1 accessible
Proper ARIA labels, focus states, semantic HTML, screen reader support. Built in from the start, not added later.
The Figma Community response
I didn't announce it. I just shared it publicly on Figma Community. No marketing. No outreach. Just solved the problem and shared it.
Views
Organic discovery
Active uses
Real adoption
Community favorites
User appreciation
Design validation wasn't a guess. It was proof that demand existed. Thousands of designers actively used it in their files.
The Key Insight
"People don't search for solutions to problems they've normalized. But once they experience a better interaction, they don't want to go back."
It's the airplane Wi-Fi effect. You don't know you need it until you've had it once.
Engineering for universal adoption
The Figma design proved the interaction worked. But a design file only lives in Figma. The real challenge: engineer a solution so universal, so lightweight, that developers could drop it into any project: React, Vue, vanilla HTML, doesn't matter.
Architecture principles
Framework agnostic
One JavaScript file. Works with React, Vue, Svelte, vanilla HTML, or any future framework. Zero vendor lock-in.
Zero dependencies
No npm packages. No version conflicts. No supply chain risk. Just works. Forever.
WCAG 2.1 compliant
Accessibility isn't a checkbox feature. It's the foundation. Everyone has equal access.
Implementation, intentionally simple
<input id="password" type="password" /> <button data-eye-switch="password"></button> <script src="eyeswitch.js"></script> <script> EyeSwitch.init(); // That's it. </script>
One function call. No configuration. Works immediately. This simplicity is what enables adoption.
Why Vanilla JavaScript (Not React/Vue)?
Because real adoption only happens when adoption is effortless. A developer in a Svelte shop shouldn't feel friction downloading a React-specific library. They should add one script tag and get on with building their product.
Standardizing authentication for the web
EyeSwitch isn't the end goal. It's the proof of concept. One small interaction showed that thoughtful design + engineering can change how people work. Now I'm expanding that to the entire authentication experience.
Vision: Make password and authentication flows so standardized, accessible, and well-designed that they become native to the web platform itself.
Standardize the Password Field
In ProgressBuild a modular system of password field components. Each independent but designed to work together seamlessly.
Propose as Web Standard
PlannedOnce validated in production across real products, formalize this work as an official proposal to W3C and WCAG.
Goal, native browser support
Imagine future web development where developers write:
No JavaScript required. No external library. Just native browser support for password fields that respect how people type.
Standardize Full Auth Flows
RoadmapExpand beyond the password field to standardize the complete authentication experience: signup, login, recovery, 2FA.
Core principle: Accessibility is not a feature. It's architecture. Keyboard users, screen reader users, everyone has equal access.
5 principles that made this work
1Solve real problems first
EyeSwitch didn't create demand, it revealed it. Everyone with a password has felt this friction. Universal problems have universal potential.
2Design before engineering
Validating in Figma first proved demand existed before committing weeks to code. It also shaped the architecture. I knew exactly what problem to solve.
3Simplicity enables scale
Complex features don't get adopted. Simple, useful features do. Zero dependencies. One function call. This simplicity is why it spread.
4Accessibility is architecture
Bolting accessibility onto existing code creates friction. Building it into the foundation means it works naturally. WCAG 2.1 wasn't a checkbox. It was the design.
5Open source multiplies impact
Sharing scales solutions beyond what one person can build. GitHub isn't altruistic, it's strategic. That's exponential impact.
What this represents
EyeSwitch started as personal frustration. It became a Figma design viewed 14K+ times. It evolved into a production-ready library that developers use in real applications.
This journey represents my approach to all systems design:
- →Observe real user friction. Often invisible because it's been normalized
- →Design and validate before investing engineering effort
- →Build for universal adoption, not proprietary control
- →Make accessibility fundamental, not optional
- →Share solutions that multiply impact across communities
This is what I bring to every project:
Systems thinking, design rigor, and the craft to build things that actually matter.