Introduction

Shaders by Paper 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:

• Image filters (6), such as Paper Texture and Fluted Glass

• Logo animations (3), such as Heatmap and Liquid Metal

• Effects (20), such as Mesh Gradient and Dot Orbit

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:

• Single license: one Framer account.

• Team license: one key that up to five Framer accounts can activate.

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.

3. Click Activate.

The license is tied to your Framer account, so it works in every project and on every computer where you're signed in to Framer.

If you see "This key is already in use on another Framer account", the key has no activations left. On a Team key, ask a teammate to free a seat first: the purchase email links to your Polar customer portal, where you can deactivate a seat. After that, activating on the new account works right away.

Paste import from Paper

If you design shaders on the Paper canvas, you can bring one into Framer with its exact settings:

1. In Paper, select the shader and copy it (Cmd C, or Ctrl C on Windows).

2. In the plugin, switch to the Paste import tab and click the paste box.

3. Paste (Cmd V or Ctrl V). The plugin lists every shader found in the copy.

4. Select one to preview it, then click Insert.

The inserted component carries the same values you had in Paper, mapped onto native Framer controls, so you can keep tweaking it in Framer.

Two notes:

• Paste import needs a license, including for the free shaders. Pasting and previewing are open to everyone.

• Images you uploaded in Paper stay in Paper; a copy cannot carry them across. The shader inserts with its default image instead, and you can add your own through the component's Image control.

Working with inserted shaders

Inserted shaders are hosted components. They add no code files to your project and keep rendering in the editor, in previews, and on your published site.

A few things worth knowing:

• Every setting you saw in the plugin is a property control on the component. Colors, sliders, toggles, and image inputs all behave like Framer's own.

• Components with a Transition control animate smoothly between variants. Set different shader values on two variants and Framer tweens between them.

• Shaders render on the GPU through WebGL. All current browsers support it. Many animated shaders on one page will cost performance, so use them deliberately.

• When we ship an update to a shader, Framer shows its regular Update button on placed instances. Updating is your choice; existing instances keep working either way.

When your license expires

The license runs for one year and does not renew automatically. When it lapses:

• Everything you placed keeps working, in the editor and on published sites.

• The plugin goes back to the free tier: the three free shaders stay insertable, the rest of the library and Paste import lock until you buy a new license.

Troubleshooting

The Insert button says "Activate license to insert". The selected shader is not one of the three free ones. A license unlocks it.

The Insert button is disabled and mentions your project role. Inserting needs edit access to the project. Ask the project owner for an editor seat.

"That copy didn't include a shader" after pasting. Make sure you selected a shader node on the Paper canvas before copying. Copying from the Paper layers list or copying a group can produce a copy without shader data.

Activation fails with a network or server message. Activation needs a connection to the licensing server and to Polar. Wait a moment and try again. Your license itself is safe; a temporary outage never deactivates it.

A placed shader won't render. The browser most likely could not create a WebGL context, which can happen with GPU acceleration disabled or in some virtual machines. On normal hardware with a current browser this does not come up.

Getting help

Write to contact@framerlabs.com. If your question concerns a license, include the User ID shown at the bottom of the Manage license drawer (open it with "Manage license" in the plugin footer, then use the copy button). It identifies your account without exposing anything private.

About

This plugin is an independent product and is not affiliated with paper.design. The shaders come from Paper Shaders, paper.design's open source library, released under the Apache 2.0 license. Shader previews and names follow the library's own documentation at shaders.paper.design.