Spark UI
Back to UI Kit

Tilt Glow Panel

A chart card that tilts in 3D toward the cursor with a moving glare and parallax-lifted layers.

Interactive Stage Preview

Customize

7 options
Accent Color
Bars
12
Tilt Angle
14
Glare Strength
28
Parallax Depth
30
Trend Line
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 tilt-glow-panel

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.
barsnumber12Number of bars on the panel.
tiltnumber14Maximum tilt in degrees as the cursor moves.
glarenumber28Brightness of the cursor-following glare.
depthnumber30How far the panel layers lift toward the viewer.
showLinebooleantrueOverlay a trend line on the bars.
speednumber100Playback speed of entry and transition animations, as a percentage.