Halloween only 🎃 Get Wensity Pro for 31% less with
Wensity

Dynamic Island Toast

Pro

A pixel-faithful Apple Dynamic Island that morphs, splits, and breathes while it hosts live activities inside your app.

cinematic interactionsdynamicislandtoastframer motion
Dynamic Island Toast component preview

Overview

Dynamic Island Toast is a React and Tailwind CSS notification component that recreates the iPhone Dynamic Island, in Next.js or any React app, built on Framer Motion. The pill morphs between a compact stadium, a split mode where two activities join through a gooey filter, and an expanded card opened with a tap or long press. Variants cover messages, uploads, audio, calls, the ringer, timers, navigation, AirPods, charging, and Face ID, each with its own layout. Updates are announced politely, and reduced motion is honored. Set inline to pin it inside a container instead of the viewport.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add dynamic-island-toast

Usage

Import DynamicIslandToast from @/components/wensity/dynamic-island-toast and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import { useState } from "react";
import { DynamicIslandToast } from "@/components/wensity/dynamic-island-toast";


export function DynamicIslandToastDemo() {
  const [toast, setToast] = useState<DynamicIslandToast | null>({
    id: "upload-1",
    variant: "upload",
    title: "hero-final.mp4",
    progress: 0.62,
    duration: 4000,
  });


  return (
    <DynamicIslandToast
      inline
      toast={toast}
      onDismiss={() => setToast(null)}
    />
  );
}

Props

PropTypeDefaultDescription
toastDynamicIslandToast | null-The active toast. Pass null to dismiss.
secondaryDynamicIslandToast | null-Optional second activity. When set, the island enters split-mode with two pills.
defaultExpandedbooleanfalseRender expanded by default (useful for hero previews).
onExpandedChange(expanded: boolean) => void-Fired whenever the user expands or collapses the island.
onDismiss() => void-Fired when the island auto-dismisses or the user closes it.
inlinebooleanfalseIf true, position absolutely inside the nearest positioned ancestor. If false, fixed to the viewport.

Related components

  • Infinite Marquee component preview

    Infinite Marquee

    A seamless, GPU-only logo strip that never stutters or snaps at the loop point.

  • Apple-Style Sticky Scroll component preview

    Apple-Style Sticky Scroll

    A pinned cinematic section that morphs in lock-step with scroll, staying perfectly in sync whichever way you travel.

  • Morphing Shape Background component preview

    Morphing Shape Background

    Lava lamp background for React heroes: soft gradient shapes that drift and melt.

  • Scrubbable Video Reveal component preview

    Scrubbable Video Reveal

    An Apple-style image sequence scrubbed frame by frame on canvas, following your hand as you scroll in either direction.