A premium liquid hero background powered by raw WebGL shaders, with configurable palette, grain, reveal timing, and flow behavior.
| Prop | Type | Default |
|---|---|---|
titlePrimary headline line. | string | "Fluid Motion" |
subtitleSecondary headline line. | string | "Premium Presence" |
descriptionSupporting hero copy below the title. | string | — |
colorDeepBase dark tone used in the liquid gradient. | string | "#04050b" |
colorMidMid tone for blending transitions. | string | "#134d93" |
colorHighlightHighlight tone for bright accents and glow. | string | "#8cecff" |
speedGlobal animation speed multiplier. | number | 1 |
flowStrengthIntensity of flow distortion and liquid drift. | number | 1 |
grainDither grain amount applied in the shader. | number | 0.05 |
contrastShader contrast applied after color mixing. | number | 1.1 |
opacityOverall alpha of the liquid layer. | number | 0.95 |
revealEnables left-to-right entrance wipe. | boolean | true |
delayMsDelay before animation/reveal begins, in milliseconds. | number | 0 |
revealDurationDuration of the reveal wipe in seconds. | number | 1.2 |
childrenCustom content rendered above the liquid background. | ReactNode | — |
classNameAdditional CSS classes for the root container. | string | — |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
A cinematic liquid field tuned for modern hero sections with polished depth and restrained motion.
import { WebGLLiquid } from "@/components/ui/webgl-liquid"
<WebGLLiquid
title="Fluid Motion"
subtitle="Premium Presence"
/>