当前位置：首页 > news >正文

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

news 2026/8/19 4:40:02

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

先说结论：这是一个我会建议前端同学都试一次的小项目。
你不需要复杂业务，也不需要后端配合，只靠登录页这一个场景，就能把「动效细节、状态管理、交互心理」三件事练明白。

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) 由密码框状态驱动动画模式

constpasswordFocused=ref(false);constisPasswordGuardMode=computed(()=>passwordFocused.value);constonPasswordClick=()=>{passwordFocused.value=true;};constonPasswordFocus=()=>{passwordFocused.value=true;};constonPasswordBlur=()=>{passwordFocused.value=false;};

这一步把“DOM 事件”翻译成了“可维护的状态”。

2) 把状态透传给动画组件

<AnimatedCharacters :is-typing="isTyping" :show-password="showPassword" :password-length="passwordValue.length" :is-password-guard-mode="isPasswordGuardMode" />

这样做的好处是：
业务层只关心“什么时候进入防偷看”，动画层只关心“进入后怎么表现”。

3) 在动画循环里设置优先级

consttick=()=>{if(state.isPasswordGuardMode){applyPasswordGuardMode();requestAnimationFrame(tick);return;}// 普通模式：鼠标跟随 / 面部偏移 / 眨眼updateFollowMouse();updateBlink();requestAnimationFrame(tick);};