Spark UI
Physics Dock

Customize

Background
Dock Color
Indicator Color
Icons
9
Icon Size
52
Magnification
84
Magnify Range
150
Icon Gap
16
Hover Labels
Running Dots
Launch Bounce
Drag To Reorder
Calendar Month
Calendar Day
17
Spring Speed
100

Physics Dock

Widgets
182 views•67 uses

Props

15 properties
backgroundcolor#fbfbfb
Colour behind the dock.
dockColorcolor#5e5e5e
Fill of the dock shelf.
dotColorcolor#e8e8e8
Running-app dots under icons.
iconCountnumber9
How many apps sit in the dock.
iconSizenumber52
Resting icon size in pixels.
magnificationnumber84
Icon size directly under the cursor.
rangenumber150
How far the swell spreads to neighbours.
gapnumber16
Space between icons.
showLabelsbooleantrue
Show app names above hovered icons.
showDotsbooleantrue
Show indicators under open apps.
bounceOnClickbooleantrue
Bounce icons when clicked.
reorderablebooleantrue
Let icons be dragged into a new order.
calendarMonthstringJul
Month shown on the calendar icon.
calendarDaynumber17
Date shown on the calendar icon.
speednumber100
Stiffness of the magnification springs.

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 physics-dock

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 desktop-style app dock whose icons swell under the cursor on spring physics, bounce when launched and can be dragged to rearrange.

KEY FEATURES

  • ·Icons magnify with a cosine falloff around the pointer, each on its own spring, so neighbours ease up smoothly
  • ·Drag any icon sideways to reorder the dock; the rest slide out of the way
  • ·Clicking an icon plays a launch bounce and lights its running indicator
  • ·Hover labels float above each icon
  • ·All nine app icons are hand-drawn vectors that stay crisp at any magnification