A premium liquid hero background powered by raw WebGL shaders, with configurable palette, grain, reveal timing, and flow behavior.
pnpm dlx shadcn@latest add @componentry/webgl-liquidimport { WebGLLiquid } from "@/components/ui/webgl-liquid"
<WebGLLiquid
title="Fluid Motion"
subtitle="Premium Presence"
/>| Prop | Type | Default |
|---|---|---|
title | stringPrimary headline line. | "Fluid Motion" |
subtitle | stringSecondary headline line. | "Premium Presence" |
description | stringSupporting hero copy below the title. | — |
colorDeep | stringBase dark tone used in the liquid gradient. | "#04050b" |
colorMid | stringMid tone for blending transitions. | "#134d93" |
colorHighlight | stringHighlight tone for bright accents and glow. | "#8cecff" |
speed | numberGlobal animation speed multiplier. | 1 |
flowStrength | numberIntensity of flow distortion and liquid drift. | 1 |
grain | numberDither grain amount applied in the shader. | 0.05 |
contrast | numberShader contrast applied after color mixing. | 1.1 |
opacity | numberOverall alpha of the liquid layer. | 0.95 |
reveal | booleanEnables left-to-right entrance wipe. | true |
delayMs | numberDelay before animation/reveal begins, in milliseconds. | 0 |
revealDuration | numberDuration of the reveal wipe in seconds. | 1.2 |
children | ReactNodeCustom content rendered above the liquid background. | — |
className | stringAdditional CSS classes for the root container. | — |
Use colorDeep, colorMid, and colorHighlight to set the palette, then tune speed and flowStrength for movement. Check the foreground text against both the darkest and brightest frames.
delayMs is measured in milliseconds, while revealDuration is measured in seconds. Disable reveal when the section should appear immediately instead of waiting for an entrance.
This component renders a WebGL canvas and has a fallback for WebGL initialization failure. Test the page on the devices you support; stacking several animated canvases can change performance.
Keep in mind
Need a custom component?
I build bespoke UI components & websites tailored to your brand.
A cinematic liquid field tuned for modern hero sections with polished depth and restrained motion.