Paper design shader Background

Shaders 673

About

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

Code

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

Usage.tsx

import { GradientBackground } from "@/components/ui/paper-design-shader-background";

export default function DemoOne() {
  return (
    <main className= "relative min-h-screen h-full w-full flex items-center justify-center overflow-hidden" >
    <GradientBackground />
    < div className = "absolute inset-0 -z-10 bg-black/20" />

      <section className="px-6" >
        <h1
          className="text-white text-center text-balance font-light tracking-tight text-5xl"
    >
    Backgrounds are awesome :)
  </h1>
    < /section>
    < /main>
  );
}