dynamic loops

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

3. Set a native Framer loop via the Interaction panel (On Appear, then Cycle)

You can control the easing curve for each variant individually, or adjust the easing curve of the primary variant to change all variants at once (native Framer behaviour).

Demo 1 uses Mesh Gradient, one of the three free shaders, so you can rebuild it without a license. The introduction covers inserting a shader and how its settings animate between variants.