Animated Beam

Create animated connection beams between elements. Several node cards (icons in rounded boxes) connected by curved lines, with pulses of light traveling along the lines: the classic 'data flowing between integrations' visual. Implementation: an absolutely positioned SVG behind the nodes. For each connection draw two paths with the same 'd' (cubic bezier curves between node centers): a static base path (hairline color, 1.5px) and a pulse path on top in the accent color with stroke-dasharray: 14 46 and a keyframe animation moving stroke-dashoffset by -60 over 1.6s linear infinite: the dash segment reads as a pulse of energy traveling the line. Stagger the animation-delay per connection (~0.5s apart) so pulses don't move in lockstep. Round the pulse ends with stroke-linecap: round. Compute path coordinates from the actual node positions (as fractions of the container size) so the beams stay attached on resize. When prefers-reduced-motion is enabled, show the static lines without pulses. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.