Shader Background

Heroes 4

About

A full-screen canvas shader background component with switchable variants like mesh gradient, grain, warp, waves and voronoi, driven by a single typed variant prop.

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

Code

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

Usage.tsx

import { ShaderBackground } from "@/components/ui/shader-background";

export default function ShaderBackgroundDemo() {
  return (
    <div className="relative h-screen w-full">
      <ShaderBackground
        variant="mesh-gradient"
        colors={["#5b21b6", "#db2777", "#0ea5e9", "#f59e0b"]}
        speed={0.3}
      />
    </div>
  );
}