Shimmer Grid

Shimmer Grid renders a canvas of dots that pulse using procedural noise. Drop it in, pick your palette, and dial the motion. It works for hero textures, loading states, empty states, subtle motion backgrounds, sweet hover states, and more! It includes 10+ customizable properties to match your project's vibe and needs.

Customizable Properties:

• Dot size: the pixel size of each dot

• Size variance: how much dots scale with the noise

• Grid gap: pixel spacing between dots

• Dot roundness: corner radius of each dot

• Noise scale: spatial scale of the noise texture

• Noise speed: animation speed of the noise

• Colors: array of swatches for the palette

• Colors override: comma separated list of hex colors. This is primarily used as a way to set the colors through component variables since you cannot make an array control variable driven.

• Color by: Noise, Random, or uniform. Control how each dot's color is assigned.

• Color contrast: adjusts contrast when "Color by" is set to noise

• Pause offscreen: pause the animation when not in view

• Play in editor: render one static frame in the editor to reduce lag.

Important note:

Depending on your component settings, this component can create lag if too many dots are rendered at once. However, this is only in extreme setups. I recommend keeping some grid gap and dot size of 2 or larger.