{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dynamic-island", "type": "registry:ui", "title": "Dynamic Island", "description": "An Apple-style Dynamic Island that morphs between idle, ring, silent, and timer states with spring physics and blurred content cross-fades using Motion.", "dependencies": [ "motion" ], "files": [ { "path": "registry/crafterui/ui/dynamic-island.tsx", "type": "registry:ui", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n AnimatePresence,\n MotionConfig,\n motion,\n type Transition,\n} from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/** The visual state the Dynamic Island can morph between. */\nexport type IslandState = \"idle\" | \"ring\" | \"silent\" | \"timer\"\n\n/** Every state, in display order - handy for building your own controls. */\nexport const ISLAND_STATES: readonly IslandState[] = [\n \"idle\",\n \"ring\",\n \"silent\",\n \"timer\",\n]\n\nexport interface DynamicIslandProps {\n /**\n * Drive the state from outside (controlled). Leave undefined to let the\n * island own its state and start from `defaultState`. @default undefined\n */\n state?: IslandState\n /** State to start in when uncontrolled. @default \"silent\" */\n defaultState?: IslandState\n /** Extra classes for the outer wrapper. @default undefined */\n className?: string\n /** Called whenever the state changes, from either the caller or the timer. @default undefined */\n onStateChange?: (state: IslandState) => void\n /**\n * Total seconds the timer state counts down from.\n * @default 30\n */\n timerSeconds?: number\n}\n\n/** Spring used for the island morph (size + radius) and the toggle thumb slide. */\nconst ISLAND_SPRING: Transition = {\n type: \"spring\",\n stiffness: 380,\n damping: 30,\n mass: 0.9,\n}\n\n/** Tween for the content cross-fade. */\nconst CONTENT_TWEEN: Transition = {\n duration: 0.22,\n ease: \"easeOut\",\n}\n\n/** Per-state geometry of the pill. */\nconst GEOMETRY: Record<\n IslandState,\n { width: number; height: number; radius: number }\n> = {\n idle: { width: 96, height: 28, radius: 32 },\n ring: { width: 148, height: 28, radius: 32 },\n silent: { width: 148, height: 28, radius: 32 },\n timer: { width: 264, height: 52, radius: 26 },\n}\n\n/**\n * Apple's system accents for each state. Exported so callers can colour their\n * own controls to match - these are the replica's fixed palette, not theme\n * tokens, because the island itself is always the device's black pill.\n */\nexport const ISLAND_ACCENTS: Partial> = {\n ring: \"#30D158\",\n silent: \"#FD4F30\",\n timer: \"#E9A23C\",\n}\n\nconst SILENT_RED = ISLAND_ACCENTS.silent!\nconst RING_GREEN = ISLAND_ACCENTS.ring!\nconst TIMER_AMBER = ISLAND_ACCENTS.timer!\n\n/** Cross-fade variants: blur + scale in/out, Apple-style. */\nconst fade = {\n initial: { opacity: 0, filter: \"blur(4px)\", scale: 0.9 },\n animate: { opacity: 1, filter: \"blur(0px)\", scale: 1 },\n exit: { opacity: 0, filter: \"blur(4px)\", scale: 0.9 },\n}\n\nfunction BellIcon() {\n return (\n \n \n \n )\n}\n\n/** The diagonal slash that \"draws\" across the bell to mean silent. */\nfunction BellSlash({ visible }: { visible: boolean }) {\n return (\n
\n
\n \n
\n
\n
\n \n
\n
\n )\n}\n\n/**\n * Compact ring/silent display. A single colored thumb slides between the\n * bell (left) and the label (right), recoloring red<->green, while the bell\n * gains/loses its slash and the label swaps Silent<->Ring.\n */\nfunction CompactContent({ state }: { state: \"ring\" | \"silent\" }) {\n const silent = state === \"silent\"\n return (\n
\n {/* Sliding thumb: left+red+narrow for Silent, right+green+wide for Ring. */}\n \n\n {/* Bell, fixed on the left. Sits on the red thumb when silent. */}\n \n \n \n \n\n {/* Label, fixed on the right. Sits on the green thumb when ringing. */}\n
\n \n {silent ? (\n \n Silent\n \n ) : (\n \n Ring\n \n )}\n \n
\n
\n )\n}\n\nfunction PauseGlyph() {\n return (\n \n \n \n \n )\n}\n\nfunction PlayGlyph() {\n return (\n \n \n \n )\n}\n\nfunction CloseGlyph() {\n return (\n \n \n \n )\n}\n\n/** Timer content: amber pause + gray cancel controls and an amber countdown. */\nfunction TimerContent({\n seconds,\n onCancel,\n}: {\n seconds: number\n onCancel: () => void\n}) {\n const [remaining, setRemaining] = React.useState(seconds)\n const [paused, setPaused] = React.useState(false)\n\n React.useEffect(() => {\n setRemaining(seconds)\n setPaused(false)\n }, [seconds])\n\n React.useEffect(() => {\n if (paused) return\n const id = window.setInterval(() => {\n setRemaining((r) => (r <= 0 ? 0 : r - 1))\n }, 1000)\n return () => window.clearInterval(id)\n }, [paused])\n\n const mm = Math.floor(remaining / 60)\n const ss = remaining % 60\n\n return (\n \n setPaused((p) => !p)}\n aria-label={paused ? \"Resume timer\" : \"Pause timer\"}\n // White ring, not the theme's: these sit on the pill's fixed black, where\n // outline-foreground would be near-black on black under the light theme.\n className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-full transition-transform outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white active:scale-95\"\n style={{ backgroundColor: TIMER_AMBER }}\n >\n {paused ? : }\n \n \n \n \n
\n \n Timer\n \n \n {mm}:{ss.toString().padStart(2, \"0\")}\n \n
\n
\n )\n}\n\n/**\n * An Apple \"Dynamic Island\": a pure-black pill that morphs its size,\n * radius and content between idle / ring / silent / timer states with\n * spring physics and blurred content cross-fades.\n *\n * Works uncontrolled (`defaultState`) or controlled (`state` + `onStateChange`).\n * It renders only the pill - drive it from your own UI, or copy the control\n * strip out of the demo.\n */\nexport function DynamicIsland({\n state: controlledState,\n defaultState = \"silent\",\n className,\n onStateChange,\n timerSeconds = 30,\n}: DynamicIslandProps) {\n const [uncontrolled, setUncontrolled] =\n React.useState(defaultState)\n const state = controlledState ?? uncontrolled\n\n const setState = React.useCallback(\n (next: IslandState) => {\n if (controlledState === undefined) setUncontrolled(next)\n onStateChange?.(next)\n },\n [controlledState, onStateChange]\n )\n\n const geo = GEOMETRY[state]\n\n return (\n // One provider rather than a reduced-motion branch on each of the eight\n // transitions below: `user` keeps the opacity cross-fades and drops the\n // spring-driven size and radius morph, which is the part that moves.\n \n
\n \n \n {state === \"idle\" && (\n \n )}\n {state === \"timer\" && (\n \n setState(\"idle\")}\n />\n \n )}\n {(state === \"ring\" || state === \"silent\") && (\n \n \n \n )}\n \n \n
\n \n )\n}\n" } ] }