Backgrounds

Paper Shaders

React-ready shader components — mesh gradients, warps, dithering.

Live demopaper-shaders

Paper Design ships GPU-powered shader components as first-class React elements. Mesh gradients, warps, waves, dither — the look that's defining 2025 landing pages. Zero Three.js knowledge required.

Install

npm i @paper-design/shaders-react

Snippet

import { MeshGradient } from "@paper-design/shaders-react";

<MeshGradient
  style={{ width: "100%", height: 320 }}
  colors={["#22d3ee", "#8b5cf6", "#f472b6"]}
  speed={0.4}
/>