类型：Site模板 · 收录：2026-11-05 01:12:12 · 源码：会员可见
# MOTDES 液态雕塑首屏复现说明
这份说明由 MOTDES 根据所附实际工程整理，不是原作者的创作提示词。原组件 SculptureHero 来自 Guglielmo Giannattasio（@gughigug），遵守所附 MIT 许可并保留原作者署名。
请使用 React 19、TypeScript 与原生 WebGL2 完整搭建所附单屏工作室首页。直接复用 src/SculptureHero.tsx 的粒子引擎和着色器，保持原来的排版、雕塑、图层与交互，不另换设计。页头文字品牌设为 MOTDES，背景大字设为小写 motdes。米灰浅色底配深灰正文，正文用 Geist，标题后半句用 Instrument Serif 斜体，字体从本项目 public/fonts 本地加载。页头包含品牌、Work / Studio / Approach / Journal、主题切换与 Contact；下部保留 INDEPENDENT STUDIO — EST. 2019、两行 Form that / answers back.、原文简介与两个 CTA。保留页脚原作者链接。
主体雕塑使用 public/images/sculpture-light.webp，不自行生成替代图。主题切换改用 sculpture-dark.webp；小于 640px 时选用 sculpture-mobile-light.webp 或 sculpture-mobile-dark.webp。以现有布局算法计算雕塑的尺寸与位置，桌面横向展开，手机竖向雕塑与文字分区，正常页面高度为 100svh。开启 themeToggle、interactive 与 streaks，保留 strength=1、radius=220、particleDensity=1、particleSpread=1、dotSize=1、turbulence=1、liquid=1、returnSpeed=1、speed=1，restStyle=image、ambient=false、intro=false。
鼠标划过雕塑时，在光标半径内将真实图像采样为液态粒子，产生流动、拖尾与局部形变，离开后平滑回拢。触屏遵循原组件实现。使用 WebGL2 画布，图片先可见、引擎就绪后绘制；不支持 WebGL2 或减少动态效果时保留静态图作为回退。离屏、隐藏文档时暂停渲染。所有图片和字体随工程加载，关闭组件内部 Google Fonts 加载。原源码中的远程默认值仅作为上游保留内容，实际入口传入本地路径。
这是原组件已实现的一屏演示，不添加其他页面、假数据或未实现的业务功能。导航和两个 CTA 仍为上游的 # 演示占位，不能宣称已实现联系表单、作品集子页或工作室业务。新增的 ?capture 参数只用于 1600×1200 的本地真实截图采集。
验收时检查浅色与深色、实际图片完整解码、WebGL2 状态、鼠标粒子形变与自然回拢、375px 手机布局、页面宽度无横向溢出，以及网络中无额外雕塑图/字体外链依赖。MIT 和字体 OFL 文本须随源码保留；截图与动态小样必须来自这份带 MOTDES 品牌的实际构建。