Paper Shaders brings the open source WebGL shader library by paper.design into Framer. Every shader is a native Framer component: you insert it from the plugin, and all of its settings show up as regular property controls in Framer's properties panel, without code files or embeds.

The library has 29 shaders in three categories, matching shaders.paper.design:

Quick start

  1. Open the plugin from Framer's Plugins menu.
  2. Browse the Library tab. Hovering a thumbnail plays animated shaders live, and clicking one opens it in the preview panel.
  3. Pick a preset, or leave the default.
  4. Click Insert. The shader lands on your canvas as a component.

From there it behaves like any Framer layer: resize it, place it inside frames or stacks, and tune its settings in the properties panel on the right.

Free shaders and the license

The first shader in each category is free forever, with no watermark and no limits: Paper Texture, Heatmap, and Mesh Gradient.

A license unlocks the other 26 shaders and the Paste import tab. It is valid for one year and covers every project on your Framer account. There are two options:

To buy one, click "Activate license" in the plugin footer, then "Get a license". Checkout runs through Polar and the license key arrives by email right after the purchase.

Activating your license

  1. Click "Activate license" in the plugin footer.
  2. Paste the license key from your purchase email.