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="#ffffff"
  colorShadow="#cccccc"
  blending={1}
  distortion={0.75}
  clip={false}
  angle={300}
  seed={4}
  roughness={0.4}
  roughnessSize={0.5}
  roughnessRows={0}
  fiber={0.4}
  fiberSize={0.5}
  folds={0.5}
  foldSizeX={1}
  foldSizeY={1}
  foldOffsetX={0}
  foldOffsetY={0}
  wrinkles={1}
  wrinkleSize={0.65}
  crumples={0}
  crumpleCount={6}
  drops={0.4}
  scale={0.9}
  fit="contain"
/>

Shader Props

Name	Description	Type	Values
image	The image over the paper texture; it can be blended into the texture and bend by it	`HTMLImageElement \| string`	Image object or URL
colorBack	The color behind the paper sheet, visible where clip cuts the image away, or through a semi-transparent colorPaper or colorShadow	`string`	Hex, RGB, or HSL color
colorPaper	The color of the paper sheet, can be blended into the image	`string`	Hex, RGB, or HSL color
colorShadow	The color of the patterns (grain, fiber, crumples, wrinkles and folds) over the paper sheet, can be blended 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 pattern), needs image	`number`	0 to 1
distortion	How much the image bends with the paper surface; negative values bend it the opposite way (needs image)	`number`	-1 to 1
clip	Cuts the paper sheet to the image frame (needs image)	`boolean`	—
angle	Direction the surface is lit from, clockwise from the top of the canvas; it also sets the direction of the roughness rows (needs crumples, wrinkles, folds, roughnessRows or drops > 0)	`number`	0 to 360
seed	Seed applied to every pattern: crumples, wrinkles, folds, roughness, fiber and drops	`number`	0 to 1000
roughness	Fine grain covering the surface evenly	`number`	0 to 1
roughnessSize	Scale of the roughness grain (needs roughness > 0)	`number`	0 to 1
roughnessRows	Lines the roughness pattern up into stripes: 0 = even scatter, 1 = laid-paper rows; the rows run across the direction set by angle (needs roughness > 0)	`number`	0 to 1
fiber	Curly thread-like noise covering the surface evenly	`number`	0 to 1
fiberSize	Scale of the fiber noise (needs fiber > 0)	`number`	0 to 1
folds	Straight vertical and horizontal fold lines producing ridges and valleys, depending on the angle value	`number`	0 to 1
foldSizeX	Size of the vertical folds; higher values give fewer and wider folds (needs folds > 0)	`number`	0 to 1
foldSizeY	Size of the horizontal folds; higher values give fewer and wider 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
wrinkles	A pattern of facets covering the surface evenly; the wrinkle lines visually resemble the crumple lines, but they repeat across the surface instead of being counted; wrinkles are shaped by a combination of seed and angle values	`number`	0 to 1
wrinkleSize	Scale of the wrinkle facets (needs wrinkles > 0)	`number`	0 to 1
crumples	A set of irregular folding lines, shaped by a combination of seed and angle values	`number`	0 to 1
crumpleCount	Number of facets in the crumple field (needs crumples > 0)	`number`	2 to 15 (integer)
drops	Visibility of the speckle pattern; unlike the other patterns it darkens the image rather than adding a shape colored by colorShadow	`number`	0 to 1

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 texture built from a combination of grains, noises and fold patterns; works as an image filter or as a standalone texture