Dynamic Island

A black pill that grows and shrinks to fit whichever system-style view it is showing: a resting cloud that reveals the temperature on hover, an incoming call, a 60-second timer with a progress track, a notification, and a now-playing row with transport controls. Switching views is one keyed remount plus a layout animation, so the pill's width animates between the two states instead of snapping.

The pill is driven by its own switcher, which is rendered below it as a row of five icon buttons — there is no prop to hide it, so on a real surface you either cover it or you drive the view yourself.

The spring's bounce is per transition, not per view: the component keeps a from-to key and looks the bounce up in a table, so idle → music and idle → timer do not feel like the same switch. Two states the table does not name fall back to 0.5.

Content is keyed on activeView, which mirrors the reference implementation's remount. That is deliberate: each view owns fresh state, so the idle temperature starts hidden, the transport starts playing, and the timer restarts from 60 every time you come back to it.

Usage

Leave view undefined and the island manages itself through the switcher it renders. Pass view to take control, and listen to update:view so the built-in switcher keeps working — otherwise clicking it will do nothing, because a controlled view is only ever the value you give it.

<template>
  <div class="flex w-full max-w-lg flex-col gap-4">
    <div class="overflow-hidden rounded-3xl bg-accented">
      <MDynamicIsland
        :view="view"
        @update:view="selected = $event"
      />
    </div>

    <div class="flex items-center justify-between gap-3">
      <p class="text-xs text-muted">
        Switch views with the pill below it, or take control from here.
      </p>
      <USelect
        v-model="selected"
        :items="options"
        size="sm"
        class="w-36"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
type IslandView = 'idle' | 'ring' | 'timer' | 'notification' | 'music'

const options = [
  { label: 'Self-driven', value: 'self-driven' },
  { label: 'Idle', value: 'idle' },
  { label: 'Ring', value: 'ring' },
  { label: 'Timer', value: 'timer' },
  { label: 'Notification', value: 'notification' },
  { label: 'Music', value: 'music' },
]

const selected = ref('self-driven')

// Leaving `view` undefined hands control back to the island's own switcher.
const view = computed<IslandView | undefined>(() =>
  selected.value === 'self-driven' ? undefined : (selected.value as IslandView),
)
</script>

Customize

Views

Three of the five views are overridable. notification and music render their markup inline with no slot, so the island's own "you have a new notification" copy is fixed.

Props

Events

Slots

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.dynamicIsland in app.config.ts.

Accessibility

The root container is a plain <div> with no role and no live region, so a view change is completely silent to a screen reader. Attribute inheritance is off and $attrs is bound to the root, so the fix is cheap: put aria-live="polite" (or role="status") on <MDynamicIsland> and the pill's contents become the announcement.

The transport buttons in the music view are properly labelled — aria-label="Previous track", a play/pause label that flips with state, and aria-pressed on the play toggle. The five switcher buttons carry the view name as their aria-label and aria-pressed for the active one. Nothing else in the component is focusable by default, and there is no focus management across view changes: the remount drops focus if it was inside the old view.

Reduced motion is honoured for the pill and the content: the layout spring drops to duration: 0 and the content animates opacity and scale only, dropping the blur(5px) that otherwise opens the new view.

Performance

• The countdown is split in two: a 1s setInterval updates the integer seconds label, and a self-rescheduling requestAnimationFrame writes the progress track's style.width directly to the DOM. The 60fps part never goes through Vue reactivity.
• Both loops are torn down when the island leaves the timer view and again in onBeforeUnmount, and the progress element reference is dropped with them so the next entry re-resolves it.
• The progress element is resolved lazily on the first animation frame rather than on view change, because the keyed subtree has not necessarily been patched yet at that instant.
• View content is keyed on activeView, so switching remounts one small subtree rather than diffing five of them, and per-view refs reset for free.
• Only two springs run per switch — the pill's layout animation and the content's entrance — and the content entrance is delayed 0.05s so the pill is already moving when the new content appears.