A hero section with a flat colour behind it reads as a template. Ambient motion behind the copy is the cheapest way to make a page feel built, and because it sits behind the content it costs you nothing in readability.
These are the elements that paint somewhere other than themselves. Drop one anywhere inside the section you want lit and it walks up to that section, however many rows and columns are nested in between, and covers the container. On a published page the widget itself has no footprint at all. Inside the builder it leaves a small labelled handle so you can select it again.
A field of small squares that flicker behind your section, drawn on canvas. Drop the widget anywhere inside the section and it paints the section. It walks up through however many rows and columns you have nested and lights the container itself. On the live page the widget has no footprint at all; in the builder it leaves a small click target so you can get back to its settings.
A precise SVG grid with selected cells that breathe in, fade away and reappear somewhere new. It gives hero sections that technical, engineered texture without a canvas dependency, an animation library or unstable random layouts.
A fan of long curved rails across the section, with comets of light running down them at their own speeds. The hero-section background that makes a dark page look built rather than decorated. Drop it anywhere inside the section and it paints the whole section. The widget itself is invisible on the page.
Liquid bands of violet, ember or frosted light fold through a section like polished metal under a moving studio lamp. It is a real pointer-reactive WebGL field, packed directly into the widget with no runtime library, texture or CDN.
A horizon of gradient water rolling toward the viewer, fading into haze at the distance. Every pixel is traced through the surface by a self-contained WebGL raymarcher, so the swells are real geometry rather than a looping picture.
A moving section gradient broken into deliberate colour bands and ordered Bayer pixels.
A fine repeating texture laid over a section, row or column: dots, grid, lines, halftone, paper or film grain.
A dark, fabric-like WebGL background with aurora ribbons, pearlescent sheen, glints, grain and a gentle lean toward the pointer.
A fluid chrome WebGL background shaped by domain-warped noise, silver midtones and bright specular edges.
A section background made of a grid of tiny squares, circles and triangles whose size and kind follow a slowly moving field of noise. The pointer throws ripples through the grid that light the shapes as they pass, and it grows in from the middle when it appears.
Fine luminous strands, layer on layer of wavy lines pushed through a slow twist, lit by a soft glow and a drifting cloud and turning gently around the middle of the section.
Position does not matter. Put it in any row or column inside the target section and it will find the section around it.
Target a section, a row, a column, or any class you type. Use a class when you have several sections and want the background on one specific container.
The background can sit behind your content, above the section’s own background, or over the content entirely. Behind the content is the default and the right choice for a hero.
Each background has its own controls. On Flickering Grid that is square size, spacing, colour, brightest and dimmest opacity, and how much of the grid re-rolls each second. Where a background offers a fade or a mask, use it so the pattern resolves into the section instead of stopping at a hard line.
New to the app? Start with the install and setup guide.
Animated Elements