frame-liquid-bg-hero

01 前言 Front Matter

od

{ "mode": "video", "preview": { "type": "html", "entry": "index.html", "reload": "debounce-100" }, "surface": "video", "scenario": "video", "upstream": "https://github.com/nexu-io/html-anything", "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 和占位图片。" } }

name

frame-liquid-bg-hero

tags

[ "liquid", "fluid", "background", "hero", "html-in-canvas", "vfx" ]

emoji

🌊

en_name

Liquid Background Hero

zh_name

流体背景 Hero 帧

category

poster

featured

39

scenario

video

example_id

sample-frame-liquid-bg-hero

aspect_hint

1920×1080 (16:9) 或 1080×1920 (9:16)

description

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

example_desc

多层 radial-gradient 呼吸背景 + difference 文字

example_name

流体背景 Hero · 金句

en_description

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

example_format

markdown

zh_description

WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报

example_tagline

Aurora Violet 流体

example_source_url

https://hyperframes.heygen.com/catalog

example_source_label

hyperframes · vfx-liquid-background

02 资源文件 2

• 参考文档example.html3.6 KB
• 参考文档example.md205 B

03 SKILL.md 正文