Network

An animated grid of icon cards connected by routes. A glowing trace travels each route, lighting up each card as it arrives, then flows on and slides off the end. Hovering a card reveals a short description; clicking it opens a modal with an optional link. It turns a set of capabilities or services into a cinematic "everything connects" map.

It is the kind of capability diagram modern platforms use: boxes light up and wire together to show how the pieces work as one system.

When to use it

A "one platform" / integrations story (ordering connects to delivery connects to data...)
A feature or capability overview where the parts relate to each other
A services map for a business with several offerings
A hero or section that benefits from cinematic, self-running motion

When not to use it

A plain list of features with no relationship: use Icon Cards in a Grid
A single icon plus label: use Icon Card
A data chart: use Chart
A static logo strip: use Carousel (Images, Scroll)

Grid

Columns / Rows: 1 to 6 button selectors

Set the grid size. Changing either reflows the cards into the grid left to right, top to bottom, so picking 3 columns lays the cards out in 3 columns. You can still nudge an individual card afterwards with its Column / Row fields, for example to leave a cell empty for a sparser look.

Gap: 0 to 48px

Spacing between cards. Lower reads as a compact, circuit-board grid.

Card Size: 48 to 160px

The size of each tile. The whole grid auto-scales down to fit narrow screens.

Motion

Trace Speed: 80 to 800 (pixels per second)

How fast the light trace travels along a route. Higher is quicker.

Fill Spin: 1 to 20s

Seconds per rotation of the gradient fill inside a lit card. Lower is a faster swirl. Purely cosmetic.

Auto-cycle / Until hover: toggle

Auto-cycle: routes light up one after another on a loop, on their own.
Until hover: stays dark until a visitor hovers a card, then lights that card's routes.

Palette: 4 colour swatches

The gradient used for the card fill and the connecting lines. Four stops, left to right. Clashing hues from different parts of the colour wheel read best, for example cyan to blue to violet to magenta.

Cards

The list of icon cards in the grid. Each card has:

Icon: opens the icon picker (the full Lucide library, with a search box).
Id: a short unique key the routes reference, for example ordering.
Column / Row: its position in the grid (0-based). Usually set for you

by the Columns / Rows selector; edit to fine-tune.

Label: shown under the icon when the card lights.
Description: shown on hover and in the click modal (an expandable field).
Link: optional; becomes a "Learn more" button in the card's modal.

Use + Add card to add one; the card's x removes it.

Routes

A route is one connecting line that threads through several cards in order, for example Google to Website to Ordering. The trace travels it, lighting each card as it reaches it. Routes can share cards, which is what produces the interconnected, branching look.

Build a route by picking cards from its + Card dropdown: each pick appends a chip, and the chip's x removes it. The order of the chips is the order of the line. + Add route adds another line.

The geometry is automatic: a straight line when two cards share a row or column, a rounded right-angle elbow otherwise. It never draws a diagonal.

What is not configurable in the panel

Card light timing: a card lights exactly when the trace reaches it and

darkens only after the trace has cleared it. Baked in.

Icon spring and line drawing: the reveal animation is fixed.
Line routing: straight or elbow is chosen automatically. You pick the

card order, not the pixel path.

Pro

The animation is a Pro feature. On a paid or standalone site it runs in full. On the free WordPress plugin the cards render as a static grid (no lines or motion) until the licence is active.

Per-device

Gap and Card Size adapt as the screen narrows (the grid scales to fit). Set Columns lower for phones if a wide grid feels cramped.

Common patterns

Capability / integrations map

4 columns by 2 rows, Auto-cycle, one route per flow (acquisition, fulfilment, data to win-back). Default cyan to violet palette.

Services overview (hover to explore)

3 columns, Until hover, each card linked to its service page so the modal's "Learn more" goes somewhere.

Don't

Don't crowd it with 15 cards; it reads as noise. 5 to 9 is the sweet spot.
Don't set a card's Column beyond the grid's Columns or it lands off-grid.

The Columns selector reflows cards to avoid this; manual edits can break it.

Don't pick four near-identical palette colours; the gradient and motion

disappear. Use contrasting hues.

Don't put it on a busy photographic background; the glow needs a dark,

calm backdrop.

blocks/icon-card: a single icon with title and text, no connections
blocks/grid: a static grid of cards with no animation or wiring
blocks/chart: data visualisation
blocks/section: wraps a network; use a dark background for the glow