Documentation

/

Demo 2 · hover

Shaders by Paper · demo 2

hover event

A shader in a native component with a hover variant. Hover the shader to see the interaction.

hover the shader

Halftone Dots in a native component with a Hover variant.

You can wrap a shader inside a native Framer component and create a native Hover variant. 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 a hover variant with different settings

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

Demo 2 uses Halftone Dots, one of the 26 shaders a license unlocks. A free shader such as Mesh Gradient takes a hover variant the same way. To insert the shader first, start with the introduction.

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.