Menu
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/nexu-io/html-anything --skill frame-liquid-bg-heroThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
Based on SOC occupation classification
| name | frame-liquid-bg-hero |
| zh_name | 流体背景 Hero 帧 |
| en_name | Liquid Background Hero |
| emoji | 🌊 |
| description | WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报 |
| category | poster |
| scenario | video |
| aspect_hint | 1920×1080 (16:9) 或 1080×1920 (9:16) |
| featured | 39 |
| tags | ["liquid","fluid","background","hero","html-in-canvas","vfx"] |
| example_id | sample-frame-liquid-bg-hero |
| example_name | 流体背景 Hero · 金句 |
| example_format | markdown |
| example_tagline | Aurora Violet 流体 |
| example_desc | 多层 radial-gradient 呼吸背景 + difference 文字 |
| example_source_url | https://hyperframes.heygen.com/catalog |
| example_source_label | hyperframes · vfx-liquid-background |
【模板: 流体背景 Hero】 【意图】可作为视频片头帧、SaaS landing 顶部 hero、海报底图。WebGL 流体感, 但用 CSS / canvas 退化绘制, 确保单文件可双击打开。Inspired by hyperframes vfx-liquid-background。
【画布】1920×1080 (横) 或 1080×1920 (竖), 二选一。背景占满。
【流体背景 — 3 种实现, 按用户偏好选】
radial-gradient(...), 颜色取自调色板。@keyframes 平移 + scale + hue-rotate, 周期 8-14s, 错峰; 整个画面叠 mix-blend-mode: screen 或 overlay。backdrop-filter: blur(80px) 让边缘更糊。requestAnimationFrame 画 metaballs 或 simplex noise field。prefers-reduced-motion 时降回静态截图。regl 或 inline plain WebGL。u_time。【顶层文字层】
Source Serif Pro / Inter Tight / Manrope Black。#fafaf8 或 ink, 取决于背景明暗; 加 mix-blend-mode: difference 让它在任何流体颜色上都可读。【调色 — 4 选 1, 不要彩虹】
#ffb18a + #f78b4c + #d97757, 暖橙桃。#5ac8fa + #0a84ff + #1e3a8a, 海蓝。#a78bfa + #7c5cff + #1e1b4b, 极光紫。#86efac + #34d399 + #065f46, 苔森林。【设计细节】
Noto Serif SC (display) / Noto Sans SC (副标)。prefers-reduced-motion 关动效。