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

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

先说结论：这是一个我会建议前端同学都试一次的小项目。

你不需要复杂业务，也不需要后端配合，只靠登录页这一个场景，就能把「动效细节、状态管理、交互心理」三件事练明白。

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

ts 复制代码

const passwordFocused = ref(false);
const isPasswordGuardMode = computed(() => passwordFocused.value);

const onPasswordClick = () => {
  passwordFocused.value = true;
};

const onPasswordFocus = () => {
  passwordFocused.value = true;
};

const onPasswordBlur = () => {
  passwordFocused.value = false;
};

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

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

vue 复制代码

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

这样做的好处是：

业务层只关心"什么时候进入防偷看"，动画层只关心"进入后怎么表现"。

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

ts 复制代码

const tick = () => {
  if (state.isPasswordGuardMode) {
    applyPasswordGuardMode();
    requestAnimationFrame(tick);
    return;
  }

  // 普通模式：鼠标跟随 / 面部偏移 / 眨眼
  updateFollowMouse();
  updateBlink();
  requestAnimationFrame(tick);
};

这里的关键不是"多写一个动画"，而是明确了状态优先级 。

否则很容易出现多个动画同时抢控制权，导致抖动和不自然。

我做这个项目后的体会

动效不是装饰，它可以承担"沟通"角色（例如隐私感）
好交互不一定复杂，关键是反馈是否贴近用户心理
登录页这种高频入口，最适合做"低成本高感知"的优化

可以怎么二次开发

换成你的品牌色和 logo
把角色形状改成品牌吉祥物
接入真实登录 API 和鉴权流程
增加暗黑模式 / 多语言

开源地址（欢迎 Star）

如果这个思路对你有启发，欢迎去看代码、提 issue、提 PR：

👉 https://github.com/liuqingsong1528/Peek-Free-Login

也欢迎你基于这个项目做自己的"有记忆点的登录页"。