Paper Texture
Click to change the sample image
Installation
npm i @paper-design/shaders-react
Code
import { PaperTexture } from '@paper-design/shaders-react';
<PaperTexture
height={500}
colorBack="#ffffff"
colorFront="#9fadbc"
contrast={0.3}
roughness={0.4}
fiber={0.3}
fiberScale={1}
crumples={0.3}
crumplesScale={0.6}
folds={0.65}
foldsNumber={5}
blur={0}
drops={0.2}
seed={5.8}
scale={0.6}
fit="cover"
/>
Props
| Name | Description | Type | Values |
|---|---|---|---|
| colorBack | Background color | string | Hex, RGB, or HSL color |
| colorFront | The foreground color | string | Hex, RGB, or HSL color |
| contrast | Blending behavior (sharper vs. smoother color transitions) | number | 0 to 1 |
| roughness | Pixel noise, related to canvas (not scalable) | number | 0 to 1 |
| fiber | Curly-shaped noise | number | 0 to 1 |
| fiberScale | Curly-shaped noise scale | number | 0.1 to 2 |
| crumples | Cell-based crumples pattern | number | 0 to 1 |
| crumplesScale | Cell-based crumples pattern scale | number | 0.3 to 3 |
| folds | Depth of the folds | number | 0 to 1 |
| foldsNumber | Number of folds (15 max) | number | 1 to 15 (integer) |
| blur | Big-scale noise mask applied to everything but roughness | number | 0 to 1 |
| drops | The visibility of speckle pattern | number | 0 to 1 |
| seed | Seed applied to folds, crumples and dots | number | 0 to 1000 |
| width | CSS width style of the shader element | number | string | — |
| height | CSS height style of the shader element | number | string | — |
| scale | Overall zoom level of the graphics | number | 0.5 to 10 |
| fit | How the image fits the canvas | enum | | "contain" | "cover" |
Description
A static texture built from multiple noise layers, usable for a realistic paper and cardboard surfaces or generating abstract patterns. Can be used as a image filter or as a texture.