Background Gradient Shader

A full-bleed animated WebGL gradient background that drifts theme-derived colors through a slow noise-based flow field, used behind hero sections or page content as an ambient moving backdrop.

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

import BackgroundGradientShader from "@/components/ui/background-gradient-shader";

export default function BackgroundGradientShaderDemo() {
  return (
    <div className="relative h-screen w-full overflow-hidden">
      <BackgroundGradientShader className="absolute inset-0 h-full w-full" />
    </div>
  );
}