SHADERS & WEBGL

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.

#shaders#webgl#oklab#fluids#interactive#typescript

Source on GitHub

components/flourish/prismatic-liquid-shader.tsx

LIVE PREVIEWOpen in new tab

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

Registry Slug:prismatic-liquid-shader

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/prismatic-liquid-shader.json

Adds source to components/flourish/

01Dependencies 2 packages

framer-motionlucide-react

02Usage example Next.js / React

import { PrismaticLiquidShader } from "@/components/flourish/prismatic-liquid-shader"

export default function Page() {
  return <PrismaticLiquidShader />
}

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).

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).