Paper Shaders

Framer plugin

demo #3

This page is a showcase for the Paper Shader plugin: scroll interactions. Scroll down the page to see the interactions.

Scroll triggers

You can wrap a shader inside a native Framer component and create multiple variants. Then simply use the Framer native scroll variants to trigger a change of variant. The change of values and settings will animate for almost all property controls offering a slider.

Steps

  • Wrap your shader inside a Framer component (cmd + option + k)

  • Create multiple variants with different settings

Adjust the easing curve of the primary variant to control how fast the animation happens.

Keep scrolling

This is just some filler text. Keep scrolling and watch the background change.

this is simply
an example section

Just scroll up and down on the page to trigger the various states.

Keep scrolling

This is just some filler text. Keep scrolling and watch the background change.

f+

resources

→ templates

→ components

→ plugins

→ ai agents

Community

→ discord

→ newsletter

Others

→ blog

→ contact

→ plugins