踏着七彩祥云的登录页，它来了吗？
摘要：最近，有一个比较火的很有趣且灵动的登录页火了。 角色视觉跟随鼠标 输入框打字时扯脖子瞅 显示密码明文时避开视线 已经有大神（katavii）复刻了动画效果，并在github上开源了：https:github.comkataviian
最近，有一个比较火的很有趣且灵动的登录页火了。
角色视觉跟随鼠标
输入框打字时扯脖子瞅
显示密码明文时避开视线
已经有大神（katavii）复刻了动画效果，并在github上开源了：https://github.com/katavii/animated-login ，基于React实现。
如果你的项目是用Vue开发的，可以考虑用AI将此项目转换成了Vue3的语法写法。
最简单的方式，直接用Claude Code一句话就能完成，根据模型能力，你可能需要多次调试。
claude
帮我把这个项目转成vue3 + ant-design-vue的前端项目
以下是我的转换代码，如果你的AI代码没有调试成功，可以参考下。
创建项目
现在开发前端项目，肯定首选Vite。
pnpm create vite
# 选择Vue模板、TypeScript语法
封装组件
在src/components/创建animated-characters文件夹
EyeBall
创建 src/components/animated-characters/EyeBall.vue，制作动画的大眼睛。
<template>
<div
class="eyeball"
:data-max-distance="maxDistance"
:style="eyeballStyle"
>
<div
class="eyeball-pupil"
:style="pupilStyle"
/>
</div>
</template>
<script setup lang="ts">
interface Props {
size?: string
pupilSize?: string
maxDistance?: number
eyeColor?: string
pupilColor?: string
}
const {
size,
pupilSize,
maxDistance,
eyeColor,
pupilColor
} = withDefaults(defineProps<Props>(), {
size: '48px',
pupilSize: '16px',
maxDistance: 10,
eyeColor: 'white',
pupilColor: 'black'
})
const eyeballStyle = {
width: size,
height: size,
borderRadius: '50%',
backgroundColor: eyeColor,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
willChange: 'height'
}
const pupilStyle = {
width: pupilSize,
height: pupilSize,
borderRadius: '50%',
backgroundColor: pupilColor,
willChange: 'transform'
}
</script>
Pupil
创建 src/components/animated-characters/Pupil.vue，制作动画的小眼睛。