Individual skill
frame-liquid-bg-hero
WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.
templates/frame-liquid-bg-hero/SKILL.md
Source commit c414ecc07f795add03807d5d9ce4baefd807cea2
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- Yes
- Repository scan complete
- No
- Skill scan complete
- Yes
- Observed behavior
- Local scripts
- Last checked
- Nov 2, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 4,812
- Repository last updated
- Jun 21, 2026
- License
- Apache-2.0
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- ai-agent Repository topic
- apache-2 Repository topic
- coding-agent Repository topic
- css Repository topic
- ffmpeg Repository topic
- html Repository topic
- mp4 Repository topic
- open-design Repository topic
- open-source Repository topic
- video Repository topic
- liquid Declared skill tag
- fluid Declared skill tag
- background Declared skill tag
- hero Declared skill tag
- html-in-canvas Declared skill tag
- vfx Declared skill tag
- engineering Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 4,111 bytesexample.mddoc · 205 bytespackage.jsonruns · 321 bytessource/index.htmlasset · 3,644 bytestemplate.html-video.yamlasset · 1,932 bytes
Read excerpt
【模板: 流体背景 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** (高阶, 慎用):