Spark UI
Back to UI Kit

Flow Stream

Particles travel along curved channels from each source into a pulsing target, sized by share.

Interactive Stage Preview

Customize

7 options
Accent Color
Sources
3
Particles Per Channel
4
Particle Size
2.2
Channel Width
60
Target Pulse
Animation Speed
100

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add flow-stream

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server
PropertyTypeDefaultDescription
theme'dark' | 'light''dark'Colour scheme of the card.
compactbooleanfalseShrinks the card to a smaller fixed height.
colorstring (hex)'#ff8a3d'Primary series color.
sourcesnumber3Number of source nodes feeding the target.
particlesnumber4How many particles travel each channel at once.
particleSizenumber2.2Radius of each particle.
bandScalenumber60How thick the channels get relative to their share.
showPulsebooleantruePulse a halo around the target node.
speednumber100Playback speed of entry and transition animations, as a percentage.