工具与素材
Atelier UI：WebGL 与 DOM 同屏的 React 组件库过程（Codrops）
Atelier UI 示范「DOM 可访问＋WebGL 特效」分层：营销站／作品集动效可对照转场约束与同钟滚动，而不是只看成片。
2026-10-21 Codrops 刊 Jérémie Nallet 教程：拆解 Atelier UI——固定全屏 R3F 画布＋portal，用 WebglText／WebglImage 把 DOM 文字／图同步到 WebGL，Lenis＋Motion 同钟防抖；示范 Fluid／Lens／Pixel 媒体效果、PixelTransition 路由遮罩与 SphereGallery。组件经 shadcn registry／MCP／CLI 拷贝进项目，演示见 tympanus.net/Demos/AtelierUI/。
Codrops 文章日期 In Tutorials, Oct 21, 2026；正文描述 WebglProvider、Motion 驱动 Lenis／canvas、TransitionLink preload；配 Demo Code 链。
为什么值得看
做营销站／作品集动效的设计师可收藏 DOM＋WebGL 分层做法与转场约束，作视觉与实现参考。