Great UI Liquid Ripple Shader

Shaders 31

About

A fullscreen WebGL page transition that animates a fluid concentric ripple wave expanding from the center of the viewport during route changes.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Great UI Liquid Ripple Shader to your project and fits it to your theme.

Code

How Great UI Liquid Ripple Shader is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { WebglTransitionProvider, useWebglTransition } from "@/components/ui/great-ui-liquid-ripple-shader"

function RippleControl() {
  const { setShaderMode, triggerTransition } = useWebglTransition()
  return <div className="flex flex-col items-center justify-center gap-6 p-10 select-none"><div className="text-center"><p className="text-sm font-semibold tracking-wide text-neutral-500 dark:text-neutral-400">Liquid Ripple</p><p className="mt-1 text-xs text-neutral-400 dark:text-neutral-500">Fluid concentric ripple wave transition.</p></div><button onClick={() => { setShaderMode("ripple"); triggerTransition() }} className="cursor-pointer rounded-xl bg-neutral-950 px-5 py-2.5 text-xs font-bold text-white shadow-md transition-all hover:bg-neutral-800 active:scale-95 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-100">Trigger Ripple</button></div>
}

export default function LiquidRippleShaderPreview() {
  return <WebglTransitionProvider><RippleControl /></WebglTransitionProvider>
}