Some ideas are explained better by a 5-second looping animation than by 100 lines of text.

Sketch the figure in ASCII first: static layout, labelled motion, loop length. Get a yes before writing JSX.

Guidelines

Subject fit. Invent a visual metaphor for this specific idea. The same concept can be drawn many ways (a flow as a path, ripples, falling sand, expanding rings; a network as nodes, a constellation, a colony of pulses). Reach past the obvious shape.
One accent. One thing moves meaningfully, in one accent colour. Show direction through motion, not a second hue.
Loop cleanly. End frame equals start frame, or fade-pause-fade. No jerk at the seam.
Caption economy. One short title plus a 5-word caption at most. The figure carries it.
Calm by default. 5 to 10 second loops, easeInOutCubic or easeInOutSine. Bounce and elastic read as toy.

Pick fonts, palette, background, canvas, and layout for the subject. Nothing below is a default.

Stack

Single HTML, React 18 + Babel via CDN. No npm, no sidecars.