paper texture
A static texture built from multiple noise layers — usable as a realistic paper or cardboard surface, or as an image filter.
Preview
live Click the preview to load a random sample image. Install
npm npm i @devmischief/shaders-svelte Code
import { PaperTexture } from '@devmischief/shaders-svelte';
<PaperTexture
width={1280}
height={720}
colorBack="#ffffff"
colorFront="#9fadbc"
contrast={0.3}
roughness={0.4}
fiber={0.3}
fiberSize={0.2}
crumples={0.3}
crumpleSize={0.35}
folds={0.65}
foldCount={5}
drops={0.2}
fade={0}
seed={6}
scale={0.6}
fit="cover"
/>
Shader Props
14 | name | description | type | values |
|---|
| image | Source image used as the underlying texture. | string | url |
| colorBack | Background paper color. | string | hex / rgb |
| colorFront | Foreground / fiber color. | string | hex / rgb |
| contrast | Contrast between the paper layers. | number | 0 → 1 |
| roughness | Surface roughness applied to the noise field. | number | 0 → 1 |
| fiber | Strength of the fiber pattern. | number | 0 → 1 |
| fiberSize | Size of individual paper fibers. | number | 0 → 1 |
| crumples | Amount of crumple deformation in the surface. | number | 0 → 1 |
| crumpleSize | Size of crumple folds in the texture. | number | 0 → 1 |
| folds | Strength of the larger paper folds. | number | 0 → 1 |
| foldCount | Number of fold creases across the surface. | number | integer |
| drops | Adds water droplet artifacts to the paper. | number | 0 → 1 |
| fade | Fades the texture toward the edges. | number | 0 → 1 |
| fit | How the source image is fit into the canvas. | string | cover · contain |
Common Props
8 | name | description | type | values |
|---|
| scale | Overall zoom level of the graphics. | number | 0.01 → 4 |
| rotation | Overall rotation angle of the graphics. | number | 0 → 360 |
| offsetX | Horizontal offset of the graphics. | number | −1 → 1 |
| offsetY | Vertical offset of the graphics. | number | −1 → 1 |
| originX | Reference point for positioning width in the canvas. | number | 0 → 1 |
| originY | Reference point for positioning height in the canvas. | number | 0 → 1 |
| minPixelRatio | Minimum pixel ratio used when rendering the shader (default 2). | number | — |
| maxPixelCount | Maximum pixel count the shader may process. | number | — |