DocsWebGL Liquid

WebGL Liquid

A premium liquid hero background powered by raw WebGL shaders, with configurable palette, grain, reveal timing, and flow behavior.

Installation

pnpm dlx shadcn@latest add @componentry/webgl-liquid

Usage

import { WebGLLiquid } from "@/components/ui/webgl-liquid"

<WebGLLiquid
  title="Fluid Motion"
  subtitle="Premium Presence"
/>

API Reference

PropTypeDefault
titlestring

Primary headline line.

"Fluid Motion"
subtitlestring

Secondary headline line.

"Premium Presence"
descriptionstring

Supporting hero copy below the title.

—
colorDeepstring

Base dark tone used in the liquid gradient.

"#04050b"
colorMidstring

Mid tone for blending transitions.

"#134d93"
colorHighlightstring

Highlight tone for bright accents and glow.

"#8cecff"
speednumber

Global animation speed multiplier.

1
flowStrengthnumber

Intensity of flow distortion and liquid drift.

1
grainnumber

Dither grain amount applied in the shader.

0.05
contrastnumber

Shader contrast applied after color mixing.

1.1
opacitynumber

Overall alpha of the liquid layer.

0.95
revealboolean

Enables left-to-right entrance wipe.

true
delayMsnumber

Delay before animation/reveal begins, in milliseconds.

0
revealDurationnumber

Duration of the reveal wipe in seconds.

1.2
childrenReactNode

Custom content rendered above the liquid background.

—
classNamestring

Additional CSS classes for the root container.

—

Working with this component

Building a hero

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.

Reveal timing

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.

Graphics support

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

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
PreviousSpectral RibbonNextDither Gradient

Fluid Motion

Premium Presence

A cinematic liquid field tuned for modern hero sections with polished depth and restrained motion.