Cómo usar
- Copia el comando y revisa el paquete antes de instalarlo en tu entorno de agente.
- Consulta las herramientas, credenciales y entornos necesarios en el documento original.
- Describe las entradas y el resultado deseado; contrasta la salida con las fuentes.
npx skills add https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/frame-liquid-bg-hero --skill frame-liquid-bg-heroAntes de empezar
- La instalación no incluye suscripción al modelo, cuota API ni permisos sobre tus archivos.
- Las estrellas e instalaciones reflejan actividad, no una prueba independiente de calidad o seguridad.
Documento original del Skill
Contenido del repositorio de origen con títulos, ejemplos, código, tablas, enlaces e imágenes preservados.
【模板: 流体背景 Hero】 【意图】可作为视频片头帧、SaaS landing 顶部 hero、海报底图。WebGL 流体感, 但用 CSS / canvas 退化绘制, 确保单文件可双击打开。Inspired by hyperframes vfx-liquid-background。
【画布】1920×1080 (横) 或 1080×1920 (竖), 二选一。背景占满。
【流体背景 — 3 种实现, 按用户偏好选】
- CSS 多层 radial-gradient 错位呼吸 (最稳, 默认推荐):
- 3-5 个大椭圆
radial-gradient(...), 颜色取自调色板。 - 每个椭圆套
@keyframes平移 + scale + hue-rotate, 周期 8-14s, 错峰; 整个画面叠mix-blend-mode: screen或overlay。 - 顶层加 1 层
backdrop-filter: blur(80px)让边缘更糊。
- Canvas + simple perlin noise (中阶):
- 80 行 inline JS, 用
requestAnimationFrame画 metaballs 或 simplex noise field。 - 性能允许时启用,
prefers-reduced-motion时降回静态截图。
- WebGL fragment shader (高阶, 慎用):
- 用 jsdelivr CDN 引
regl或 inline plain WebGL。 - shader 写 domain-warp noise; 单个 quad, 一个 uniform
u_time。
【顶层文字层】
- 居中或左下: 一句巨型金句 (5-7vw, 衬线或粗 sans), 字体:
Source Serif Pro/Inter Tight/Manrope Black。 - 文字色用 paper white
#fafaf8或 ink, 取决于背景明暗; 加mix-blend-mode: difference让它在任何流体颜色上都可读。 - 副标 (小 sans, opacity 0.7) 一行。
- 底部可选 CTA chip 或 hairline + 元数据 row。
【调色 — 4 选 1, 不要彩虹】
- 🌅 Solar Peach —
#ffb18a+#f78b4c+#d97757, 暖橙桃。 - 🌊 Ocean Aqua —
#5ac8fa+#0a84ff+#1e3a8a, 海蓝。 - 🌌 Aurora Violet —
#a78bfa+#7c5cff+#1e1b4b, 极光紫。 - 🌿 Forest Mint —
#86efac+#34d399+#065f46, 苔森林。
【设计细节】
- 严禁: 多色彩虹 (>4 个色相)、PowerPoint 渐变、霓虹荧光叠加。
- 字体: 中文用
Noto Serif SC(display) /Noto Sans SC(副标)。 - 严禁外链图片; 全部 CSS + SVG + 可选 canvas。
- 必须用用户提供的金句 / 标题; 如果用户输入是数据 → 提炼一句 ≤ 18 字的金句。
- 单文件 HTML, 可被
prefers-reduced-motion关动效。
