Spark UI
Back to UI Kit

Ripple Matrix

A heat grid where hovering any cell sends a brightness ripple radiating outward across the matrix.

Interactive Stage Preview

Customize

8 options
Accent Color
Columns
14
Rows
6
Cell Gap
6
Corner Radius
4
Ripple Strength
1.45
Cell Shape
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 ripple-matrix

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.
columnsnumber14Number of cells per row.
rowsnumber6Number of rows in the grid.
gapnumber6Space between cells in pixels.
radiusnumber4Rounding on each square cell.
rippleScalenumber1.45How much each cell swells as the ripple passes.
shapestring'square'Draw cells as squares or dots.
speednumber100Playback speed of entry and transition animations, as a percentage.