Back to Dictionary
Status & Confirmation
●●○Customize
Dynamic Island Expand
A top-anchored capsule that fluidly morphs into a larger notification card, accommodating new UI controls, and smoothly reverts to a resting pill shape.
Live Demo
System Active
What It Is
A top-anchored capsule that fluidly morphs into a larger notification card, accommodating new UI controls, and smoothly reverts to a resting pill shape.
✓When to Use
- System-level background tasks
- Music player mini-status
- Toast notification alternatives
✕When NOT to Use
- Complex forms
- Critical blocking alerts
Configuration Tips
- 01Use Framer Motion `layout` prop on the container to automatically interpolate width, height, and border-radius.
You've Seen It In
iOS 16+Vercel Deployment StatusPremium Web Dashboards
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create a black pill-shaped div that uses framer-motion layout to seamlessly expand into a larger rounded rectangle card when clicked.
Code Example (Tailwind CSS)
export function DynamicIslandExpandDemo() {}