All studies26 / 74
Data
Integration map
A wiring diagram drawn between real layout nodes, where a single pulse walks the order in which an AI copilot reads its sources and replies, with a caption for every step.
Where it earns its place
AI integration and platform pages that need to show where data comes from and where it goes, without a static architecture slide.
What we changed
- Kept the original's best idea: paths are computed from the measured edges of DOM nodes and remeasured on resize, so the diagram is ordinary responsive layout.
- Replaced the gradient sweep with a dash sliding along a normalised path; the original's gradient moves along the x axis only, so it drifts off any curve that is not horizontal.
- One champagne pulse at a time on thin static lines, no glow, and every pulse is tied to a numbered caption, so the motion explains a sequence instead of decorating it.
- Curves are cubic with horizontal tangents, so lines leave and enter nodes square-on like wiring.
- Reduced motion shows the static map and the full list of steps.