Shader Atlas
한국어
▚ Stylize & media textures

Paper

종이 질감

Adds fine paper grain, brightness variation, and fiber-like surface bumps to the content below.

Also known as: Paperpaper texturepaper grain

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, ImageTexture, Paper } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/poster.jpg" />
      <Paper />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script setup lang="ts">
import { Shader, ImageTexture, Paper } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/poster.jpg"/>
    <Paper/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script>
  import { Shader, ImageTexture, Paper } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/poster.jpg" />
  <Paper />
</Shader>
Solid
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, ImageTexture, Paper } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/poster.jpg" />
      <Paper />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'ImageTexture',
      props: {
        objectFit: 'cover',
        url: '/samples/poster.jpg',
      },
    },
    {
      type: 'Paper',
    }
  ]
}, { disableTelemetry: true })

Props · Paper

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
roughnessRoughness0.30 – 1 (step 0.01)Surface roughness — higher values create more pronounced brightness variation
grainScaleGrain Scale10.1 – 3 (step 0.01)Scale of the paper grain — lower = coarser, higher = finer
displacementDisplacement0.150 – 1 (step 0.01)Surface micro-roughness — shifts pixels at grain scale like real paper fiber bumps
seedSeed00 – 100 (step 1)Random seed for pattern variation

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Watercolor수채화

Simplifies color into painterly patches and adds pigment bleeding and paper grain.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Wool울 섬유 질감

Adds an interwoven wool-fiber texture and bends the surface of the content below.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Stone석재 질감

Adds marbled stone patterning, relief shading, and surface distortion to the content below.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Film Grain필름 그레인

Overlays fine grain, weighted toward darker areas, for an analog film texture.

It feels like a sheet of paper laid over a smooth screen. Fine fibers and uneven brightness make the image underneath feel printed on a surface.

`roughness` defaults to 0.3 and ranges from 0 to 1 to set brightness variation across the surface. `grainScale` defaults to 1 and ranges from 0.1 to 3 to change grain size; lower values make it coarser. `displacement` defaults to 0.15 and ranges from 0 to 1 to shift pixels like raised fibers, while `seed` defaults to 0 and ranges from 0 to 100 to vary the pattern.

Place the image or graphic to be textured underneath. Pair it with `Watercolor` for pigment on paper, but high displacement can make fine text and lines look uneven.

When to use

Use it for editorial design, poster backgrounds, and print-inspired illustrations. Avoid it when fine text and geometric lines must remain perfectly straight.

Open as page ↗