frame-liquid-bg-hero

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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

【Template: Fluid Background Hero】【Purpose】Can be used as a video opening frame, SaaS landing page top hero, or poster background. It features a WebGL-like fluid effect, but falls back to CSS/canvas rendering to ensure it can be opened by double-clicking a single file. Inspired by hyperframes vfx-liquid-background.

【Canvas】1920×1080 (landscape) or 1080×1920 (portrait), choose one. The background fills the entire screen.

【Fluid Background — 3 Implementations, Choose Based on Preference】

CSS Multi-layer radial-gradient Offset Breathing (most stable, recommended by default):
- 3-5 large ellipses using
```
radial-gradient(...)
```
  , colors selected from the color palette.
- Each ellipse is wrapped in
```
@keyframes
```
  for translation + scale + hue-rotate, with a cycle of 8-14s, staggered timing; the entire frame is overlaid with
```
mix-blend-mode: screen
```
  or
```
overlay
```
  .
- Add a top layer with
```
backdrop-filter: blur(80px)
```
  to blur the edges further.
Canvas + simple perlin noise (intermediate level):
- 80 lines of inline JS, using
```
requestAnimationFrame
```
  to draw metaballs or simplex noise fields.
- Enable when performance allows; fall back to static screenshots when
```
prefers-reduced-motion
```
  is detected.
WebGL fragment shader (advanced level, use with caution):
- Import
```
regl
```
  via jsdelivr CDN or use inline plain WebGL.
- Write domain-warp noise in the shader; use a single quad and one uniform
```
u_time
```
  .

【Top Text Layer】

Centered or bottom-left: a large inspirational quote (5-7vw, serif or bold sans), fonts:
```
Source Serif Pro
```
/
```
Inter Tight
```
/
```
Manrope Black
```
.
Text color uses paper white
```
#fafaf8
```
or ink color, depending on background brightness; add
```
mix-blend-mode: difference
```
to ensure readability against any fluid background color.
One line of subtitle (small sans, opacity 0.7).
Optional CTA chip or hairline + metadata row at the bottom.

【Color Palette — 4 Options, No Rainbow Colors】

🌅 Solar Peach —
```
#ffb18a
```
+
```
#f78b4c
```
+
```
#d97757
```
, warm orange-peach tones.
🌊 Ocean Aqua —
```
#5ac8fa
```
+
```
#0a84ff
```
+
```
#1e3a8a
```
, ocean blue tones.
🌌 Aurora Violet —
```
#a78bfa
```
+
```
#7c5cff
```
+
```
#1e1b4b
```
, aurora violet tones.
🌿 Forest Mint —
```
#86efac
```
+
```
#34d399
```
+
```
#065f46
```
, mossy forest tones.

【Design Details】

Strictly prohibited: multi-color rainbows (>4 hues), PowerPoint-style gradients, neon fluorescent overlays.
Fonts: For Chinese, use
```
Noto Serif SC
```
(display) /
```
Noto Sans SC
```
(subtitle).
External linked images are strictly prohibited; use only CSS + SVG + optional canvas.
Must use the inspirational quote/title provided by the user; if the user input is data → extract an inspirational quote of ≤ 18 characters.
Single-file HTML, with animations that can be disabled via
```
prefers-reduced-motion
```
.