Home / All Skills / Design & Motion / frame-liquid-bg-hero
English (EN)简体中文 (ZH)日本語 (JA)
Design & Motion · nexu-io/html-anything

frame-liquid-bg-hero

WebGL-style fluid displacement background + quote overlay at the top; ideal for video intros, landing hero sections, and posters

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0（仓库根 LICENSE；GitHub API spdx_id=Apache-2.0）Commit 553ed98c28
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

This skill is not an executable program, but a prompt injected into the local coding-agent CLI: the host takes the body of SKILL.md, prepends site-wide shared design instructions, appends the user's content to assemble a single prompt, delivers it to the logged-in agent, and retrieves the agent's stdout as HTML.

next/src/lib/templates/shared.ts
【输入格式】: ${opts.format} 【用户内容】: ${opts.content}
Assembly template = shared instructions → skill body → input format → user content; the web endpoint /api/convert follows the same function: prompt = assemblePrompt({ body: skill.body, content, format });

The shared instruction layer (which does not belong to any single skill, but governs every template) pins the output strictly to a 'self-contained single-file HTML', explicitly forbidding the agent from using file system tools like Write/Edit/Bash, and streaming HTML directly as conversation text.

next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
This is the source of the capability boundaries for this batch of skills: deliverables are purely text, with disk persistence and rendering handled by the host frontend; this prohibition is a prompt-level soft constraint, not hard sandbox isolation.

Beyond SKILL.md, there is a 'content-driven volume' override rule: any page, frame, or card count specified in the template is treated as a reference baseline lower bound, with the actual volume determined by the user's content—preventing the agent from compressing user content to match template figures.

next/src/lib/templates/shared.ts
- 模板只定义"可用版面 / 风格 / 配色 / 字体 / 组件库", **不定义** slide / 帧 / 卡片 / section 的数量。
This is particularly critical for frame-* single-frame templates: it characterizes the layout descriptions in the template as a 'reusable layout pool' rather than a production ceiling.

The loading convention is 'one skill = one directory': SKILL.md (YAML frontmatter for the selector + body as the template prompt), along with optional example.md (sample input) and example.html (directly openable preview sample); adding new templates only requires adding a directory, without modifying TS code.

next/src/lib/templates/loader.ts
* SKILL.md — frontmatter (id, scenario, tags, …) + prompt body * example.md — (optional) sample input content * example.html — (optional) pre-rendered preview, shown inline in the picker
The loader's loadSkillFromDir reads only these three types of files, with no other asset loading channels—the second pass checks this skill's asset reachability accordingly.

The selection pipeline (CLI side) is a three-stage funnel: strong keyword signal (2 points per matched keyword, threshold 3) → fallback to tags/scenario scoring → if still indeterminate, the first 800 characters of the user content are passed to the local agent for a one-sentence classification.

cli/src/skills-matcher.ts
const CONFIDENCE_THRESHOLD = 3;
Original prompt for AI fallback: const prompt = `请用一句话（不超过15个字）描述以下内容最像什么类型的文档，只需回答类型名称：

The preview pipeline is decoupled from generation: /api/templates/<id>/preview returns example.html verbatim as text/html to the iframe; the frontend iframe uses sandbox="allow-scripts allow-same-origin".

next/src/components/preview-pane.tsx
sandbox="allow-scripts allow-same-origin"
Route comment: * Returns the skill's `example.html` verbatim so it can be loaded into an (Host-side tradeoff: under the allow-scripts + allow-same-origin combination, scripts in the preview page can dismantle the sandbox themselves).

The fluid background provides three implementation tiers and defaults to the most robust Tier 1: multi-layer CSS radial-gradient staggered breathing (3-5 large ellipses, @keyframes translate+scale+hue-rotate, 8-14s staggered periods, mix-blend-mode screen/overlay, and a top-layer backdrop-filter blur(80px)).

next/src/lib/templates/skills/frame-liquid-bg-hero/SKILL.md
1. **CSS 多层 radial-gradient 错位呼吸** (最稳, 默认推荐):
Defaults to the most stable implementation, avoiding failures caused by jumping straight to WebGL.

Tiers 2 and 3 serve as progressive enhancements: Canvas + hand-coded perlin noise/metaballs (~80 lines of inline JS, requestAnimationFrame, downgrading to a static snapshot under prefers-reduced-motion); WebGL fragment shader (importing regl via jsdelivr or inline plain WebGL, single quad + u_time).

next/src/lib/templates/skills/frame-liquid-bg-hero/SKILL.md
3. **WebGL fragment shader** (高阶, 慎用):
Tiers 2 and 3 are progressive enhancements equipped with a prefers-reduced-motion fallback.

The text layer utilizes mix-blend-mode: difference to solve legibility across any fluid color—this is the most practical technique for text over fluid backgrounds, rather than adding strokes or solid backdrop panels.

next/src/lib/templates/skills/frame-liquid-bg-hero/SKILL.md
- 文字色用 paper white `#fafaf8` 或 ink, 取决于背景明暗; 加 `mix-blend-mode: difference` 让它在任何流体颜色上都可读。
difference blend mode ensures text legibility over fluid backgrounds.

Color tuning is locked to four named palettes (Solar Peach / Ocean Aqua / Aurora Violet / Forest Mint), requiring an explicit choice of one out of four, strictly avoiding rainbow gradients.

next/src/lib/templates/skills/frame-liquid-bg-hero/SKILL.md
example_tagline: "Aurora Violet 流体"
Choose one of four named color palettes; rainbow stacking is prohibited.

