Dynamic Island

The DynamicIsland component is a polished, Apple-inspired notification pill that seamlessly morphs and resizes itself depending on the content inside it.

Instead of hard-coding widths and heights, the wrapper utilizes Framer Motion's layout engine. When the active DynamicIslandContent changes, the parent wrapper naturally stretches or shrinks to fit the new content using spring physics, preventing any harsh layout jumping.

Live Preview

[!TIP] Dimensions: The DynamicIsland parent container does not need a specific width or height. It will automatically snap to the dimensions of the currently active DynamicIslandContent. Always apply strict w-[...] and h-[...] classes to your DynamicIslandContent wrappers so the parent knows exactly what size to morph into.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { DynamicIsland } from "@/components/creative/dynamic-island";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { DynamicIsland } from "@/components/creative/dynamic-island";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <DynamicIsland
        spring{10}
      >
        <div>Content goes here</div>
      </DynamicIsland>
    </div>
  );
}