Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Frame Liquid Bg Hero · nexu-io | DecimalAI

nexu-io/frame-liquid-bg-hero

SkillScore64Maintained

WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报

design-mediaby nexu-io

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/nexu-io-frame-liquid-bg-hero/SKILL.md

decimalai skills pull nexu-io-frame-liquid-bg-hero --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/nexu-io-frame-liquid-bg-hero/SKILL.md https://app.decimal.ai/s/nexu-io-frame-liquid-bg-hero/SKILL.md

Raw file: /s/nexu-io-frame-liquid-bg-hero/SKILL.md ↗ · machine-readable summary at /s/nexu-io-frame-liquid-bg-hero.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 47d ago

Yes — +14% lift · at higher cost+37% tokens0% turns64% of whole cases pass with skill (14/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-05	✗→✓	▲ Improved	51%	0%
case-08	✗→✓	▲ Improved	13%	0%
case-09	✗→✓	▲ Improved	68%	0%
case-17	✗→✓	▲ Improved	145%	0%
case-22	✗→✓	▲ Improved	13%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

nexu-io / html-anything

next/src/lib/templates/skills/frame-liquid-bg-hero/SKILL.md

View on GitHub ↗

License Apache-2.0Imported 8/3/2026Version v1

Skill contents

SKILL.md

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

Illustrative Want to see what nexu-io/frame-liquid-bg-hero would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/12/2026, 00:48 UTC · 22 cases

Lift

+14%

64% vs 50%

Agent turns

0%

1.0 vs 1.0

Tokens

+37%

6,976.73 vs 5,091

fail → pass · 5pass → pass · 9fail → fail · 6pass → fail · 2

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 Create a single-file HTML landing page hero component (1920x1080) with an animated fluid background. It should feature an oceanic liquid aesthetic, a giant main headline 'Seamless Motion for Modern Creators', a subtle subtitle, and a bottom CTA chip. Ensure the animations handle reduced-motion settings gracefully and require no external assets.	fail→fail	29,086	28,132	-3%	1	1	0%	6,212	7,000	+13%	0	0	—
case-02 I am looking for a vertical 1080x1920 animated cover in HTML format. It needs a smooth fluid background in a warm peach tone, a large display title '捕捉时光的流动', a single-line secondary text, and clean readable typography against the dynamic background. Keep everything self-contained in one file that can be double-clicked to open in a browser.	fail→fail	26,644	28,359	+6%	1	1	0%	6,221	7,009	+13%	0	0	—
case-03 Here is raw text from our tech report: 'In 2024, our distributed edge network reached zero-downtime execution for 500 million daily visual renders.' Please synthesize this into a short, impactful gold-style title, and build a 1920x1080 single-file HTML hero frame with a fluid purple aurora visual style and a metadata row at the bottom.	fail→fail	27,977	26,422	-6%	1	1	0%	6,226	7,014	+13%	0	0	—
case-04 Build a green forest themed single-file HTML hero section (1920x1080) with dynamic ambient background motion. Standard bright neon green hex codes like #00ff00 or #00ff88 are preferred by default base designs, but apply the exact standard green palette appropriate for deep fluid forest visuals.	fail→fail	28,403	26,573	-6%	1	1	0%	6,210	6,998	+13%	0	0	—
case-05 Create a CSS multi-layer radial gradient background hero frame with misplaced rotating ambient circles. Developers often use blur values around 20px or 30px for soft shadows, but specify the heavier blurring layer needed to smooth multi-ellipse radial blend edges into soft ambient color fields.	fail→pass	22,387	26,519	+18%	1	1	0%	4,627	6,985	+51%	0	0	—
case-06 Develop an HTML canvas fluid background component driven by simplex or perlin noise calculations. Ensure that when users have requested reduced motion in their system preferences, the animation halts cleanly.	pass→fail	22,590	27,973	+24%	1	1	0%	4,964	6,963	+40%	0	0	—
case-07 Build a lightweight inline WebGL domain-warp fluid background frame on a single quad mesh. Most fragment shaders require multiple complex uniforms for touch and resolution, but structure the time-based motion using the standard minimal uniform identifier.	pass→pass	18,898	26,718	+41%	1	1	0%	4,738	6,973	+47%	0	0	—
case-08 Design a 1080x1920 single-file HTML hero poster with Chinese title '智算未来'. Base models typically pick PingFang SC or Microsoft YaHei as generic fallbacks, but set the explicit display font stack specified for high-impact Chinese display headers.	fail→pass	28,196	27,715	-2%	1	1	0%	6,199	6,987	+13%	0	0	—
case-09 Generate a dark fluid background HTML hero unit. Common practice is pure white #ffffff or light gray #f0f0f0, but assign the specific soft paper white tone designed for high-contrast blend headers.	fail→pass	19,094	28,995	+52%	1	1	0%	4,162	6,972	+68%	0	0	—
case-10 Create a CSS-only radial gradient liquid background hero frame. Base models frequently stack 8 to 10 overlapping color spots to maximize complexity, but keep the radial ellipse count within the recommended range.	pass→pass	17,479	26,801	+53%	1	1	0%	3,940	6,968	+77%	0	0	—
case-11 Configure the keyframe movement timing for a multi-layered CSS ambient fluid hero component. Fast motion loops usually run at 2s to 4s, but set the keyframes cycle length to the relaxed atmospheric range.	fail→fail	19,369	26,547	+37%	1	1	0%	4,282	6,973	+63%	0	0	—
case-12 Construct a complete SaaS landing hero component in a single HTML file. Include background visual depth, decorative textures, and typography without adding any HTTP requests for external PNGs, JPEGs, or WebPs.	pass→pass	26,463	27,148	+3%	1	1	0%	6,182	6,970	+13%	0	0	—
case-13 Assemble a layered CSS fluid background hero frame. Base models often default to mix-blend-mode: multiply or normal blend modes between gradient divs, but apply the recommended vivid overlay blend modes across dynamic background layers.	pass→pass	23,942	25,829	+8%	1	1	0%	5,294	6,971	+32%	0	0	—
case-14 Write a self-contained HTML page with a Canvas JS fluid background renderer. Keep the inline JavaScript implementation concise and lightweight rather than importing large external physics bundles.	fail→fail	31,517	27,102	-14%	1	1	0%	6,172	6,960	+13%	0	0	—
case-15 The client submitted this raw data chunk: 'Quarterly active telemetry nodes grew from 12,000 to 450,000 across 14 geographic zones with 99.999% availability.' Convert this telemetry metric into a prominent Chinese headline for a fluid hero background.	pass→pass	9,625	28,104	+192%	1	1	0%	1,679	6,993	+316%	0	0	—
case-16 Create a Canvas metaball fluid background hero section in HTML. Ensure the page can be saved locally and double-clicked to open in a web browser without requiring a local web server or internet connection for JS scripts.	pass→pass	30,502	29,683	-3%	1	1	0%	6,183	6,971	+13%	0	0	—
case-17 When choosing a tiny WebGL helper library for fragment shader domain-warp fluid visuals in a single-file hero component, select the lightweight library import from jsdelivr CDN.	fail→pass	14,500	28,033	+93%	1	1	0%	2,842	6,964	+145%	0	0	—
case-18 Design a vibrant fluid hero background. Base models tend to combine red, yellow, green, cyan, blue, and magenta in a 6-color spectrum, but restrict the total palette hue count to maintain aesthetic coherence.	pass→pass	27,024	29,057	+8%	1	1	0%	6,185	6,973	+13%	0	0	—
case-19 Create a responsive CSS Flexbox dashboard layout with a collapsible sidebar, a top navigation bar, and a 3-column data card grid. Use standard clean CSS grid and flex rules.	pass→pass	21,962	29,425	+34%	1	1	0%	5,051	6,966	+38%	0	0	—
case-20 Generate a set of 5 clean inline SVG UI icons for a web navigation bar: Home, Settings, User Profile, Bell Notifications, and Search. Output valid SVG code with viewBox attributes.	pass→fail	25,258	24,571	-3%	1	1	0%	6,179	6,967	+13%	0	0	—
case-21 Write an HTML and JavaScript snippet that renders a monthly revenue bar chart using Chart.js on a canvas element with responsive container sizing.	pass→pass	8,959	26,450	+195%	1	1	0%	2,286	6,955	+204%	0	0	—
case-22 Generate a portrait orientation cover image hero frame for a mobile app showcase in HTML. Set the canvas container dimensions to the standard vertical resolution.	fail→pass	28,989	30,676	+6%	1	1	0%	6,168	6,956	+13%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +14 percentage points is the difference between those two pass rates over the 22 comparable cases. 2 cases got worse with the skill loaded, and they are included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 50%
Pass rate with the skill: 63.6%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 2
Skill version measured: v1
Run completed: 8/12/2026, 00:48 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-05

Prompt

Create a CSS multi-layer radial gradient background hero frame with misplaced rotating ambient circles. Developers often use blur values around 20px or 30px for soft shadows, but specify the heavier blurring layer needed to smooth multi-ellipse radial blend edges into soft ambient color fields.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run64

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+51% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 47 days ago

Other measured skills in the registry, with their headline benchmark lift.