القائمة
WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
استنادا إلى تصنيف SOC المهني
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/nexu-io/open-design --skill frame-liquid-bg-heroيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
Use this plugin when the user wants a high-end luxury real-estate / architecture landing page with cinematic scroll choreography: a typewriter preloader that lifts away, a scroll-driven house image that rises from below and scales up while pinning to a dark statement section, a sticky dark stats band with count-up numbers, and a hover-expand video gallery that slides up over the dark section. Invoke for 'luxury real estate landing page', 'architecture brand site', 'scroll-driven hero with rising building', or when the user references the Velar template.
Bundled OD Next V2 strategy entrypoint for route-locked planning and Build execution.
Prepare required media inputs within an existing OD Next plan. Reuse capability evidence, acquire and measure assets efficiently, and resolve asynchronous jobs without removing required content or weakening quality standards.
| 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 种实现, 按用户偏好选】
radial-gradient(...), 颜色取自调色板。@keyframes 平移 + scale + hue-rotate, 周期 8-14s, 错峰; 整个画面叠 mix-blend-mode: screen 或 overlay。backdrop-filter: blur(80px) 让边缘更糊。requestAnimationFrame 画 metaballs 或 simplex noise field。prefers-reduced-motion 时降回静态截图。regl 或 inline plain WebGL。u_time。【顶层文字层】
Source Serif Pro / Inter Tight / Manrope Black。#fafaf8 或 ink, 取决于背景明暗; 加 mix-blend-mode: difference 让它在任何流体颜色上都可读。【调色 — 4 选 1, 不要彩虹】
#ffb18a + #f78b4c + #d97757, 暖橙桃。#5ac8fa + #0a84ff + #1e3a8a, 海蓝。#a78bfa + #7c5cff + #1e1b4b, 极光紫。#86efac + #34d399 + #065f46, 苔森林。【设计细节】
Noto Serif SC (display) / Noto Sans SC (副标)。prefers-reduced-motion 关动效。