+-+-+-+-+-+-+-+-+-+-+
|f|r|a|m|e|r|l|a|b|s|
+-+-+-+-+-+-+-+-+-+-+

resources

•

community

•

documentation

•

contact

+-+-+-+-+-+-+-+-+-+-+
|f|r|a|m|e|r|l|a|b|s|
+-+-+-+-+-+-+-+-+-+-+

← back to homepage

Paper Shaders

Framer plugin

demo #4

This page is a showcase for the Paper Shader plugin: tab sequence.

Get the plugin

Get the plugin

Shaders by Paper

Introduction

Demo 1

Demo 2

Demo 3

Demo 4

TAB 1

TAB 2

TAB 3

TAB 4

this is an example
of a tabs block

Each tab showcases a different state of the shader.

Follow us on X

TAB 1

TAB 2

TAB 3

TAB 4

this is an example
of a tabs block

Each tab showcases a different state of the shader.

Follow us on X

Tabbed sequence

You can wrap a shader inside a native Framer component and create multiple variants. 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 tabs and variants with different settings

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

f+

resources

→ templates

→ components

→ plugins

→ ai agents

Community

→ discord

→ newsletter

Others

→ blog

→ contact

→ plugins