Agents

DynamicNotification

Experimental

Dynamic Island-style AI notification pill with a thinking state that morphs into a reply bubble — token-driven surface, WebGL Siri glass, or real refractive liquid glass.

Version

Assistant

It'll be fantastic weather for your upcoming tennis lesson this Sunday.

Tap the island to answer

Composition

The preferred shape for composing the installed agent from its exported parts.

Parts

Exported compound parts from the installed source.

DynamicNotification

├── DynamicNotificationIsland

├── DynamicNotificationGlass

├── DynamicNotificationLiquid

├── DynamicNotificationPill

├── DynamicNotificationIndicator

├── DynamicNotificationContent

├── DynamicNotificationTitle

├── DynamicNotificationMessage

├── DynamicNotificationReply

├── DynamicNotificationReplyInput

├── DynamicNotificationReplySubmit

└── DynamicNotificationClose

Every version ships from this one registry item, so the install command is identical — the picker only swaps the documented composition; switching versions later is a call-site change, not a reinstall.

Registry command

npx shadcn@latest add http://127.0.0.1:3000/r/refined/dynamic-notification.json

See registry manifest

Usage

import {

DynamicNotification,

DynamicNotificationContent,

DynamicNotificationGlass,

DynamicNotificationIndicator,

DynamicNotificationIsland,

DynamicNotificationMessage,

DynamicNotificationPill,

DynamicNotificationReply,

DynamicNotificationReplyInput,

DynamicNotificationReplySubmit,

} from "@/components/refined-ui/dynamic-notification";

// Wire the island to a Mastra agent: surface the latest assistant message as the notification,

// send the inline reply back through your agent client. `loading` holds the "thinking" blob

// (aurora animating) while the agent streams, then the answer reveals with the word cascade.

export function Example({

latestAssistantText,

sendMessage,

isResponding,

}: {

latestAssistantText: string;

sendMessage: (text: string) => void;

isResponding: boolean;

}) {

return (

<DynamicNotification

variant="glass"

loading={isResponding}

onReply={({ value, clear }) => {

sendMessage(value);

clear();

}}

>

<DynamicNotificationIsland>

<DynamicNotificationGlass />

<DynamicNotificationPill>

<DynamicNotificationIndicator />

Assistant

</DynamicNotificationPill>

<DynamicNotificationContent>

<DynamicNotificationMessage>{latestAssistantText}</DynamicNotificationMessage>

<DynamicNotificationReply>

<DynamicNotificationReplyInput placeholder="Answer…" />

<DynamicNotificationReplySubmit />

</DynamicNotificationReply>

</DynamicNotificationContent>

</DynamicNotificationIsland>

</DynamicNotification>

);

}

Installed dependencies

Installed with this agent because the visible component depends on them; they are support files, not separate product surfaces.

Behavior hooksrc/registry/hooks/use-dynamic-notification.tsHook

Siri-glass WebGL enginesrc/registry/sources/refined/dynamic-notification-glass.tsSupport

Refractive liquid WebGL enginesrc/registry/sources/refined/dynamic-notification-liquid.tsSupport

Island motion (morph choreography)src/registry/sources/refined/dynamic-notification.cssSupport

Raw code

Primary installed agent source (shared by every version)

Component

src/registry/sources/refined/dynamic-notification.tsx

Primitives

This agent composes these library primitives, installed under components/refined-ui/ui/*.

Buttoncomponents/refined-ui/ui/button.tsxLibrary slot

Refined UI