frame-liquid-bg-hero

【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
```
.

frame-liquid-bg-hero

NPX Install

Tags

SKILL.md Content (Chinese)