Liquid Crystal

t renders a dynamic, noise-based visual with a "warp" effect that reacts to your mouse movements. You can control parameters like hue, speed, noise intensity, and the warp amount in real-time using the sliders. This combines the procedural generation seen in the first example with the mouse interaction from the third.

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

import { InteractiveShader } from "@/components/ui/liquid-crystal";

const settings = {
  hue: 180,
  speed: 1,
  noise: 0.5,
  warp: 0.1,
  zoom: 2,
  brightness: 1,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen relative overflow-hidden">
      <InteractiveShader {...s} />
    </div>
  );
}