$5

Waves

A configurable line pattern shader

Details

Category

Last update

Suggest improvement or report a bug

Documentation

What it does

A field of flowing lines in two colours — regular enough to read as pattern, irregular enough to feel alive.

It's one of the calmest backgrounds in the library, which makes it one of the few you can put dense text on without a fight.

Controls

10 controls.

Control

Type

Default

Notes

Color Back

Color

#000000

—

Color Front

Color

#ffbb00

—

Amplitude

Number

.5

0–1

Frequency

Number

.5

0–2

Spacing

Number

1.2

0–2

Proportion

Number

.1

0–1

Softness

Number

0

0–1

Shape

Number

0

0–3

Scale

Number

.6

.01–4

Rotation

Number

0

0–360deg

Working through the panel

The wave shape

Four controls define the waves themselves.

Amplitude is how tall they are, and Frequency is how many fit across the frame. Those two together set the whole character: low frequency with high amplitude gives a few big rolling forms, the reverse gives a fine ripple.

Spacing is the gap between the lines. And Shape morphs the wave form itself — it's a range rather than a set of options, so drag it slowly and watch the lines change profile.

Colour and edge

Two colours, front and back.

Proportion is how much of the frame belongs to the front colour — low keeps the waves as thin lines on the background, high fills more of the frame with them.

Softness is the edge quality. At zero the lines are crisp, which reads as a graphic or a print. Raised, they blur into the background, which reads as light or fabric. This one control moves the component between two quite different jobs.

Framing

Scale zooms the whole field, and Rotation turns it.

Rotation matters more here than in most backgrounds, because waves have a strong direction. Horizontal reads as calm and settled. A slight tilt adds energy. Vertical changes the meaning entirely — it stops looking like water and starts looking like a curtain.

Performance and limits

  • Static rendering is handled, so canvas thumbnails and exports show a settled frame rather than a blank box.

Good to know

No setup or coding required. Responsive across desktop, tablet, and mobile.

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.