AnyConcept

技术栈

角色

设计 + 全栈开发

团队规模

1 人

项目周期

2025年7月 - 进行中

项目概述

AnyConcept 是 klauden.xyz 个人网站，以 Kinetic Typography 和精密工程感为设计语言。首页通过弹簧物理驱动的动态字母、多层可展开交互文本、自定义十字光标等细节，打造沉浸式的第一印象。基于 Velite 的 Markdown 内容管道支撑文章系统，全站部署于 Vercel。

项目亮点

• KineticLetter 弹簧物理交互 — 鼠标接近时字母产生弹性位移
• 13 项可展开交互文本系统，最深 4 层嵌套，含进度追踪和完成彩蛋
• 自定义十字准星光标，hover 交互元素时变为橙色圆环
• EMAIL 复制按钮 — roller 动画切换 + ✓ 反馈
• 静态 PNG 噪点纹理 + background-clip: text 替代 SVG 实时滤镜
• 点阵网格 + 双侧光源漂移 + 鼠标跟随光晕的多层背景系统
• 基于 Velite 的 Markdown 文章系统，支持中英文

项目挑战

• React 19 严格模式下的组件定义和 hooks 顺序约束
• SVG feTurbulence 滤镜导致的 GPU 高负载
• CSS filter 继承问题 — 父级 filter 无法在子元素覆盖
• 多个 mousemove 监听器的性能瓶颈

解决方案

• 所有子组件提取为顶级定义，hooks 置于条件 return 之前
• 用 128×128 PNG 噪点 + background-clip: text 替代实时 SVG 滤镜
• 将 text-grain 从包裹 span 移至每个字母元素，解决 filter 继承
• 注册表模式：7 个 mousemove 合并为 1 个共享监听器