Component 01

The island

A black pill that changes jobs. Menu, player, alert, timer — one surface, one spring. The words fade on their own, so the type never stretches with the shell.

GitHub npm i dynamic-island-svelte

Open the menu

Five states, every direction. The sliders stay live while it moves.

Keys 1–5 switch states. Escape closes. Arrows move through the menu.

src/lib/island

Stage

Motion

Stiffness 0.17

Damping 0.74

Fade 200 ms

Hold 3.4 s

Stiffness and damping are Svelte’s spring, on a 0–1 scale, applied while a gesture is still moving. Fade is the content crossfade. Hold is how long the alert stays up. Reduced motion snaps the shell and drops the blur.