免费在 GitHub 公开中文介绍

frame-liquid-bg-hero

生成单个HTML文件，在流动变色的背景上叠加醒目的引语、标题或短消息，可用于视频片头、落地页主视觉和海报，并可选择横向或纵向画布。

原文查看原文说明

WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.

适用场景

制作在流动变色的背景上叠加大幅引语或标题的视觉画面，输出单个HTML文件，用于视频片头、落地页顶部或海报背景。可选择1920×1080横向画布或1080×1920纵向画布，还能添加副标题和简短的行动提示。

适合让简短消息成为画面主体的场景。配色可从暖色、蓝色、紫色、绿色四个系列中选择，文字使用你提供的消息或标题。如果输入内容是数据，则按不超过18字的要求提炼成简短消息。

背景通过CSS、canvas或WebGL绘制，不使用外部图片。默认采用CSS渐变。WebGL版本可通过CDN加载regl，也可直接使用WebGL实现。支持prefers-reduced-motion，在减少动态效果的设置下停止动画或切换为静态图像。

本介绍由 AI（OpenAI Codex）根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。

AI 仅根据 SKILL.md 的内容，从 4 个方面进行了评估。星标数和热度不计入评估。

总分按每项 A=25 分、B=15 分、C=5 分相加。由 AI（OpenAI Codex）于 2026年10月20日评估。仅供参考，安装前请同时查看原文。

如果您认为评估有误，请申请复核

安装前可以查看交给 AI 代理的指令内容。

【模板: 流体背景 Hero】【意图】可作为视频片头帧、SaaS landing 顶部 hero、海报底图。WebGL 流体感, 但用 CSS / canvas 退化绘制, 确保单文件可双击打开。Inspired by hyperframes vfx-liquid-background。

【画布】1920×1080 (横) 或 1080×1920 (竖), 二选一。背景占满。

【流体背景 — 3 种实现, 按用户偏好选】

CSS 多层 radial-gradient 错位呼吸 (最稳, 默认推荐):
- 3-5 个大椭圆 radial-gradient(...), 颜色取自调色板。
- 每个椭圆套 @keyframes 平移 + scale + hue-rotate, 周期 8-14s, 错峰; 整个画面叠 mix-blend-mode: screen 或 overlay。
- 顶层加 1 层 backdrop-filter: blur(80px) 让边缘更糊。
Canvas + simple perlin noise (中阶):
- 80 行 inline JS, 用 requestAnimationFrame 画 metaballs 或 simplex noise field。
- 性能允许时启用, prefers-reduced-motion 时降回静态截图。
WebGL fragment shader (高阶, 慎用):
- 用 jsdelivr CDN 引 regl 或 inline plain WebGL。
- shader 写 domain-warp noise; 单个 quad, 一个 uniform u_time。

【顶层文字层】

居中或左下: 一句巨型金句 (5-7vw, 衬线或粗 sans), 字体: Source Serif Pro / Inter Tight / Manrope Black。
文字色用 paper white #fafaf8 或 ink, 取决于背景明暗; 加 mix-blend-mode: difference 让它在任何流体颜色上都可读。
副标 (小 sans, opacity 0.7) 一行。
底部可选 CTA chip 或 hairline + 元数据 row。

【调色 — 4 选 1, 不要彩虹】

【设计细节】

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。