Documentation

/

Demo 4 · tabs

Shaders by Paper · demo 4

tabbed sequence

A shader in a native component with one variant per tab. Click a tab to see the interaction.

tab 1

tab 2

tab 3

tab 4

Neuro Noise in a native component with four variants, one per tab.

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

  1. Wrap your shader inside a Framer component (Cmd Option K)

  2. Create multiple tabs and variants with different settings

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

Each tab sets one variant of the same component, so the shader eases from one look to the next. The demo uses Neuro Noise, one of the 26 shaders a license unlocks, and the introduction shows how to insert a shader.

Shaders by Paper is an independent product, not affiliated with paper.design. The shaders come from Paper Shaders, paper.design's open source library, released under the Apache 2.0 license.

f

+

framerlabs is constantly improving, make sure to come back regularly to check our updates.