工具与素材
Codrops｜Atelier UI：WebGL 与 DOM 同屏的 React UI 库过程文
收藏「可编辑的 WebGL×UI」参考时，优先看有架构取舍与可点 demo 的过程文，而不是单段 Lottie。
2026-10-21 Codrops 刊出 Jérémie Nallet 教程：介绍开源向的 Atelier UI——用单一全屏 R3F canvas + portal 混排 WebGL 文字／图片与 DOM，配 Lenis／Motion 同源滚动、Fluid／Lens／Pixel 等媒体效果、像素遮罩页面转场与 Sphere Gallery。文中从 provider → primitive → 特效 → 转场分步可跟读；组件经 shadcn registry 拷贝进项目，配套公开 demo（tympanus.net/Demos/AtelierUI/）。
tympanus.net/codrops/2026/10/21/atelier-ui-webgl-dom/ 路径与 Creative Hub 标注 Oct 21, 2026；正文描述 Atelier UI、WebglProvider／WebglText／Fluid／PixelTransition 等步骤。
为什么值得看
收藏「可编辑的 WebGL×UI」参考时，比单段 Lottie 更完整：有架构取舍、可点 demo、过程清晰，适合落地页／作品集动效对照。
可以试试
先开 demo 感受 WebGL 文字与 DOM 混排，再决定是否把 Fluid／PixelTransition 一类效果收进作品集参考板。