Skip to content
UI Kit
Accent color

Data animations

Data that flows between systems, a turning globe with arcs and pins, and networks of nodes with signals that ripple outward.

3 components · 9 variants
Switch category

On this page

Every component of this category. Pick one to jump to its variants.

data-flow

Data flow

Nodes joined by hairlines, with packets of light running along them and a ring where they arrive. Pauses out of view.

Props and details · Data flow

Pipeline

A process from left to right with a fork. Lines draw in when the scene appears, then the packets start.

Hub

One center that talks to six services, some both ways. Good for integrations and sync.

Collect and report

Four sources pour into one store, which feeds a report and an alert. The order of the packets tells the story.

globe

Globe

A dotted globe in real CSS 3D with invented land, arcs that draw between places and pulsing pins.

Props and details · Globe

Arcs

Routes rise from the surface one after another, draw and fade, while the globe turns once in 48 seconds.

Pins

Places with a soft pulse, staggered so they never beat together. Point at the globe and it leans towards you.

Quiet globe

Only dots, fewer of them and a slower turn. A calm picture behind a headline or a contact section.

network-graph

Network graph

Nodes on rings joined by hairlines. A signal ripples out from the center and lights every node it reaches. Point or Tab to see connections.

Props and details · Network graph

People

Avatars around a center, two rings deep. The lines draw outward when the graph appears.

Connected tools

A website in the middle and the tools around it as icons. Inner and outer ring know each other too.

Community

Thirty small members on the outer ring, ten hosts inside. Calm enough to sit behind a headline.

Similar components

More from Visuals, the same area of the kit.

Often combined with

Sections that usually sit next to Data animations on a page.

Often searched

Jump to

Copied to the clipboard