⚡ AnimatedBeam Component
Visualise connections and data flows with animated beams connecting nodes. Perfect for system architecture diagrams, data pipeline visualisations, network topology maps, and process flows. Built with pure SVG and CSS for zero-dependency portability.
Uni-Directional Flow
Beams flow in a single direction from source to target, ideal for representing one-way data flows or sequential processes.
<AnimatedBeam
nodes={[
{ id: 'source', x: 100, y: 200, label: 'Source' },
{ id: 'target', x: 500, y: 200, label: 'Target' }
]}
connections={[{ from: 'source', to: 'target' }]}
/>Bi-Directional Flow
Beams travel in both directions simultaneously, perfect for representing two-way communication or synchronisation processes.
<AnimatedBeam
nodes={[
{ id: 'a', x: 100, y: 200, label: 'A' },
{ id: 'b', x: 500, y: 200, label: 'B' }
]}
connections={[{ from: 'a', to: 'b', bidirectional: true }]}
/>Multiple Inputs
Multiple beams from various sources converge to a single target, great for visualising data aggregation or fan-in patterns.
<AnimatedBeam
nodes={[
{ id: 'input1', x: 100, y: 100, label: 'Input 1' },
{ id: 'input2', x: 100, y: 200, label: 'Input 2' },
{ id: 'input3', x: 100, y: 300, label: 'Input 3' },
{ id: 'output', x: 500, y: 200, label: 'Output' }
]}
connections={[
{ from: 'input1', to: 'output' },
{ from: 'input2', to: 'output' },
{ from: 'input3', to: 'output' }
]}
/>Customization Options
Customise colours, speeds, sizes, and effects to match your design system.
Fast (1s)
Slow (4s)
Green Theme
Purple Theme
With Gradient
Thick Beams
Component Features
Fully Customisable
Configure colours, speeds, sizes, and animation patterns via props. Match any design system.
Pure CSS Animation
Smooth 60fps animations using CSS keyframes. No JavaScript runtime overhead, hardware-accelerated.
SVG-Based
Crisp rendering at any scale using SVG graphics. Perfect for responsive designs and high-DPI displays.
Zero Dependencies
No external libraries required. Fully self-contained component you can copy-paste anywhere.
Accessible
Respects prefers-reduced-motion for users with motion sensitivity. ARIA labels for screen readers.
TypeScript Ready
Fully typed props with comprehensive interfaces. Autocomplete and type checking built-in.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | 600 | Container width in pixels |
height | number | 400 | Container height in pixels |
nodes | BeamNode[] | [] | Array of node objects with id, x, y, label |
connections | BeamConnection[] | [] | Array defining which nodes connect |
beamColor | string | '#3b82f6' | Colour of the animated beams (hex format) |
beamWidth | number | 2 | Width of beam lines in pixels |
beamSpeed | number | 2 | Animation duration in seconds |
bidirectional | boolean | false | Enable bi-directional flow animation |
gradient | boolean | false | Use gradient instead of dashed line |
nodeSize | number | 12 | Radius of node circles in pixels |
nodeColor | string | '#3b82f6' | Fill colour for node circles (hex format) |
Use Cases
System Architecture
Visualise microservices, APIs, and system components with data flow animations.
Data Pipelines
Show ETL processes, data transformations, and pipeline stages with directional flows.
Network Topology
Display network connections, nodes, and traffic patterns in real-time visualisations.
Process Flows
Illustrate business processes, workflows, and decision trees with animated connections.