Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/paper-design/shaders/llms.txt

Use this file to discover all available pages before exploring further.

A static texture built from multiple noise layers — fiber noise, cell-based crumples, fold distortion, roughness, and speckle drops — composited with a directional light model to produce a convincing paper or cardboard surface. Can be used as a standalone texture or as an image filter over an uploaded photo.

​
Usage

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

export default function Example() {
  return (
    <PaperTexture
      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}
      fade={0}
      drops={0.2}
      seed={5.8}
      style={{ width: '100%', height: '100%' }}
    />
  );
}

​
Props

​
colorFront
string
default:"#9fadbc"
Foreground (highlight/lit surface) color.
​
colorBack
string
default:"#ffffff"
Background (shadow/unlit surface) color.
​
image
string | HTMLImageElement
Optional source image to apply the paper texture over as a filter.
​
contrast
number
default:"0.3"
Blending behavior controlling the sharpness of the light/shadow transitions. Range: 0 to 1.
​
roughness
number
default:"0.4"
Pixel-level noise intensity. Related to canvas pixels and not scalable. Range: 0 to 1.
​
fiber
number
default:"0.3"
Intensity of the curly fiber noise layer. Range: 0 to 1.
​
fiberSize
number
default:"0.2"
Scale of the fiber noise. Smaller values produce finer fibers. Range: 0 to 1.
​
crumples
number
default:"0.3"
Intensity of the cell-based crumple pattern. Range: 0 to 1.
​
crumpleSize
number
default:"0.35"
Scale of the crumple pattern cells. Range: 0 to 1.
​
folds
number
default:"0.65"
Depth of the fold/crease deformation. Range: 0 to 1.
​
foldCount
number
default:"5"
Number of folds applied to the surface. Range: 1 to 15.
​
fade
number
default:"0"
Big-scale noise mask applied to the texture. Higher values fade the pattern toward the edges. Range: 0 to 1.
​
drops
number
default:"0.2"
Visibility of speckle/water-drop pattern. Range: 0 to 1.
​
seed
number
default:"5.8"
Seed applied to folds, crumples, and drops. Changing this value produces a different surface configuration. Range: 0 to 1000.
​
speed
number
default:"0"
Animation speed. Paper texture is static by default (speed: 0).
​
frame
number
default:"0"
Static frame position when speed is 0.

​
Presets

NameDescription
DefaultRealistic blue-grey paper with balanced texture
CardboardBrown cardboard with strong fiber and crumples
AbstractHigh-contrast abstract surface in cyan and magenta
DetailsMaximum detail mode with transparent colors for use as an overlay

​
Sizing

This shader uses ShaderSizingParams. See Sizing and fit for fit, scale, rotation, offsetX, offsetY, originX, originY, worldWidth, and worldHeight props.