SHADERS & WEBGL

Waves OKLab Liquid Shader

An interactive, organic wave field shader background featuring perceptual OKLab color transitions, 5-tap blur, film grain, and dynamic pointer displacement effects (push, directional distortion, swirl, and ripple).

#shaders#webgl#canvas#typescript

Source on GitHub

components/flourish/waves-shaders-homlu-ui.tsx

LIVE PREVIEWOpen in new tab

Next.js 16 • React 19 • TypeScript•Tailwind CSS v4

Registry Slug:waves-shaders-homlu-ui

QUICKSTART

Make it yours.

Install the source, then customize it in your project.

REGISTRY ITEM

PACKAGE MANAGER

pnpm dlx shadcn@latest add https://flourish-ui.vercel.app/r/waves-shaders-homlu-ui.json

Adds source to components/flourish/

02Usage example Next.js / React

import { ShaderBackground } from "@/components/flourish/waves-shaders-homlu-ui"

export default function Page() {
  return <div className="h-96"><ShaderBackground /></div>
}

First install? Run pnpm dlx shadcn@latest init once, then add this component. You get editable source code in your project.

EXPLORE MORE

More in Shaders & WebGL

Browse Shaders & WebGL

Admit One 3D Holographic Ticket

A high-fidelity 3D holographic foil admission ticket featuring procedural WebGL shaders, Bayer matrix dithering, simplex noise foil, interactive physical mouse tilt, and realistic specular glare.

Cold Flame Drift Risograph

A tactile, generative field of grainy, hand-printed risograph flames sliding along a diagonal. Features noise-bent flow rows, dual-ink stippled grain, drifting dash marks, and dynamic pointer interaction (hover curl, speed boost, and click flare shockwaves).

Prismatic Liquid Shader

An interactive, hyper-fluid WebGL liquid wave shader featuring perceptual OKLab color transitions, velocity-driven cursor ripples and vortex distortion, 6 curated spectral presets, and hydrodynamic turbulence controls.