Skip to content
cccskills
FreePublished on GitHubEnglish overview

frame-liquid-bg-hero

Create a single HTML file with a flowing, animated background and a prominent quote or headline. Use it for a video intro, a landing page's main visual, or a poster, with landscape and portrait layouts available.

OriginalShow the original description

WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.

nexu-io/open-design
AI rating90/ 100See how to install

Good for

  • Creating a video intro with a short message
  • Designing a landing page's main visual
  • Making a poster with a flowing background

Overview

What it does

Create a visual with a large quotation or title over a background of flowing, shifting colors. The output is a single HTML file for a video opening, the top of a landing page, or a poster background. Choose either a landscape canvas at 1920×1080 or a portrait canvas at 1080×1920. A subtitle and a short call to action can also be included.

When it helps

Use it when a short message should be the main focus of the screen. Choose from four color families: warm tones, blue, purple, or green. The visual uses your supplied words or title. When the input is data, the approach is to condense it into a message of no more than 18 characters.

Example requests

  • “Use this title to create a landscape video opening with a purple fluid background.”
  • “Create portrait HTML for a poster with this message over the background.”

Notes

The background is drawn with CSS, canvas, or WebGL, without external images. CSS gradients are the default implementation. The WebGL version can use regl from a CDN or a direct WebGL implementation. It respects prefers-reduced-motion by stopping animation or switching to a still image.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Objective evaluation

AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.

Clear instructionsIs it clear when to use it and what it does?
AGoodThe material explicitly describes fluid backgrounds with text for video openings, landing page heroes, and posters.
Concrete stepsAre steps, inputs, outputs, and examples spelled out?
AGoodThe material specifies canvas sizes, three rendering methods, palettes, text placement, and single-file HTML output.
SafetyAre sending data, deleting files, and running commands disclosed?
BPartly lackingThe WebGL option loads regl from a CDN, but no external script verification procedure is provided.
Easy setupDoes it need few tools or API keys, and are they documented?
AGoodThe default is a single-file CSS implementation, and the material also explains how to load regl for the WebGL option.

The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Tell us which point is wrong and why. No login needed. We will check it against the SKILL.md, redo the evaluation, and show the result here.

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

Files included (3)

  • SKILL.md4.0 KB
  • example.html3.6 KB
  • example.md205 B

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

8-bit-orbit-video-template

FreeSummaryAI rating 90

Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.

  • Create a retro pixel presentation video
  • Customize a three-scene video template
  • Preview scene transitions and motion in HTML
nexu-io/open-design103.4KUpdated Oct 22, 2026

ad-creative

FreeSummaryAI rating 80

Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.

  • Drafting headlines for paid social ads
  • Creating descriptions for search ads
  • Revising the main text of an ad
nexu-io/open-design103.4KUpdated Oct 22, 2026

after-hours-editorial-template

FreeSummaryAI rating 80

Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.

  • Creating a fashion-inspired motion presentation
  • Presenting a short story across three pages
  • Applying existing brand rules to a dark editorial sequence
nexu-io/open-design103.4KUpdated Oct 22, 2026

agent-browser

FreeSummaryAI rating 100

Inspect and test web pages through a browser automation command-line tool. Navigate, click, enter text, capture screenshots, and extract page details, with a focus on checking local OpenDesign previews and reviewing web app quality.

  • Checking local OpenDesign previews
  • Testing clicks and text entry in web apps
  • Capturing page or element screenshots
nexu-io/open-design103.4KUpdated Oct 22, 2026

ai-music-album

FreeSummaryAI rating 80

Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.

  • Planning an experimental independent album
  • Drafting lyrics around an album concept
  • Deciding the running order of tracks
nexu-io/open-design103.4KUpdated Oct 22, 2026

algorithmic-art

FreeSummaryAI rating 80

Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.

  • Posters generated with programmed rules
  • Still images that suggest motion
  • Studies of artistic frame composition
nexu-io/open-design103.4KUpdated Oct 22, 2026

See all skills by nexu-io

Report a problem with this skill