Interactive Shader

component renders a dynamic, flowing energy effect using WebGL shaders. I've integrated a sleek UI control panel that allows you to manipulate the shader's parameters in real-time. You can adjust the Hue, Speed, Intensity, and Complexity (noise layers) to customize the visual output.

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

import ShaderComponent from "@/components/ui/interactive-shader";

const settings = {
  hue: 210,
  speed: 0.4,
  intensity: 1.2,
  complexity: 5.0,
};

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