# Spatial: Recursive Intelligence Interface

Adapted from the project README

A Chinese-first spatial, AI-native personal homepage that uses long-form scrolling, a fixed WebGL canvas, and a single recursive monolith to express five stages: observation, causality, recursion, self-reference, and reconstruction.

[Website source](https://zzzxc.com/projects/gh-1258561536)

## Spatial Narrative Experience

The page uses a 500svh scrolling surface with a fixed full-screen WebGL canvas. Each of five narrative stages changes copy placement, camera posture, and material response, keeping the experience centered on one recursive monolith rather than presenting a conventional résumé or project index.

Its visual language emphasizes architectural composition, restraint, and low-saturation two-color contrast. Orbit, dolly, height, look-at drift, and roll make scrolling feel like movement around and toward a spatial artifact, while CSS owns the background and narrative layers.

## Interaction and Rendering Architecture

The project uses Next.js, React, TypeScript, Tailwind CSS, and Three.js. Lenis and ScrollTrigger coordinate the scroll timeline, Motion supplies narrative-presence primitives, Zustand stores shared pointer, viewport, and scene-mode state, and a custom frame loop coordinates DOM, pointer, and WebGL updates.

The WebGL object remains fixed in world space while scrolling drives the camera path and material parameters; there is no active physics room, gravity, or collision system. A single React Three Fiber canvas renders the scene, with a preload transition that waits for fonts and the model before revealing the narrative.

## Design Boundaries

The current experience is centered on one GLB recursive monolith and its stage-aware material effects. It does not use a UI component kit or a rigid-body scene; Tailwind CSS remains the design-system layer, with strict TypeScript constraining the implementation.

## Explore further

- [Project source](https://github.com/agenticnoob/static-25d-hero)

[Contents](https://zzzxc.com/agent/en/index.md)