流体墨迹:用彩色墨水搅动的首屏大标题

做一个首屏,鼠标在实时流体模拟里搅动有光泽的彩色墨水,墨水盖住的地方,巨大的标题字会变成浅色。纯代码,不调用模型:GPU 流体求解、取自你配色的墨水颜色、柔和的投影,标题按页面自己的排版画进画面。首屏之后是一个完整的落地页:章节大标题、简介、用 HTML 画的产品控制台、功能卡片、要点、数据、引言、行动按钮和页脚,背景光晕随章节变化,底部有悬浮的章节胶囊。

流体墨迹:用彩色墨水搅动的首屏大标题

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

使用方法

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

  2. 在浏览器里,GPU 流体求解每帧运行:鼠标的移动推动流动并加入墨水,涡度让它保持打旋,压力让它像液体一样流动。

  3. 标题按页面排版的位置画进同一帧,纸上是深色,墨水下是浅色。

常见问题

页面会调用模型吗?

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

没有 WebGL2 会怎样?

标题显示为普通文字,页面照常可用,只是没有墨水。开启减少动态效果时也一样。

能用我自己的颜色和字体吗?

可以。在 site.json 里设置 palette.bg、ink、inkOn 和墨水颜色;字体来自页面 CSS,任何网页字体都可以。

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

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

手机上能用吗?

能。用手指拖动就能搅动墨水,直到浏览器开始滚动。已在 390 像素宽的手机视口里检查过。

为什么没有在线生成?

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