Skip to main content
A static texture built from multiple noise layers, usable for realistic paper and cardboard surfaces. Can be used as an image filter or as a standalone texture.

​
Features

  • Multiple noise layers for realistic paper texture
  • Fiber patterns and crumple effects
  • Configurable folds and drops
  • Roughness and grain control
  • Works as an image filter or standalone

​
Basic Usage

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

function App() {
  return (
    <PaperTexture
      image="/path/to/image.jpg"
      colorFront="#9fadbc"
      colorBack="#ffffff"
      contrast={0.3}
      roughness={0.4}
      fiber={0.3}
      fiberSize={0.2}
      crumples={0.3}
      crumpleSize={0.35}
      folds={0.65}
      foldCount={5}
    />
  );
}

​
Parameters

​
Visual Parameters

​
image
string | HTMLImageElement
default:"''"
Optional source image to apply the paper texture filter to
​
colorFront
string
default:"'#9fadbc'"
Foreground color in hex, rgb, or rgba format
​
colorBack
string
default:"'#ffffff'"
Background color in hex, rgb, or rgba format
​
contrast
number
default:"0.3"
Blending behavior controlling sharpness vs smoothness of color transitions
​
roughness
number
default:"0.4"
Pixel noise intensity, related to canvas and not scalable
​
fiber
number
default:"0.3"
Curly-shaped noise intensity for paper fiber simulation
​
fiberSize
number
default:"0.2"
Scale of the curly-shaped fiber noise pattern
​
crumples
number
default:"0.3"
Cell-based crumple pattern intensity
​
crumpleSize
number
default:"0.35"
Scale of the cell-based crumple pattern
​
folds
number
default:"0.65"
Depth of the paper folds
​
foldCount
number
default:"5"
Number of fold lines in the paper texture
​
fade
number
default:"0"
Big-scale noise mask applied to the pattern for variation
​
drops
number
default:"0.2"
Visibility of speckle pattern on the paper surface
​
seed
number
default:"5.8"
Random seed for folds, crumples, and dots pattern variation

​
Sizing Parameters

​
fit
'none' | 'contain' | 'cover'
default:"'cover'"
How to fit the shader into the canvas dimensions
​
scale
number
default:"0.6"
Overall zoom level of the graphics
​
rotation
number
default:"0"
Overall rotation angle in degrees
​
offsetX
number
default:"0"
Horizontal offset of the graphics center
​
offsetY
number
default:"0"
Vertical offset of the graphics center
​
originX
number
default:"0.5"
Horizontal reference point for positioning
​
originY
number
default:"0.5"
Vertical reference point for positioning

​
Animation Parameters

​
speed
number
default:"0"
Animation speed multiplier (0 for static)
​
frame
number
default:"0"
Manual frame control for animation

​
Presets

The PaperTexture shader comes with several built-in presets:
  • Default: Classic paper texture with balanced settings
  • Cardboard: Brown cardboard appearance with fiber texture
  • Abstract: Colorful abstract paper with strong folds
  • Details: High-detail texture for close-up effects
import { PaperTexture, paperTexturePresets } from '@paper-design/shaders-react';

function App() {
  return <PaperTexture {...paperTexturePresets[0].params} />;
}

​
Examples

​
Cardboard Texture

<PaperTexture
  colorFront="#c7b89e"
  colorBack="#999180"
  contrast={0.4}
  fiber={0.35}
  fiberSize={0.14}
  crumples={0.7}
  crumpleSize={0.1}
  folds={0}
  drops={0.1}
/>

​
Abstract Paper

<PaperTexture
  colorFront="#00eeff"
  colorBack="#ff0a81"
  contrast={0.85}
  fiber={0.1}
  folds={1}
  foldCount={3}
  drops={0.2}
  seed={2.2}
/>

​
Technical Details

​
Shader Uniforms (Vanilla JS)

When using the vanilla JavaScript API, colors are passed as RGBA arrays with values from 0 to 1: 
{
  u_colorFront: [r, g, b, a], // e.g., [0.624, 0.682, 0.737, 1]
  u_colorBack: [r, g, b, a],
  u_contrast: 0.3,
  u_roughness: 0.4,
  u_fiber: 0.3,
  u_fiberSize: 0.2,
  u_crumples: 0.3,
  u_crumpleSize: 0.35,
  u_folds: 0.65,
  u_foldCount: 5,
  u_fade: 0,
  u_drops: 0.2,
  u_seed: 5.8,
}

​
Performance Notes

  • This shader is static by default (no animation)
  • Uses multiple noise layers for realistic texture
  • Requires a noise texture (automatically handled in React)
  • Best performance with moderate foldCount values (5-10)