Skill

Pass

Audit score 90

frame-liquid-bg-hero

nexu-io/open-design

WebGL-style fluid displacement background with quote overlay for video intros and landing heroes.

What is frame-liquid-bg-hero?

A single-file HTML template featuring animated fluid backgrounds created with CSS gradients, canvas, or WebGL, paired with a centered quote overlay. Use it for video intro frames, SaaS landing page heroes, or poster backgrounds.

Renders animated fluid displacement backgrounds using CSS radial gradients, canvas perlin noise, or WebGL shaders
Overlays a large centered quote with optional subtitle and metadata
Supports both landscape (1920×1080) and portrait (1080×1920) aspect ratios
Includes four curated color palettes: Solar Peach, Ocean Aqua, Aurora Violet, and Forest Mint
Respects prefers-reduced-motion for accessibility
Runs entirely client-side as a single HTML file with no external image dependencies

How to install frame-liquid-bg-hero

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

Claude Code

Cursor

Windsurf

Cline

How to use frame-liquid-bg-hero

1.Choose your preferred fluid implementation: CSS gradients (recommended for stability), canvas with perlin noise (mid-tier), or WebGL shaders (advanced)
2.Select one of the four color palettes based on your brand or mood
3.Provide your quote or headline (5–7vw font size) and optional subtitle
4.Customize text color (white or dark) based on background brightness; the template uses mix-blend-mode: difference for readability
5.Optionally add a CTA button or metadata row at the bottom
6.Open the HTML file in a browser; it works offline and respects reduced-motion preferences

Use cases

Good for

Create animated hero sections for SaaS landing pages with branded fluid backgrounds
Generate video intro frames with overlaid quotes or taglines
Design poster backgrounds with dynamic fluid effects and text overlays
Build full-screen presentation slides with animated backgrounds and centered messaging

Who it's for

Video producers and motion designers
SaaS and product marketing teams
Web designers building landing pages
Content creators making posters or social media assets

frame-liquid-bg-hero FAQ

Can I use external images or fonts?

No. The template uses only CSS, SVG, and optional inline canvas/WebGL. All fonts must be system or Google Fonts; no external image files are permitted.

Which fluid background method should I choose?

CSS radial gradients (default) are most stable and performant. Canvas with perlin noise offers more organic motion. WebGL shaders are for advanced users and require careful performance testing.

How do I make the text readable over any fluid color?

The template uses mix-blend-mode: difference on the quote text, which ensures contrast regardless of background color. You can also adjust text color to white or dark depending on the palette brightness.

Does this work on mobile?

Yes. The template supports both 16:9 (landscape) and 9:16 (portrait) aspect ratios and respects device motion preferences.

Can I add animations or reduce motion?

All animations respect the prefers-reduced-motion CSS media query. Users with motion sensitivity will see a static version automatically.

Full instructions (SKILL.md)

Source of truth, from nexu-io/open-design.

name: frame-liquid-bg-hero zh_name: "流体背景 Hero 帧" en_name: "Liquid Background Hero" emoji: "🌊" description: "WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters." zh_description: "WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报" en_description: "WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters." category: poster scenario: video aspect_hint: "1920×1080 (16:9) 或 1080×1920 (9:16)" featured: 39 tags: ["liquid", "fluid", "background", "hero", "html-in-canvas", "vfx"] example_id: sample-frame-liquid-bg-hero example_name: "流体背景 Hero · 金句" example_format: markdown example_tagline: "Aurora Violet 流体" example_desc: "多层 radial-gradient 呼吸背景 + difference 文字" example_source_url: "https://hyperframes.heygen.com/catalog" example_source_label: "hyperframes · vfx-liquid-background" od: mode: video surface: video scenario: video upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 design_system: requires: false example_prompt: "Use the Liquid Background Hero template to turn my content into a WebGL-style fluid displacement background with a quote overlay for a video intro, landing hero, or poster. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." example_prompt_i18n: zh-CN: "用「流体背景 Hero 帧」模板把我的内容做成一段「WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"

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

Related skills

More from nexu-io/open-design and the wider catalog.

frame-logo-outro

nexu-io/open-design

Segmented logo assembly with glow bloom and tagline reveal for video outros.

2.4k installsAudited

frame-macos-notification

nexu-io/open-design

Realistic macOS Big Sur notification banner for video overlays and product teasers.

2.4k installs

frontend-design

nexu-io/open-design

Build production-grade frontend interfaces with strong visual direction, polished typography, and working HTML/CSS/JS code.

4.5k installsAudited

frontend-skill

nexu-io/open-design

Create visually strong landing pages and UIs with restrained composition—OpenAI's production frontend playbook.

2.9k installsAudited

frontend-slides

nexu-io/open-design

Generate animation-rich HTML presentations with visual style previews.

2.7k installs

full-output-enforcement

nexu-io/open-design

Enforce complete, unabridged code generation without placeholders or truncation.

1.5k installsAudited