Background Paper Shaders

Shaders 2.4K

About

Background Paper Shade with grey shaders

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

Code

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

Usage.tsx

"use client";

import { Canvas } from "@react-three/fiber";
import ShaderPlane, {
  EnergyRing,
} from "@/components/ui/background-paper-shaders";

const settings = {
  color1: "#ff5722",
  color2: "#ffffff",
  radius: 1.4,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };

  return (
    <div className="h-screen w-screen bg-black">
      <Canvas camera={{ position: [0, 0, 1.6], fov: 75 }}>
        <group scale={2}>
          <ShaderPlane
            position={[0, 0, 0]}
            color1={s.color1}
            color2={s.color2}
          />
          <EnergyRing position={[0, 0, 0.1]} radius={s.radius} />
        </group>
      </Canvas>
    </div>
  );
}