Paper Texture

Presets

Installation

npm i @paper-design/shaders-react

Code

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

<PaperTexture>
  <div className="demo">
    <style>{`.demo { display: grid; align-content: center; justify-items: start; gap: 40px; height: 100%; padding: 0 8% }
    .demo p { margin: 0; font: 700 120px/1 system-ui; background: linear-gradient(90deg, #4052d6, #9b5de5); background-clip: text; color: transparent }
    .demo button { padding: 32px 64px; border: 0; border-radius: 99px; font: 48px system-ui; color: #fff; background: linear-gradient(135deg, #4052d6, #9b5de5) }
    .demo button:hover { filter: brightness(1.15) }`}</style>
    <p>Select this text</p>
    <button
      onClick={(event) => {
        const clicks = Number(event.currentTarget.dataset.clicks ?? 0) + 1;
        event.currentTarget.dataset.clicks = String(clicks);
        event.currentTarget.textContent = `Clicked ${clicks} time${clicks === 1 ? '' : 's'}`;
      }}
    >
      Hover and click me
    </button>
  </div>
</PaperTexture>

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