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