Great UI Liquid Dissolve Shader

Shaders 27

About

A fullscreen WebGL page transition that melts the viewport away using organic fractal noise dissolve 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 Dissolve Shader to your project and fits it to your theme.

Code

How Great UI Liquid Dissolve 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-dissolve-shader"

function DissolveControl() {
  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 Dissolve</p><p className="mt-1 text-xs text-neutral-400 dark:text-neutral-500">Organic fractal noise dissolve transition.</p></div><button onClick={() => { setShaderMode("liquid"); 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 Dissolve</button></div>
}

export default function LiquidDissolveShaderPreview() {
  return <WebglTransitionProvider><DissolveControl /></WebglTransitionProvider>
}