npx shadcn@latest add https://components.bksh.site/r/paper.json

Paper

A GPU paper surface — fibres, crumples, folds, and grain. Run it over a photo, or on its own.

Example.tsx

import { Paper } from "@/components/better/paper"

export function Example() {
  return (
    <Paper
      image="/photo.jpg"
      color="#f4efe4"
      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}
      radius={16}
      className="aspect-[4/3] w-full max-w-xl"
    />
  )
}

Dependencies

@paper-design/shaders-react

Props

Prop	Type	Default	Description
children	ReactNode	—
className	string	—
image	string	—	Optional source image. With one, the texture becomes a filter over the photo (creased, printed-on-paper look); without one, it's a plain paper surface in `color` / `colorFront`. /
color	string	"#f4efe4"	Base paper colour (the "back" of the texture).
colorFront	string	"#9fadbc"	Colour of the texture's ink/shadow detail.
contrast	number	0.3	Sharpness of the light-to-dark transitions, 0–1.
roughness	number	0.4	Fine pixel grain, 0–1.
fiber	number	0.3	Curly fibre noise, 0–1.
fiberSize	number	0.2	Scale of the fibre noise, 0–1.
crumples	number	0.3	Cell-based crumple intensity, 0–1.
crumpleSize	number	0.35	Scale of the crumple cells, 0–1.
folds	number	0.65	Depth of the folds, 0–1.
foldCount	number	5	How many folds, 1–15.
fade	number	0	Large-scale noise mask over the whole pattern, 0–1.
drops	number	0.2	Speckles, 0–1.
seed	number	5.8	Changes the random layout of folds, crumples, and drops. 0–1000.
radius	number	16	Corner radius in px.