dark paper shader in react
dark-paper-shader-bg.tsxTSX

dark-paper-shader-bg.tsx

import { MeshGradient } from '@paper-design/shaders-react';

const DARK_GRADIENT_COLORS = ['#000000', '#0d0d0d', '#1a1a1a', '#262626'];

/**
 * Renders a fixed, full-screen mesh gradient using dark colors only.
 * 
 * Example usage (mount this in your root layout):
 * <DarkPaperShaderBG />
 */
export default function DarkPaperShaderBG({ style = {}, ...props }) {
  return (
    <MeshGradient
      colors={DARK_GRADIENT_COLORS}
      distortion={0.6}
      speed={0.15}
      style={{
        position: 'fixed',
        inset: 0,
        width: '100vw',
        height: '100vh',
        zIndex: -1,
        ...style,
      }}
      swirl={0.6}
      {...props}
    />
  );
}
Updated: 8/19/2025