$5

Waves

A configurable line pattern shader

Details

Category

Last update

Suggest improvement or report a bug

Waves — Framer component

About this Component

Preview component

A configurable line pattern shader — morph smoothly between sharp zigzags, clean sine waves, and irregular organic wave shapes, all as one static, GPU-rendered texture. Great for section dividers, backgrounds, or subtle textured surfaces.

Features

  • Shape morphing — a single Shape control blends continuously from zigzag to sine wave to irregular wave

  • Amplitude & Frequency — control how tall and how tightly packed the wave lines are

  • Spacing control — adjust the gap between each pair of wavy lines

  • 2-color blend — set Background and Foreground colors, with a Proportion control to shift the balance between them

  • Softness control — go from a hard, high-contrast edge to a smooth, blended transition

  • Built in Paper style, running on a lightweight, zero-dependency shader engine for smooth performance

Controls

  • Background Color

  • Foreground Color

  • Amplitude

  • Frequency

  • Spacing

  • Proportion

  • Softness

  • Shape

  • Scale / Rotation / Offset

How to use

  1. Add the Waves component onto your canvas

  2. Set your Background and Foreground colors

  3. Adjust Shape to morph between zigzag, sine, and irregular wave styles

  4. Fine-tune Amplitude, Frequency, and Spacing to set the size and density of the lines

  5. Adjust Proportion and Softness to set the balance and sharpness between the two colors

Shader powered by Paper Shaders.

Refund Policy: Due to the nature of digital products, all sales are final. Once purchased, this component is non-refundable. Please make sure it fits your needs before completing the checkout.

Support: hi@alicorak.com

Asset updates

Get new Framer assets delivered to your inbox

New releases, free assets, and occasional offers. No spam.

Asset updates

Get new Framer assets delivered to your inbox

New releases, free assets, and occasional offers. No spam.