Docs·WebGL 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

PropertyTypeDefault
title

Primary headline line.

string"Fluid Motion"
subtitle

Secondary headline line.

string"Premium Presence"
description

Supporting hero copy below the title.

string—
colorDeep

Base dark tone used in the liquid gradient.

string"#04050b"
colorMid

Mid tone for blending transitions.

string"#134d93"
colorHighlight

Highlight tone for bright accents and glow.

string"#8cecff"
speed

Global animation speed multiplier.

number1
flowStrength

Intensity of flow distortion and liquid drift.

number1
grain

Dither grain amount applied in the shader.

number0.05
contrast

Shader contrast applied after color mixing.

number1.1
opacity

Overall alpha of the liquid layer.

number0.95
reveal

Enables left-to-right entrance wipe.

booleantrue
delayMs

Delay before animation/reveal begins, in milliseconds.

number0
revealDuration

Duration of the reveal wipe in seconds.

number1.2
children

Custom content rendered above the liquid background.

ReactNode—
className

Additional CSS classes for the root container.

string—

View source

Click the icon in the preview panel to browse source for each variant.

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

Fluid Motion

Premium Presence

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