Frame Liquid Bg Hero

Name: Frame Liquid Bg Hero
Author: nexu-io

nexu-io/open-design

Ship a full-bleed liquid hero frame for landing pages, video openers, or posters without wiring a separate motion toolchain.

Install

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

What is this skill?

3 fluid background modes: CSS radial-gradient breathe (default), canvas fallback, WebGL-style intent
1920×1080 or 1080×1920 canvases with single-file HTML-in-canvas open locally
Top overlay for headline quote with difference/blend-friendly typography
Inspired by hyperframes vfx-liquid-background; debounced HTML preview workflow
Example prompt enforces real copy and data—no lorem ipsum placeholders

Adoption & trust: 667 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).

Recommended Skills

Web Design Guidelinesvercel-labs/agent-skills

Web Design Guidelines is a Vercel Labs agent skill that audits your UI source against the public Web Interface Guideline…374k installs·27.7k stars

Lark Whiteboardlarksuite/cli

Documents how to build Lark whiteboard v2 layouts with correct connector placement, arrow defaults, and polyline or wayp…209k installs·13.7k stars

Ui Ux Pro Maxnextlevelbuilder/ui-ux-pro-max-skill

UI/UX Pro Max is an agent skill that packages professional design intelligence for solo and indie builders who are imple…206k installs·88.7k stars

Sleek Design Mobile Appssleekdotdesign/agent-skills

Agent skill for sleek.design: bearer-authenticated API calls to create projects, describe UI, and retrieve rendered mobi…182k installs·422 stars

Impeccablepbakaus/impeccable

User-invocable frontend design skill that loads product/design context and iterates real UI with exceptional craft and a…152k installs·35.9k stars

Design Taste Frontendleonxlnx/taste-skill

Senior UI/UX frontend skill that overrides default LLM design bias with tunable visual rules, strict React/Next architec…124k installs·37.9k stars

Journey fit

Primary fit

ValidateLanding-page & waitlist tests

Hero frames prove positioning and visual hook before a full marketing site exists, which Prism places in Validate landing work. The template targets top-of-funnel hero surfaces—landing hero, poster, and video header—not app shell navigation.

Common Questions / FAQ

Is Frame Liquid Bg Hero safe to install?

skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

SKILL.md

READMESKILL.md - Frame Liquid Bg Hero

【模板: 流体背景 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` 关动效。


# 流体 Hero · 金句帧

> Aurora Violet 流体背景, mix-blend-mode 文字

## 金句
最好的 HTML, 是让读者忘了它是 HTML。

## 副标
HTML Anything · 75 个世界级模板, 0 个 API key


<!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; }

What is this skill?

3 fluid background modes: CSS radial-gradient breathe (default), canvas fallback, WebGL-style intent

1920×1080 or 1080×1920 canvases with single-file HTML-in-canvas open locally

Top overlay for headline quote with difference/blend-friendly typography

Inspired by hyperframes vfx-liquid-background; debounced HTML preview workflow

Example prompt enforces real copy and data—no lorem ipsum placeholders

Adoption & trust: 667 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).

Journey fit

Primary fit

ValidateLanding-page & waitlist tests

SKILL.md

READMESKILL.md - Frame Liquid Bg Hero

【模板: 流体背景 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` 关动效。


# 流体 Hero · 金句帧

> Aurora Violet 流体背景, mix-blend-mode 文字

## 金句
最好的 HTML, 是让读者忘了它是 HTML。

## 副标
HTML Anything · 75 个世界级模板, 0 个 API key


<!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; }

Install

What is this skill?

Recommended Skills

Journey fit

Is Frame Liquid Bg Hero safe to install?

SKILL.md

This week for builders

Install

What is this skill?

Recommended Skills

Journey fit

Is Frame Liquid Bg Hero safe to install?

SKILL.md