Spark UI
Back to UI Kit

Layered Flow Area

Multiple stacked gradient area layers that read as one fluid, depth-shaded stream.

Interactive Stage Preview

Customize

8 options
Accent Color
Data Points
6
Layers
2
Curve
Line Thickness
2
Fill Strength
40
Stacked
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 mono-fluid-stream-wave

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.
pointsnumber6Number of samples along each wave.
layersnumber2Number of stacked wave layers.
curvestring'natural'Interpolation between samples.
strokeWidthnumber2Stroke width of the front wave.
fillOpacitynumber40Opacity of the gradient fill, in percent.
stackedbooleanfalseStack layers on top of each other instead of overlapping.
speednumber100Playback speed of entry and transition animations, as a percentage.