Shaders
Click to change sample image

Paper Texture

Installation

npm i @paper-design/shaders-react

Code

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

<PaperTexture
  style={{ height: 500 }}
  colorBack="hsl(0, 0%, 100%)"
  colorFront="hsl(211, 18%, 68%)"
  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="contain"
/>

Props

colorFront, colorBack

Colors used for the effect.

contrast

Mixing front and back colors.

roughness

Pixel noise, related to canvas (not scalable).

fiber

Curly-shaped noise.

fiberScale

Curly-shaped noise scale.

crumples

Cell-based pattern.

crumplesScale

Cell-based pattern scale.

folds

Depth of the folds.

foldsNumber

Number of folds (15 max).

drops

Metaballs-like pattern.

seed

Applied to folds, crumples and dots.

blur

Big-scale noise mask applied to everything but roughness.

fit

How the image fits the canvas.

Description

Mimicking paper texture with a combination of noises.