Dynamic Island

An animated Dynamic Island component inspired by Apple's iOS design. The component automatically cycles through three states with smooth spring animations.

The three states are fully customizable:

• Idle - Compact pill with dot indicator and custom text
• Loading - Expanded with pulsing dots animation and loading text
• Processed - Larger pill with green checkmark and completion text

Built with Motion's useAnimate hook for imperative animation sequences. Each state has configurable duration via props: idleDuration, loadingDuration, and processedDuration.

The component uses a fixed height container to prevent layout shifts during animations. Perfect for status indicators, notification previews, or any context where you want to show state transitions in an engaging way.

Works great as a standalone illustration or combined with device mockups like the MacBook and iPhone illustrations.