frame-liquid-bg-hero

{
  "ocm": "1",
  "id": "nexu-io-open-design-frame-liquid-bg-hero",
  "kind": "skill",
  "name": "frame-liquid-bg-hero",
  "description": "WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.",
  "publisher": "nexu-io",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "liquid",
      "fluid",
      "background",
      "hero",
      "html-in-canvas",
      "vfx",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/nexu-io/open-design",
      "path": "skills/frame-liquid-bg-hero/SKILL.md",
      "ref": "HEAD",
      "url": "https://www.skills.sh/nexu-io/open-design/frame-liquid-bg-hero",
      "key": "nexu-io/open-design/skills/frame-liquid-bg-hero/SKILL.md"
    }
  },
  "instructions": "【模板: 流体背景 Hero】\n【意图】可作为视频片头帧、SaaS landing 顶部 hero、海报底图。WebGL 流体感, 但用 CSS / canvas 退化绘制, 确保单文件可双击打开。Inspired by hyperframes vfx-liquid-background。\n\n【画布】1920×1080 (横) 或 1080×1920 (竖), 二选一。背景占满。\n\n【流体背景 — 3 种实现, 按用户偏好选】\n1. **CSS 多层 radial-gradient 错位呼吸** (最稳, 默认推荐):\n   - 3-5 个大椭圆 `radial-gradient(...)`, 颜色取自调色板。\n   - 每个椭圆套 `@keyframes` 平移 + scale + hue-rotate, 周期 8-14s, 错峰; 整个画面叠 `mix-blend-mode: screen` 或 `overlay`。\n   - 顶层加 1 层 `backdrop-filter: blur(80px)` 让边缘更糊。\n2. **Canvas + simple perlin noise** (中阶):\n   - 80 行 inline JS, 用 `requestAnimationFrame` 画 metaballs 或 simplex noise field。\n   - 性能允许",
  "cost": {
    "context_tokens": 389
  }
}