Shader Flow

An animated shader-style background with flowing gradient blobs, a subtle noise overlay, and optional cursor-reactive motion for hero sections.

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

import { ShaderFlow } from "@/components/ui/shader-flow";

export default function Default() {
  return (
    <div className="flex w-full min-h-[900px] items-stretch justify-center bg-background">
      <ShaderFlow className="w-full min-h-[900px] rounded-none border-0" />
    </div>
  );
}