用途:作为视频片头帧、SaaS landing 顶部 hero 或海报底图,提供 WebGL 风格的流体位移背景加文字叠加效果。画布可选 1920×1080 横版或 1080×1920 竖版,背景占满。
主要能力:流体背景有三种实现方式。默认推荐 CSS 多层 radial-gradient 错位呼吸,用 3-5 个大椭圆配合 @keyframes 平移、scale、hue-rotate,周期 8-14s 错峰,叠加 mix-blend-mode 与 backdrop-filter: blur(80px)。中阶为 Canvas 加简单 perlin noise,约 80 行 inline JS 用 requestAnimationFrame 绘制 metaballs 或 simplex noise field。高阶为 WebGL fragment shader,可用 jsdelivr CDN 引 regl 或 inline plain WebGL,写 domain-warp noise,单 quad 加 u_time uniform。
文字层:居中或左下放一句巨型金句(5-7vw),副标一行,底部可选 CTA chip 或 hairline 加元数据 row。文字可用 mix-blend-mode: difference 保证可读性。调色四选一:Solar Peach、Ocean Aqua、Aurora Violet、Forest Mint。
使用方式:单文件 HTML,可双击打开;必须使用用户提供的金句或标题,若输入为数据则提炼一句不超过 18 字的金句。
限制:严禁多色彩虹、PowerPoint 渐变、霓虹荧光叠加;严禁外链图片,全部用 CSS、SVG 和可选 canvas;需支持 prefers-reduced-motion 关闭动效。字体中文用 Noto Serif SC 与 Noto Sans SC。具体安装命令与代码示例暂未提供。