Shimmer Grid
Shimmering pixel grid for tasteful motion. Drop in as a hero background, loader, or sweet hover state. Tune dot size, gap, roundness, noise scale, and speed to match your vibe!
Make it with Workshop
Build your own component with AI
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.
