---
title: "Waves Shader — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ali Çorak · Backgrounds. A configurable line pattern shader"
canonical: "https://framer.elliotli.dev/component/waves-shader"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Waves Shader

# Waves Shader

A configurable line pattern shader

[View on Framer](https://framer.com/marketplace/components/waves-shader/?via=elliot-li)

![Waves Shader preview image 1](https://framer.elliotli.dev/og/component/waves-shader/a28e8e8ee4d53541/1600x1200.jpg)

## Summary

A configurable line pattern shader

## Description

**Unlock entire Depth library for $149. One price. Lifetime.**

[**Get Depth**](https://depth.website/#all-access)

**\--------------------------------------------------------**

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](mailto:hi@alicorak.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #8835

## Details

- **Author**: Ali Çorak
- **Price**: $5.00
- **Published**: 2026-07-04
- **Updated**: 2026-08-16
- **Added**: 2026-07-04
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background