Skill

/frame-liquid-bg-hero

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

shell

$ npx -y skills add nexu-io/html-anything --skill frame-liquid-bg-hero --agent claude-code

Installs just this skill. Get the whole plugin for auto-invocation.

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/frame-liquid-bg-hero

Context preview

The summary Claude sees to decide when to auto-load this skill.

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

Stats

Stars7,917

Forks772

LanguageHTML

LicenseApache-2.0

Ships with html-anything

SKILL.md

frame-liquid-bg-hero.SKILL.md

---
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 (竖), 二选一。背景占满。