Liquid Gradient

Shaders 87

About

Liquid Gradient component for React.

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

Code

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

Usage.tsx

"use client";

import LiquidGradientCanvas, {
  LIQUID_GRADIENT_PRESETS,
  type LiquidGradientPresetName,
} from "@/components/ui/liquid-gradient";

const settings = {
  preset: "sunset",
  speed: 0.6,
  paused: false,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  const preset =
    LIQUID_GRADIENT_PRESETS[s.preset as LiquidGradientPresetName] ??
    LIQUID_GRADIENT_PRESETS.sunset;

  return (
    <div className="h-screen w-screen">
      <LiquidGradientCanvas {...preset} speed={s.speed} paused={s.paused} />
    </div>
  );
}