粒子变形滚动:一团粒子在每一章变成新的形状

做一个随滚动讲故事的页面:一团 14,000 个发光粒子在每一章变成新的形状(球、花、蝴蝶、钻石、你的品牌词),鼠标经过时粒子会被推开,底部还有一片起伏的粒子。纯代码,不调用模型,没有媒体文件:WebGL 粒子、用代码或文字采样得到的形状,章节标题随形状切换。首屏之后是一个完整的落地页:章节大标题、简介、用 HTML 画的产品控制台、功能卡片、要点、数据、引言、行动按钮和页脚,背景光晕随章节变化,底部有悬浮的章节胶囊。

粒子变形滚动:一团粒子在每一章变成新的形状

准备好品牌、各章节(每章一个形状、标题和一句话)、链接、配色和语言。Skill 会交付一个完整的落地页(index.html)、一段可以粘进现有网站的区块和一个 React 组件,附带开源字体。

使用方法

  1. 构建脚本写出页面:章节标题是真实文字,同时生成可粘贴的区块和 React 组件。

  2. 在浏览器里,每章的形状只生成一次,点数都一样:球、花、蝴蝶、钻石来自公式,文字则把页面字体画出的单词采样成点。

  3. 滚动时每个粒子从上一个形状里的位置缓动到下一个形状里同一编号的位置,每个粒子有一点延迟;鼠标附近的粒子在着色器里被推开。

常见问题

页面会调用模型吗?

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

能用哪些形状?

球、圆环、星系、蝴蝶、钻石、花、心形、波浪、散点,以及用标题字体画出的任意短单词。

没有 WebGL 会怎样?

章节显示为普通文字,页面照样可以滚动浏览。开启减少动态效果时,形状在每章中间直接切换,没有变形过程。

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

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

手机上能用吗?

能,窄屏上用 6,000 个粒子。已在 390 像素宽的手机视口里检查过:滑动能经过所有章节。

为什么没有在线生成?

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