Paper Texture

Presets

Click to change the sample image

Installation

npm i @paper-design/shaders-react

Code

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

<PaperTexture
  width={1280}
  height={720}
  image="https://paper.design/flowers.webp"
  colorBack="#d3d2ab"
  colorPaper="#ffffffb5"
  colorShadow="#b3b3b3"
  seed={234}
  angle={300}
  roughness={0.4}
  roughnessSize={0.25}
  roughnessRows={0}
  fiber={0.4}
  fiberSize={0.5}
  crumples={0}
  crumpleCount={6}
  wrinkles={1}
  wrinkleSize={0.65}
  folds={0}
  foldSizeX={0.6}
  foldOffsetX={0}
  foldSizeY={0.44}
  foldOffsetY={0}
  drops={1}
  blending={1}
  distortion={0.75}
  clip={false}
  scale={0.9}
  fit="contain"
/>

Shader Props

Name	Description	Type	Values
image	The image to use for the effect	`HTMLImageElement \| string`	Image object or URL
colorBack	The color of the bottom layer, behind the sheet; visible where clip cuts the sheet away	`string`	Hex, RGB, or HSL color
colorPaper	The color of the paper sheet, usually light; multiplied into the image by blending	`string`	Hex, RGB, or HSL color
colorShadow	The color used for crumples, folds, grain and speckles, blends into the image	`string`	Hex, RGB, or HSL color
blending	Amount of image-to-paper blending (0 = original image color, 1 = image multiplied with the paper), needs image	`number`	0 to 1
distortion	How much the image bends with the paper surface; negative values bend it the opposite direction (needs image)	`number`	-1 to 1
clip	Cuts the paper sheet to the distorted image frame, revealing colorBack outside it (needs image)	`boolean`	—
roughness	Grain noise, sized independently of scaling, with its level of detail depending on the scale	`number`	0 to 1
roughnessSize	Scale of the roughness noise (needs roughness > 0)	`number`	0 to 1
roughnessRows	Lines the grain up into horizontal rows: 0 = even scatter, 1 = laid-paper rows (needs roughness > 0)	`number`	0 to 1
fiber	Curly fiber noise, simulating the real paper	`number`	0 to 1
fiberSize	Scale of the fiber noise (needs fiber > 0)	`number`	0 to 1
crumples	Depth of the centered, irregular field of facets across the sheet	`number`	0 to 1
crumpleCount	Number of crumples (15 max), needs crumples > 0	`number`	2 to 15 (integer)
wrinkles	Depth of a field of fine facets, independent of the crumples	`number`	0 to 1
wrinkleSize	Size of the fine facets (needs wrinkles > 0)	`number`	0 to 1
folds	Depth of the straight folds, alternating between ridges and valleys	`number`	0 to 1
foldSizeX	Size of the vertical folds (needs folds > 0)	`number`	0 to 1
foldSizeY	Size of the horizontal folds (needs folds > 0)	`number`	0 to 1
foldOffsetX	Shifts the vertical folds across the surface (needs folds > 0)	`number`	0 to 1
foldOffsetY	Shifts the horizontal folds across the surface (needs folds > 0)	`number`	0 to 1
angle	Direction the surface is lit from, clockwise from the top of the canvas, needs crumples, folds or wrinkles > 0	`number`	0 to 360
drops	Visibility of the speckle pattern	`number`	0 to 1
seed	Seed applied to every pattern	`number`	0 to 1000

Common Props

Name	Description	Type	Values
scale	Overall zoom level of the graphics	`number`	0.1 to 4
rotation	Overall rotation angle of the graphics	`number`	0 to 360
offsetX	Horizontal offset of the graphics center	`number`	-1 to 1
offsetY	Vertical offset of the graphics center	`number`	-1 to 1
width	CSS width style of the shader element	`number \| string`	—
height	CSS height style of the shader element	`number \| string`	—
fit	How to fit the rendered shader into the canvas dimensions	`enum`	\| `"contain"` \| `"cover"`
originX	Reference point for positioning world width in the canvas	`number`	0 to 1
originY	Reference point for positioning world height in the canvas	`number`	0 to 1
minPixelRatio	Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)	`number`	—
maxPixelCount	Maximum pixel count that the shader may process	`number`	—

Description

Static paper-like texture built from a combination of grain, noise and multiple fold patterns. Works as an image filter or as a standalone texture.