Signalis Avatar (灵鹊 / LingQue)

一个基于 React 的交互式 Web 应用程序，渲染了一个具有动态动画效果的“灵鹊”（LingQue）头像，风格灵感源自游戏《Signalis》。

功能特点

• 视差眼球追踪：眼睛会跟随鼠标光标移动，并具有模拟深度的视差效果。
• 动态表情变换：面部表情会根据光标的垂直位置动态变化（例如：向下看时会眯眼）。
• 自动眨眼系统：通过自定义 Hook 实现自然且随机的眨眼循环。
• CRT 滤镜效果：基于 HTML5 Canvas 的后处理效果，模拟老式 CRT 显示器的扫描线、噪点和暗角。
• 分层动画：通过多个图像层（头发、传感器、面具、眼睛等）的叠加，营造出丰富的层次感。

技术栈

• 框架：React 19
• 语言：TypeScript
• 构建工具：Vite 7
• 样式：Tailwind CSS 4
• 代码规范：ESLint

项目结构

src/
├── components/
│   ├── SignalisAvatar.tsx  # 头像核心组件，处理视差逻辑
│   └── Crt.tsx             # 基于 Canvas 的 CRT 滤镜组件
├── hooks/
│   └── useBlink.ts         # 眨眼动画控制逻辑
├── App.tsx                 # 应用入口
└── index.css               # 全局样式与自定义动画

快速开始

前提条件

• Node.js (建议使用最新的 LTS 版本)
• npm

安装

1. 克隆仓库：

   git clone <repository-url>
   cd react-first/my-app
   

2. 安装依赖：

   npm install
   

开发模式

启动本地开发服务器：

npm run dev

生产构建

构建生产环境版本：

npm run build

致谢与归属

• 角色设计：灵感源自《Signalis》(rose-engine)。
• 资产：图像资源位于 public/img/LingQue/。