HAOQI Study

技术复刻学习 · HAOQI.DESIGN

拆解现代三维网页交互与着色器的技术复刻项目，在本地试验磨砂玻璃质感与平滑滚动管线。

学习目标

以 HAOQI.DESIGN 网站为参考样本，研究其平滑滚动、物理折射着色器以及 Canvas 文字渲染的配合方式。

管线实现

在本地借助 Next.js、React Three Fiber、Three.js、GLSL、Lenis 与 Motion 搭建试验环境。重点实现了毛玻璃着色器的动态折射效果、由滚动进度驱动的着色器参数传递，以及明暗主题切换。

范围与署名

在本地工程中还原了参考案例的布局和核心着色器表现。此项目为个人技术练习与 AI 辅助分析，保留原站全部素材和版式版权，色彩空间算法引用 @wenhaoqi/wasm_design_utils。