Spark UI
Control Center Edit

Customize

Background Warm
Background Light
Background Cool
Active Tile Color
Album Artwork
Song Title
Artist
Widget Size
Tile Size
72
Tile Gap
10
Glass Opacity
30
Glass Blur
22
Start In Edit Mode
Animation Speed
100
Auto Play

Control Center Edit

Widgets
343 views•28 uses

Props

15 properties
bgFromcolor#c46a6c
Warm tone of the wallpaper gradient.
bgViacolor#cfa2aa
Light highlight tone of the wallpaper.
bgTocolor#0d5670
Cool tone of the wallpaper gradient.
accentColorcolor#ffffff
Fill of switched-on tiles and the resize handles.
artworkstring/grid-shutter/img…
Cover image in the Now Playing widget.
songTitlestringGolden Hour
Track name in the widget.
artiststringNova & The Tides
Artist line under the track name.
widgetSizeenumsquare
Starting shape of the Now Playing widget.
tileSizenumber72
Diameter of each control tile in pixels.
gapnumber10
Space between tiles in pixels.
glassOpacitynumber30
How dark the smoked glass tiles are.
blurnumber22
Backdrop blur strength behind the tiles.
startEditingbooleantrue
Open with remove badges and resize handles showing.
speednumber100
Speed of the layout springs and demo loop.
autoPlaybooleanfalse
Loop a demo: enter edit mode, widen the widget, shrink it, exit.

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 control-center-edit

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

A glassy mobile control panel with an edit mode: tap minus to remove controls, and drag the Now Playing widget's corner handle to morph it between a square card and a wide pill while every tile reflows around it.

KEY FEATURES

  • ·Tiles reflow the moment the widget crosses halfway, and removing one springs the rest into their new slots
  • ·Every element of the Now Playing widget is interpolated from the drag progress, so artwork, title, transport buttons and AirPlay glide continuously between layouts
  • ·The widget tracks the corner handle 1:1 while you drag, rubber-bands past either size, and springs to the nearest shape on release using your flick velocity
  • ·Frosted glass tiles use backdrop blur and saturation over a live gradient, with tunable opacity and blur
  • ·Scales itself to fit any container, from a small preview card to a full-screen demo