FluidGradient

A slow, GPU-rendered gradient texture for landing page backgrounds. It pauses off-screen and renders a still frame when reduced motion is preferred.

import { FluidGradient } from '@lobehub/ui/awesome';

Landing

Default

FluidGradient fills its nearest positioned ancestor. Place it behind a positioned band when you want a landing texture.

Loading preview

Loading preview

FluidGradient properties

colors

LandingPalette

Three color stops blended by the shader. Defaults to the landing palette for the current theme.

intensity

number

Peak opacity of the texture, from 0 to 1.

Defaults to 0.45.

speed

number

Animation speed multiplier. The texture renders a still frame when reduced motion is preferred.

Defaults to 1.

Also accepts all native HTML and ARIA attributes.