Paper Shader
A full-viewport Three.js WebGL overlay that renders an animated paper texture with warm window-light and subtle fibers using a custom GLSL fragment shader.
PaperShader mounts a THREE.WebGLRenderer canvas as a fixed inset-0 overlay (z-index 10, mix-blend-mode: multiply) so it sits on top of all page content without blocking pointer events. The fragment shader simulates paper grain via fractional Brownian motion noise, adds warm window-light falloff from the top-right quadrant, animates subtle light flicker, and applies a soft vignette. The canvas automatically resizes with the viewport.
SSR note: This component is
"use client"and imports three.js, which is browser-only. Do not import it in server components or static MDX pages — usenext/dynamicwith{ ssr: false }.
Installation
npx shadcn@latest add @adv/paper-shaderUsage
import dynamic from 'next/dynamic';
const PaperShader = dynamic(() => import('@/components/paper-shader'), {
ssr: false,
});
// In a client layout — renders as a fixed, full-viewport overlay
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<PaperShader />
</body>
</html>
);
}Example
PaperShader — full-viewport WebGL paper texture overlay.
Renders as a fixed overlay in production.
The preview above shows a CSS approximation of the paper-grain texture. The real component renders as a
fixed inset-0WebGL overlay and is not suited for inline demo containment.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | "" | Additional CSS classes appended to the container div. Note: the container is already fixed inset-0 w-screen h-screen. |