我复刻了一个“会避嫌”的登录页，还把它开源了

我复刻了一个“会避嫌”的登录页还把它开源了先说结论这是一个我会建议前端同学都试一次的小项目。你不需要复杂业务也不需要后端配合只靠登录页这一个场景就能把「动效细节、状态管理、交互心理」三件事练明白。Peek-Free Login演示事情的起因最近我在体验一个网站时原本只是想快速看下产品结果在登录页停了下来 CareerCompass 登录页吸引我的不是表单而是页面里的角色动效鼠标移动时眼球会跟随输入密码时角色状态会变化。这种“小而精”的交互不会打断流程但会明显提升页面记忆点。于是我决定自己实现一版不照搬业务只复刻交互思路并且开源出来。我做了什么我做的项目叫Peek-Free Login捂眼登录核心目标是保留“眼神跟随”的趣味性增加“隐私友好”的设计表达做成可直接二次开发的模板项目地址 https://github.com/liuqingsong1528/Peek-Free-Login演示效果建议先看视频仓库里已放演示视频demo.mp4建议你在文章平台开头直接插视频按这个顺序展示鼠标移动四个角色眼球同步跟随点击密码框角色统一看向左上防偷看模式密码框失焦后恢复正常联动这个顺序非常适合做“前 10 秒抓注意力”。项目简介Peek-Free Login是一个基于Vue 3 TypeScript Vite GSAP Ant Design Vue的登录页动效项目。你可以把它当成一个可直接套用的登录页模板一个前端动效工程化实践案例一个“如何用细节提升产品质感”的微交互样板这个项目为什么有价值很多登录页都只关注“能不能提交”但忽略了“用户是不是愿意输入”。我在这个项目里重点做的是用交互细节改善信任感。最有代表性的就是“防偷看模式”用户点击/聚焦密码框时角色统一看向左上传达“我不看你的密码”用户失焦后动画回到正常状态不干扰流程这类反馈不会增加操作成本但会显著提升“被尊重感”和“品牌好感”。核心代码讲解可讲给前端同学听下面这三段基本就是整个交互的关键。1) 由密码框状态驱动动画模式constpasswordFocusedref(false);constisPasswordGuardModecomputed(()passwordFocused.value);constonPasswordClick(){passwordFocused.valuetrue;};constonPasswordFocus(){passwordFocused.valuetrue;};constonPasswordBlur(){passwordFocused.valuefalse;};这一步把“DOM 事件”翻译成了“可维护的状态”。2) 把状态透传给动画组件AnimatedCharacters :is-typingisTyping :show-passwordshowPassword :password-lengthpasswordValue.length :is-password-guard-modeisPasswordGuardMode /这样做的好处是业务层只关心“什么时候进入防偷看”动画层只关心“进入后怎么表现”。3) 在动画循环里设置优先级consttick(){if(state.isPasswordGuardMode){applyPasswordGuardMode();requestAnimationFrame(tick);return;}// 普通模式鼠标跟随 / 面部偏移 / 眨眼updateFollowMouse();updateBlink();requestAnimationFrame(tick);};这里的关键不是“多写一个动画”而是明确了状态优先级。否则很容易出现多个动画同时抢控制权导致抖动和不自然。我做这个项目后的体会动效不是装饰它可以承担“沟通”角色例如隐私感好交互不一定复杂关键是反馈是否贴近用户心理登录页这种高频入口最适合做“低成本高感知”的优化可以怎么二次开发换成你的品牌色和 logo把角色形状改成品牌吉祥物接入真实登录 API 和鉴权流程增加暗黑模式 / 多语言开源地址欢迎 Star如果这个思路对你有启发欢迎去看代码、提 issue、提 PR https://github.com/liuqingsong1528/Peek-Free-Login也欢迎你基于这个项目做自己的“有记忆点的登录页”。