Paper Texture

Select this text

Paper logoPaper icon

Installation

npm i @paper-design/shaders-react

Code

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

<PaperTexture
  colorBack="#ffffff"
  colorShadow="#bfbfbf"
  distortion={0.21}
  angle={360}
  roughness={1}
  roughnessRows={1}
  fiber={1}
  fiberSize={0.72}
  folds={1}
  foldSizeX={0.52}
  foldOffsetY={1}
  crumpleCount={2}
  drops={0.3}
>
  <div className="demo">
    <style>{`.demo { display: grid; align-content: center; justify-items: start; gap: 48px; height: 100%; padding: 0 8%; color: #222 }
    .demo p { margin: 0; font: 300 120px/1.1 Matter, system-ui; font-feature-settings: "ss01"; word-spacing: 0.1em; text-transform: lowercase }
    .demo button { display: flex; align-items: center; height: 128px; padding: 0 40px; border: 3px solid rgb(0 0 0 / 20%); border-radius: 24px; font: 44px 'Paper Mono', ui-monospace, monospace; color: #222; background: #fff; transition: background-color 150ms cubic-bezier(0.685, 0.89, 0.315, 0.995) }
    .demo button:hover { background: #f0efe4 }
    .demo button:active { background: #e9e8e0 }
    .demo .logos { display: flex; align-items: center; gap: 40px }
    .demo .logos img { height: 80px; width: auto }`}</style>
    <p>Select this text</p>
    <div className="logos">
      <img src="/images/logos/paper-logo-only.svg" alt="Paper logo" />
      <img src="/apple-touch-icon.png" alt="Paper icon" />
    </div>
    <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

NameDescriptionTypeValues
imageThe image over the paper texture; it can be blended into the texture and bend by itHTMLImageElement | stringImage object or URL
colorBackThe color behind the paper sheet, visible where clip cuts the image away, or through a semi-transparent colorPaper or colorShadowstringHex, RGB, or HSL color
colorPaperThe color of the paper sheet, can be blended into the imagestringHex, RGB, or HSL color
colorShadowThe color of the patterns (grain, fiber, crumples, wrinkles and folds) over the paper sheet, can be blended into the imagestringHex, RGB, or HSL color
blendingAmount of image-to-paper blending (0 = original image color, 1 = image multiplied with the paper pattern), needs imagenumber0 to 1
distortionHow much the image bends with the paper surface; negative values bend it the opposite way (needs image)number-1 to 1
clipCuts the paper sheet to the image frame (needs image)boolean—
angleDirection 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)number0 to 360
seedSeed applied to every pattern: crumples, wrinkles, folds, roughness, fiber and dropsnumber0 to 1000
roughnessFine grain covering the surface evenlynumber0 to 1
roughnessSizeScale of the roughness grain (needs roughness > 0)number0 to 1
roughnessRowsLines 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)number0 to 1
fiberCurly thread-like noise covering the surface evenlynumber0 to 1
fiberSizeScale of the fiber noise (needs fiber > 0)number0 to 1
foldsStraight vertical and horizontal fold lines producing ridges and valleys, depending on the angle valuenumber0 to 1
foldSizeXSize of the vertical folds; higher values give fewer and wider folds (needs folds > 0)number0 to 1
foldSizeYSize of the horizontal folds; higher values give fewer and wider folds (needs folds > 0)number0 to 1
foldOffsetXShifts the vertical folds across the surface (needs folds > 0)number0 to 1
foldOffsetYShifts the horizontal folds across the surface (needs folds > 0)number0 to 1
wrinklesA 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 valuesnumber0 to 1
wrinkleSizeScale of the wrinkle facets (needs wrinkles > 0)number0 to 1
crumplesA set of irregular folding lines, shaped by a combination of seed and angle valuesnumber0 to 1
crumpleCountNumber of facets in the crumple field (needs crumples > 0)number2 to 15 (integer)
dropsVisibility of the speckle pattern; unlike the other patterns it darkens the image rather than adding a shape colored by colorShadownumber0 to 1

Common Props

NameDescriptionTypeValues
scaleOverall zoom level of the graphicsnumber0.1 to 4
rotationOverall rotation angle of the graphicsnumber0 to 360
offsetXHorizontal offset of the graphics centernumber-1 to 1
offsetYVertical offset of the graphics centernumber-1 to 1
widthCSS width style of the shader elementnumber | string—
heightCSS height style of the shader elementnumber | string—
fitHow to fit the rendered shader into the canvas dimensionsenum
| "contain" | "cover"
originXReference point for positioning world width in the canvasnumber0 to 1
originYReference point for positioning world height in the canvasnumber0 to 1
minPixelRatioMinimum pixel ratio to use when rendering the shader (default is 2 for double resolution)number—
maxPixelCountMaximum pixel count that the shader may processnumber—

Description

Static texture built from a combination of grains, noises and fold patterns; works as an image filter or as a standalone texture