丝带雕塑滚动:随滚动展开的金属丝带雕塑

做一个随滚动变化的首屏:九十条扭转的细金属丝带组成一座雕塑,滚动时一边转动一边从紧紧缠绕展开成一朵花,并朝鼠标倾斜,标题向上退开,数据卡片依次浮上来。用 WebGL 在代码里成形和着色,不调用模型,没有媒体文件。首屏之后是一个完整的落地页:章节大标题、简介、用 HTML 画的产品控制台、功能卡片、要点、数据、引言、行动按钮和页脚,背景光晕随章节变化,底部有悬浮的章节胶囊。

丝带雕塑滚动:随滚动展开的金属丝带雕塑

准备好品牌、小标签、标题、两个按钮、链接、最多四个数据、丝带颜色和语言。Skill 会交付一个完整的落地页(index.html)、一段可以粘进现有网站的区块和一个 React 组件,附带开源字体。

使用方法

  1. 构建脚本写出三屏高的区块和粘性舞台,标题和数据卡片是真实文字,同时生成可粘贴的区块和 React 组件。

  2. 在浏览器里,一个网格存着所有丝带的四边形条带;顶点着色器根据丝带编号、沿丝带的位置和滚动进度算出形状,从紧紧缠绕到展开成花。

  3. 片元着色器给每条丝带配色,加上镜面一样的影棚反射,鼠标让整座雕塑倾斜。

常见问题

页面会调用模型吗?

不会。它是纯代码:HTML、一个脚本和两种字体。做一个页面不花钱。

能换成我自己的 3D 模型吗?

不能。雕塑来自同一类丝带形状;你可以选颜色、丝带数量、宽度和光泽。

没有 WebGL 会怎样?

会用一个模糊的色轮代替雕塑,页面照样可以滚动。开启减少动态效果时,雕塑只随滚动变化。

为什么这里点链接没反应?

示例运行在沙盒框架里,链接被禁用了。在你自己的页面里,链接会指向你在 site.json 里填的地址。

手机上能用吗?

能,窄屏上用 54 条丝带。已在 390 像素宽的手机视口里检查过:滑动就能展开。

为什么没有在线生成?

生成新场景需要在沙盒里注入模型 Key,后端暂时还不支持。目前请用你自己的 Agent 运行这个 Skill。