# Motion Dynamic Island

Dynamic island pill that morphs between states.

- id: `motion-dynamic-island`
- Page: https://agentic-ui-kit.com/components/motion-dynamic-island
- Live preview: https://agentic-ui-kit.com/live/component/motion-dynamic-island?piece=motion-dynamic-island

## Install

```bash
agentic-ui add motion-dynamic-island
npx shadcn@4.17.0 add @agentic-ui/motion-dynamic-island
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** morphing-pill, idle-call-timer-notification-states, spring-resize, content-crossfade, live-call-clock, countdown-timer-with-pause, notification-auto-dismiss, live-region-announcements, controlled-and-uncontrolled, reduced-motion-fallback
- **Intents:** track-status, communicate
- **Suits domains:** saas, devtools, personal-productivity, ai-workspace, music
- **Interaction:** click, keyboard-navigation
- **Screen role:** communication
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** dynamic island pill that morphs between states, ios style island notification with call and timer, morphing status pill for a live call, a timer and a notification, animated top-of-screen pill showing the current activity
- **Avoid when:** A stack of toasts is wanted (use motion-toast-stack), A passive status dot is enough (use motion-live-pulse), Important errors that must stay until read (use an alert, not an auto-dismissing pill), More than a handful of states with long content
- **Preserve when adapting:** live-region, named-buttons, capped-width, auto-dismiss-rule, instant-fallback
- **Replace when adapting:** state, caller, notification, timer-label, timer-seconds, auto-dismiss-ms, pill-colours
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, motion, react
- **Motion:** profile subtle, library motion, reduced-motion fallback yes, target 60 fps
- **npm dependencies (registry):** motion@12.23.24
- **Registry dependencies:** lib-motion