# Spatial：递归智能界面

根据项目 README 整理

一个以中文叙事为主的空间化 AI 原生个人主页，通过长滚动、固定 WebGL 画布和单一递归巨石，呈现观察、因果、递归、自指与重构五个阶段。

[网站原文](https://zzzxc.com/projects/gh-1258561536)

## 空间叙事体验

页面使用 500svh 长滚动表面和固定的全屏 WebGL 画布。五个叙事阶段分别改变文案布局、相机姿态与材质响应，使体验围绕同一个递归巨石展开，而不是作为传统简历或项目索引。

视觉语言强调建筑感、克制和低饱和双色对比。相机通过环绕、推拉、升降、注视点漂移和滚转塑造接近空间物体的感觉，背景和叙事层则由 CSS 管理。

## 交互与渲染架构

项目基于 Next.js、React、TypeScript、Tailwind CSS 和 Three.js。Lenis 与 ScrollTrigger 统一滚动时间线，Motion 处理叙事段落的出现状态，Zustand 保存共享指针、视口与场景模式；自定义逐帧循环协调 DOM、指针和 WebGL 状态。

WebGL 对象固定在世界空间中，滚动驱动相机路径与材质参数，而不是物理房间、重力或碰撞。场景采用单个 React Three Fiber Canvas，并在字体和模型就绪后完成预载界面到正文的过渡。

## 设计边界

当前焦点是单一 GLB 递归巨石及其阶段化材质效果，不包含刚体物理场景，也不使用 UI 组件库。Tailwind CSS 继续承担设计系统层，严格 TypeScript 用于约束实现。

## 继续了解

- [项目源码](https://github.com/agenticnoob/static-25d-hero)

[内容目录](https://zzzxc.com/agent/zh/index.md)