Spark UI
Back to UI Kit

Liquid Tank

Two offset sine waves fill a circular tank, easing to a new level whenever you switch the metric.

Interactive Stage Preview

Customize

7 options
Accent Color
Storage Level
72
Wave Height
7
Tank Size
170
Bubbles
6
Outer Rings
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 liquid-tank

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.
levelnumber72Fill level of the Storage metric.
waveHeightnumber7Amplitude of the liquid surface waves.
tankSizenumber170Diameter of the tank in pixels.
bubblesnumber6Number of bubbles rising through the liquid.
showRingsbooleantrueShow the outline and rotating dashed ring.
speednumber100Playback speed of entry and transition animations, as a percentage.