Paper Shaders

Overview

Paper Shaders (@paper-design/shaders-react) is a collection of zero-dependency, GPU-accelerated WebGL shader background components for React. It brings studio-grade generative visuals to modern landing pages.

Key Features

• Zero External Dependencies: Pure WebGL implementation without heavy Three.js runtime overhead.
• Fluid Generative Shaders: Mesmerizing fluid waves, mesh noise, liquid ribbons, and glass distortions.
• Next.js & RSC Compatible: Built with 'use client' pragmas for seamless modern framework hydration.
• Configurable Shader Uniforms: Fine-tune colors, speed, noise scale, and mouse interaction via simple props.

Installation & Quick Start

npm install @paper-design/shaders-react

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

export default function HeroBackground() {
  return (
    <div className="relative w-full h-[400px]">
      <FluidShader color1="#3b82f6" color2="#8b5cf6" speed={0.8} />
    </div>
  );
}

Why Choose Paper Shaders?

• Best for: High-impact landing page hero sections, interactive Web3 backdrops, and creative portfolios.
• Not suitable for: Simple text documentation sites with no visual hero area.