Delphi Design

A flexible container that animates content changes with spring physics, mimicking the iPhone Dynamic Island behavior.

Usage

import { DynamicIsland, DynamicIslandContent } from "@delphi/ui";

const views = [
  { id: "idle", content: <div className="h-7" /> },
  { id: "timer", label: "Timer", content: <TimerView /> },
  { id: "music", label: "Music", content: <MusicPlayer /> },
];

export function Example() {
  return <DynamicIsland views={views} showControls />;
}

DynamicIslandContent

For more control, use DynamicIslandContent directly to create custom animated containers:

import { DynamicIslandContent } from "@delphi/ui";

export function Example() {
  const [viewKey, setViewKey] = useState("idle");

  return (
    <DynamicIslandContent viewKey={viewKey} variantKey={`idle-${viewKey}`}>
      <YourContent />
    </DynamicIslandContent>
  );
}

API Reference

DynamicIsland Props

Prop	Type	Default	Description
`views`	`DynamicIslandView[]`	Required	Array of views that can be displayed
`initialViewId`	`string`	First view ID	Initial view to display
`onViewChange`	`(viewId, previousViewId) => void`	-	Called when view changes
`transitionDelay`	`number`	`500`	Delay in ms before switching views
`showControls`	`boolean`	`false`	Whether to show view selector controls
`className`	`string`	`""`	Additional class names

DynamicIslandContent Props

Prop	Type	Default	Description
`viewKey`	`string`	Required	Unique key for the current view
`children`	`ReactNode`	Required	Content to render inside
`variantKey`	`string`	`""`	Transition variant key (e.g., "idle-timer")
`bounce`	`number`	Auto	Custom bounce value (0-1)
`className`	`string`	`""`	Additional class names

DynamicIslandView

Property	Type	Description
`id`	`string`	Unique identifier for this view
`label`	`string`	Optional display label for view selector
`content`	`ReactNode`	Content to render when active

Bounce Variants

The component includes predefined bounce values for smooth transitions between specific view pairs:

import { BOUNCE_VARIANTS } from "@delphi/ui";

// Example: "timer-ring" uses 0.35 bounce
// Example: "music-timer" uses 0.2 bounce

Use for status indicators that expand to show more detail

Transition through idle state for smooth animations between views

Provide clear visual feedback during state changes

Keep content minimal and focused within the island

Overload with too many simultaneous animations

Use for critical information that needs to persist

Make transitions too fast — users need time to perceive changes