Paper Texture

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}
    />
  );
}

import { mountShader, paperTextureFragmentShader } from '@paper-design/shaders';

const canvas = document.getElementById('canvas');
const mount = mountShader(canvas, {
  fragmentShader: paperTextureFragmentShader,
  uniforms: {
    u_image: '/path/to/image.jpg',
    u_colorFront: [0.624, 0.682, 0.737, 1],
    u_colorBack: [1, 1, 1, 1],
    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,
    // Sizing uniforms
    u_fit: 2, // 0=none, 1=contain, 2=cover
    u_scale: 0.6,
    u_rotation: 0,
    u_offsetX: 0,
    u_offsetY: 0,
    u_originX: 0.5,
    u_originY: 0.5,
  },
});

Parameters

Visual Parameters

string | HTMLImageElement

default:"''"

Optional source image to apply the paper texture filter to

string

default:"'#9fadbc'"

Foreground color in hex, rgb, or rgba format

string

default:"'#ffffff'"

Background color in hex, rgb, or rgba format

number

default:"0.3"

Blending behavior controlling sharpness vs smoothness of color transitions

number

default:"0.4"

Pixel noise intensity, related to canvas and not scalable

number

default:"0.3"

Curly-shaped noise intensity for paper fiber simulation

number

default:"0.2"

Scale of the curly-shaped fiber noise pattern

number

default:"0.3"

Cell-based crumple pattern intensity

number

default:"0.35"

Scale of the cell-based crumple pattern

number

default:"0.65"

Depth of the paper folds

number

default:"5"

Number of fold lines in the paper texture

number

default:"0"

Big-scale noise mask applied to the pattern for variation

number

default:"0.2"

Visibility of speckle pattern on the paper surface

number

default:"5.8"

Random seed for folds, crumples, and dots pattern variation

Sizing Parameters

'none' | 'contain' | 'cover'

default:"'cover'"

How to fit the shader into the canvas dimensions

number

default:"0.6"

Overall zoom level of the graphics

number

default:"0"

Overall rotation angle in degrees

number

default:"0"

Horizontal offset of the graphics center

number

default:"0"

Vertical offset of the graphics center

number

default:"0.5"

Horizontal reference point for positioning

number

default:"0.5"

Vertical reference point for positioning

Animation Parameters

number

default:"0"

Animation speed multiplier (0 for static)

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)

Get Started

Shaders

Guides

Features

Basic Usage

Parameters

Visual Parameters

Sizing Parameters

Animation Parameters

Presets

Examples

Cardboard Texture

Abstract Paper

Technical Details

Shader Uniforms (Vanilla JS)

Performance Notes

​Features

​Basic Usage

​Parameters

​Visual Parameters

​Sizing Parameters

​Animation Parameters

​Presets

​Examples

​Cardboard Texture

​Abstract Paper

​Technical Details

​Shader Uniforms (Vanilla JS)

​Performance Notes

Features

Basic Usage

Parameters

Visual Parameters

Sizing Parameters

Animation Parameters

Presets

Examples

Cardboard Texture

Abstract Paper

Technical Details

Shader Uniforms (Vanilla JS)

Performance Notes