Voronoi Paper Style Shader

$5

Voronoi Paper Style Shader

A smooth, animated Voronoi pattern

Details

Category

Last update

Suggest improvement or report a bug

Documentation

What it does

The frame divided into irregular cells with visible gaps between them — the pattern you see in cracked mud, dragonfly wings, and soap foam.

It's a natural structure, which is why it reads as organic despite being entirely mathematical.

Controls

13 controls.

Control

Type

Default

Notes

Colors

Array

["#cc3333","#cc9933"]

—

Color Glow

Color

#ffffff

—

Color Gap

Color

#2e0000

—

Steps Per Color

Number

3

1–3

Distortion

Number

.4

0–.5

Gap

Number

.04

0–.1

Glow

Number

0

0–1

Speed

Number

.5

0–5

Scale

Number

.5

.01–4

Rotation

Number

0

0–360

Offset X

Number

0

-1–1

Offset Y

Number

0

-1–1

Fit

Enum

contain / cover — default cover

—

Working through the panel

Cells and gaps

Colors is the list the cells are filled from.

Gap is the space between cells and Color Gap is what shows through it. This pairing is the whole look — a dark gap reads as cracks or leading, a light one reads as grout or paper showing between shapes.

Steps Per Color controls how many tones each colour is broken into as it fills the cells. At one you get flat cells; higher gives banded shading inside each one, which adds depth without adding colours.

Distortion and glow

Distortion pushes the cells out of their regular shape. At zero the pattern is evenly spaced and reads as engineered; raised, the cells vary in size and it starts to look grown rather than built.

Glow starts at zero, and Color Glow is what it's made of. Raising it lights the cell edges from within — which moves the whole thing from a printed pattern toward something like stained glass with light behind it.

Framing

Scale sets the cell size, and this is the control that changes the reference most. Large cells read as tiles or stained glass; small ones read as texture or foam.

Speed drifts the pattern, rotation turns it, and the two offsets move it within the frame.

Fit is contain or cover.

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.