用途:作为视频片头帧、SaaS 落地页顶部 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,用 requestAnimationFrame 画 metaballs 或 simplex noise field;高阶为 WebGL fragment shader,可用 jsdelivr CDN 引 regl 或 inline plain WebGL,写 domain-warp noise,单 quad 加 u_time uniform。
文字层:居中或左下放 5-7vw 巨型金句,字体可用 Source Serif Pro、Inter Tight、Manrope Black,中文用 Noto Serif SC 与 Noto Sans SC;文字色取 paper white #fafaf8 或 ink,可加 mix-blend-mode: difference 保证可读;副标为小 sans、opacity 0.7;底部可选 CTA chip 或 hairline 加元数据 row。
配色四选一:Solar Peach(#ffb18a、#f78b4c、#d97757)、Ocean Aqua(#5ac8fa、#0a84ff、#1e3a8a)、Aurora Violet(#a78bfa、#7c5cff、#1e1b4b)、Forest Mint(#86efac、#34d399、#065f46)。
限制:严禁多色彩虹(超过 4 个色相)、PowerPoint 渐变、霓虹荧光叠加;严禁外链图片,全部用 CSS、SVG 与可选 canvas;必须使用用户提供的金句或标题,若输入为数据则提炼一句不超过 18 字的金句;输出为单文件 HTML,可双击打开,并支持 prefers-reduced-motion 关闭动效。
其他:官方文档与安装命令暂未提供。