Spark UI
Back to UI Kit

Cluster Field

A scatter plot that springs from raw noise into labelled clusters, with halo rings and a segment card on hover.

Interactive Stage Preview

Customize

5 options
Accent Color
Points
90
Clusters
4
Point Size
7
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 cluster-field

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'Base color; clusters use its shades.
pointsnumber90Number of scatter points.
clustersnumber4Number of segments.
pointSizenumber7Diameter of each point.
speednumber100Playback speed of entry and transition animations, as a percentage.