Frame Liquid Bg Hero

Name: Frame Liquid Bg Hero
Author: nexu-io

nexu-io/html-video

1 installs
4.3k repo stars
Updated June 21, 2026
nexu-io/html-video

This is a copy of frame-liquid-bg-hero by nexu-io - installs and ranking accrue to the original listing.

Helps with ai & agent building tasks.

About

frame-liquid-bg-hero is a Claude Code skill for ai & agent building. It helps developers move faster with AI-assisted coding.

frame-liquid-bg-hero
AI & Agent Building
AI-coding skill

Frame Liquid Bg Hero by the numbers

1 all-time installs (skills.sh)
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/nexu-io/html-video --skill frame-liquid-bg-hero

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/html-video/frame-liquid-bg-hero.svg)](https://skillselion.com/skills/nexu-io/html-video/frame-liquid-bg-hero)

Installs	1
repo stars	★ 4.3k
Last updated	June 21, 2026
Repository	nexu-io/html-video ↗

What it does

Helps with ai & agent building tasks.

Files

SKILL.mdMarkdownGitHub ↗

【模板: 流体背景 Hero】【意图】可作为视频片头帧、SaaS landing 顶部 hero、海报底图。WebGL 流体感, 但用 CSS / canvas 退化绘制, 确保单文件可双击打开。Inspired by hyperframes vfx-liquid-background。

【画布】1920×1080 (横) 或 1080×1920 (竖), 二选一。背景占满。

【流体背景 — 3 种实现, 按用户偏好选】 1. CSS 多层 radial-gradient 错位呼吸 (最稳, 默认推荐):

3-5 个大椭圆 radial-gradient(...), 颜色取自调色板。
每个椭圆套 @keyframes 平移 + scale + hue-rotate, 周期 8-14s, 错峰; 整个画面叠 mix-blend-mode: screen 或 overlay。
顶层加 1 层 backdrop-filter: blur(80px) 让边缘更糊。

2. Canvas + simple perlin noise (中阶):

80 行 inline JS, 用 requestAnimationFrame 画 metaballs 或 simplex noise field。
性能允许时启用, prefers-reduced-motion 时降回静态截图。

3. 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 关动效。

{
  "name": "@html-video/template-frame-liquid-bg-hero",
  "version": "0.1.0",
  "description": "html-video template: frame-liquid-bg-hero (cherry-picked from nexu-io/open-design)",
  "license": "Apache-2.0",
  "private": true,
  "files": ["template.html-video.yaml", "source", "SKILL.md", "example.md", "preview.png"]
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Liquid Hero · Aurora Violet</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700;800;900&family=Noto+Sans+SC:wght@400;700;900&family=Source+Serif+Pro:ital,wght@1,400;1,600&display=swap" rel="stylesheet" />
<style>
  body { font-family:'Inter Tight','Noto Sans SC',system-ui,sans-serif; background:#1e1b4b; margin:0; min-height:100vh; overflow:hidden; color:#fafaf8; position:relative; }
  .blob { position:absolute; border-radius:50%; mix-blend-mode:screen; filter:blur(70px); will-change: transform; }
  @keyframes float1 { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(80px,-60px) scale(1.15) } }
  @keyframes float2 { 0%,100% { transform: translate(0,0) scale(1.1) } 50% { transform: translate(-100px,40px) scale(0.9) } }
  @keyframes float3 { 0%,100% { transform: translate(0,0) scale(0.95) } 50% { transform: translate(50px,80px) scale(1.2) } }
  .b1 { width:600px; height:600px; background:#a78bfa; top:-100px; left:-100px; animation: float1 12s ease-in-out infinite; }
  .b2 { width:520px; height:520px; background:#7c5cff; top:30%; right:-100px; animation: float2 10s ease-in-out infinite; }
  .b3 { width:480px; height:480px; background:#ec4899; bottom:-100px; left:30%; animation: float3 14s ease-in-out infinite; }
  .b4 { width:380px; height:380px; background:#06b6d4; top:60%; left:10%; animation: float1 16s ease-in-out infinite; opacity:0.6 }
  .text-diff { mix-blend-mode: difference; color:#fafaf8; }
  .chip { font-family:'Inter Tight',sans-serif; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; }
  .serif-em { font-family:'Source Serif Pro',serif; font-style:italic; font-weight:600; }
  /* faint grid overlay */
  body::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 64px 64px; z-index:1;
  }
  @media (prefers-reduced-motion: reduce) {
    .blob { animation: none }
  }
</style>
</head>
<body class="flex flex-col items-center justify-center p-16">

  <div class="blob b1"></div>
  <div class="blob b2"></div>
  <div class="blob b3"></div>
  <div class="blob b4"></div>

  <header class="absolute top-12 left-12 right-12 flex items-baseline justify-between chip opacity-70 z-10">
    <span class="text-diff">HTML ANYTHING · FRAME · LIQUID HERO</span>
    <span class="text-diff">AURORA VIOLET</span>
    <span class="text-diff">2026 · 1920 × 1080</span>
  </header>

  <main class="relative z-10 text-center max-w-[1100px]">
    <h1 class="text-diff font-black leading-[0.95] tracking-[-0.03em]" style="font-size:clamp(48px,7.5vw,128px)">
      最好的 HTML, <span class="serif-em">是</span><br/>
      让读者忘了它是 HTML。
    </h1>
    <p class="mt-8 text-diff opacity-80 text-[24px] font-medium">
      HTML Anything · 75 个世界级模板, 0 个 API key
    </p>
    <div class="mt-10 inline-flex items-center gap-3 text-[13px] font-semibold chip px-5 py-2 rounded-full text-diff" style="border:1px solid rgba(255,255,255,0.4)">
      ⌘ Try at localhost:3456
    </div>
  </main>

  <footer class="absolute bottom-12 left-12 right-12 flex items-baseline justify-between chip opacity-60 z-10">
    <span class="text-diff">FRAME-LIQUID-BG-HERO</span>
    <span class="text-diff">PREFERS-REDUCED-MOTION SAFE</span>
    <span class="text-diff">HTMLANYTHING.DEV</span>
  </footer>
</body>
</html>

spec_version: 1
id: frame-liquid-bg-hero
name: Liquid Background Hero
description: >
  Hero card over a flowing liquid mesh-gradient background — magazine-style cover with editorial typography.

engine: hyperframes
engine_version: ^0.4.0
source_entry: source/index.html

category: marketing
subcategory: hero
tags: [hero, liquid, gradient, mesh, editorial, cover]

best_for:
  - "Product launch hero"
  - "SaaS landing video"
  - "Editorial cover"

output:
  formats: [mp4, webm]
  default_format: mp4
  resolution:
    default: { width: 1920, height: 1080 }
    supported_aspects: ["16:9", "9:16", "1:1"]
  fps:
    default: 60
    supported: [30, 60]
  duration:
    type: variable
    min_sec: 4
    max_sec: 12
  alpha: false
  audio:
    supported: true
    expected_inputs: [bgm]

inputs:
  schema:
    type: object
    required: [headline]
    properties:
      headline:
        type: "string"
        maxLength: 120
        description: "Main headline"
      subheadline:
        type: "string"
        maxLength: 200
        description: "Supporting subheadline"
      cta:
        type: "string"
        maxLength: 40
        description: "Call to action label"
      duration_sec:
        type: "number"
        minimum: 4
        maximum: 12
        default: 6
  examples:
    - {"headline": "Design that evolves itself", "subheadline": "The first self-evolving design agent", "cta": "Try it", "duration_sec": 6}

license:
  spdx: Apache-2.0
  attribution_required: false
  redistribution_allowed: true
  commercial_use: true

author:
  name: nexu-io
  url: https://github.com/nexu-io
  contact: open-design@nexu.io

version: 0.1.0
changelog:
  - version: 0.1.0
    date: 2026-05-27
    notes: Cherry-picked from open-design/repo/skills/frame-liquid-bg-hero/example.html

preview:
  poster: preview.png

performance:
  reference_render:
    duration_sec: 6
    render_wall_clock_sec: 11
    machine: "M2 MacBook Air"