メニュー
WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | frame-liquid-bg-hero |
| zh_name | 流体背景 Hero 帧 |
| en_name | Liquid Background Hero |
| emoji | 🌊 |
| description | WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters. |
| zh_description | WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报 |
| en_description | WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters. |
| 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 |
| od | {"mode":"video","surface":"video","scenario":"video","upstream":"https://github.com/nexu-io/html-anything","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":false},"example_prompt":"Use the Liquid Background Hero template to turn my content into a WebGL-style fluid displacement background with a quote overlay for a video intro, landing hero, or poster. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.","example_prompt_i18n":{"zh-CN":"用「流体背景 Hero 帧」模板把我的内容做成一段「WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"}} |
【模板: 流体背景 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 关动效。A native Remotion data frame — bars grow from zero by real data via spring physics while the figures roll 0→target in sync. The numbers come alive in a way a static HTML chart can't.
A 1970s European editorial poster in motion — a red rule draws across, a giant tilted figure drops in, a three-line headline rises line-by-line, an italic serif standfirst fades.
Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.
Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.
Electric split with hand-drawn script — offset panels slide in, display title rises with an outlined word, script strokes itself in.
Two-panel split with quote as hero — white/blue panels open from center, accent bar grows, quote reveals line by line.