The canvas supports a choice between 1920×1080 landscape and 1080×1920 portrait, while explicitly prohibiting externally linked images—all visual elements must be pure CSS + SVG (+ optional canvas).

next/src/lib/templates/skills/frame-liquid-bg-hero/SKILL.md
- 严禁外链图片; 全部 CSS + SVG + 可选 canvas。
Dual landscape/portrait canvas + no external images: single-file, directly openable on double-click.

2Core Capabilities

01Three-tier fluid implementation (CSS breathing / Canvas perlin / WebGL shader), defaulting to the most stable approach
02Blend modes and blur: mix-blend-mode screen/overlay + backdrop-filter blur(80px)
03Giant quote text layer with difference blending to ensure legibility
04Four named color palettes (Solar Peach / Ocean Aqua / Aurora Violet / Forest Mint)
05Dual canvas orientations (1920×1080 or 1080×1920)
06Automatic extraction of quotes ≤18 characters during data input
07Prohibitions: multicolored rainbows, PowerPoint gradients, neon stacking, and external images
08Motion effects can be disabled via prefers-reduced-motion
09Selector keywords: liquid / 流体 / blob / 渐变背景 / hero

3External Dependencies

KindDependency / Endpoint
networkTailwind Play CDN（共享指令强制；示例页亦引用）
networkGoogle Fonts（Inter Tight / Source Serif Pro / Noto Sans SC，示例页实际引用）
networkjsdelivr CDN（仅第 3 级 WebGL 方案引入 regl，可选、非默认路径）
networkhyperframes 目录页（frontmatter 出处标注，非运行时请求）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Can be auto-loaded
For Administrators
Register source and version
Evidence & Triggers (File Paths & Excerpts)
  • SKILL.md: Pure prompt instructions and rule text; no script execution or external impact
Audit Notes: . The evaluation target is the skill's own directory (Scope: what actually happens when executing according to SKILL.md): SKILL.md consists purely of instruction text; the accompanying example.md and example.html are samples and preview templates. The directory contains no scripts, no runtime network calls, no credential access, and no agent-side file writes. SKILL.md also does not reference any external generation or service backend (contrasting with orange precedents like ai-image-generation / seedance, which send assets to external generation backends and consume account quotas; this template causes no outbound asset transmission). Explanatory items that do not affect the rating: example.html within the directory links to external cdn.tailwindcss.com and fonts.googleapis.com (Batch 4 standard: external links in example.html are artifact samples and not subject to grading); the shared instruction layer similarly requires deliverables to link Tailwind and Google Fonts via CDN in the head (- 在 `<head>` 中通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。), which is host shell behavior. Host context (not counted toward tiering, see verdict.risks): preview iframe uses sandbox="allow-scripts allow-same-origin"; host launches the agent in full-privilege mode ("bypassPermissions", / "--yolo",). Additional note: jsdelivr in SKILL.md:35 only appears as an option in Tier 3 'Advanced, Use with Caution' (default is pure CSS, with an inline WebGL alternative available), representing a conditional option rather than a strict requirement, hence no upgrade to 🟡; the hyperframes link serves as frontmatter source attribution.

5Second-Pass Verification

  • [ok] 三级实现与文字层规格 — 重读 SKILL.md【流体背景】【顶层文字层】【调色】三段，引用逐字一致（含 blur(80px)、difference、四色板十六进制）。
  • [ok] jsdelivr 条目定性 — source 中该词仅出现在 `用 jsdelivr CDN 引 regl 或 inline plain WebGL。`（SKILL.md:35，第 3 级且标注『高阶, 慎用』）；按批4 口径未升档，已在 deps/reason 标注。
  • [ok] 『单文件可双击打开』宣称 — SKILL.md 写明『WebGL 流体感, 但用 CSS / canvas 退化绘制, 确保单文件可双击打开』——与默认 CSS 方案一致，无夸大。
  • [ok] 外部端点存在性 — example.html 实测命中 cdn.tailwindcss.com 与 fonts.googleapis.com；jsdelivr 未出现在示例页（仅 SKILL.md 可选路径）。
  • [ok] 安全面 — 目录内 3 个文件无自写脚本（示例页仅 Tailwind CDN 标签）、无凭证、无写盘、无表单外发。
  • [ok] meta 元数据 — GitHub API 实查 stars=8827、pushed_at=2026-09-15T03:36:24Z、license Apache-2.0。
  • [unlocatable] 安装量 — 无公开安装量数据源，installs=null。

6Verdict & Scenarios

  • Graceful degradation-first engineering judgment: defaults to pure CSS radial-gradient breathing, with Canvas/WebGL as progressive enhancements, ensuring the single file opens reliably on double-click.
  • The difference blend mode solves text legibility on fluid backgrounds, offering a cleaner look than strokes or solid backplates.
  • Four named palettes (with hex codes) can be directly reused as design tokens, preventing color drift across frames.
  • Dual landscape/portrait canvas with dual positioning for posters and video intros—a single template covers landing hero, intro frame, and poster background deliverables.
    • Best for: Ideal for SaaS landing hero sections, video title frames, and event poster backgrounds; especially suited for single-file solutions requiring a refined texture without relying on image assets.
    Not for: Not suitable for landing page body text requiring high information density (it serves as a hero/background, not a content page); not suitable for real-time playback on ultra-low-end devices (multi-layer blur + animation overhead is high); not suitable for projects requiring photorealistic backgrounds.
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload frame-liquid-bg-hero.tar.gz
    sha256: 7995bcbdcff12379…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.