{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "launch-dock", "type": "registry:ui", "title": "Launch Dock", "description": "A dock of app icons under a window. Pick one and its window grows up out of the icon in 0.3s, over the open one, which dissolves where it is. One label glides over the dock as you point, and with autoplay the dot under the open app fills like a timer before the next one launches.", "author": "KeyframeUI ", "categories": [ "showcase", "testimonials", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/launch-dock", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/launch-dock.tsx", "type": "registry:ui", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n animate,\n motion,\n useInView,\n useMotionValue,\n useReducedMotion,\n type AnimationPlaybackControls,\n} from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Keep:\n * - Windows animate only transform and opacity, as hardware animations on their own layers, and\n * closing animates opacity alone; nothing repaints mid-flight.\n * - The open window never moves: it dissolves in place under the new one (z-index 2 over 1), which\n * is opaque from its first frame behind the icon, so two windows never cross or blend.\n * - A pick measures its icon before any state changes, so the launch's first frame never waits on\n * layout.\n * - A launch turns round from wherever it is: a window still dissolving comes back in place instead\n * of growing from its icon again.\n * - Closed windows stay mounted, `hidden` and `inert`, as tabpanels of a tablist with a roving\n * `tabIndex`, so their content and state survive a switch.\n */\nconst TIMING = {\n /** A window growing up out of its icon, in seconds (the `duration` prop) and its curve. */\n launch: { duration: 0.3, ease: [0.22, 1, 0.36, 1] },\n /** The open one fading where it is, under the new one, at the default `duration`. */\n dissolve: { duration: 0.22, ease: \"linear\" },\n /** An icon rising under the pointer. */\n lift: { type: \"spring\", visualDuration: 0.25, bounce: 0.2 },\n /** And dipping while it's pressed. */\n press: { type: \"spring\", visualDuration: 0.12, bounce: 0 },\n /** The label and the dot moving between icons. */\n glide: { type: \"spring\", visualDuration: 0.26, bounce: 0 },\n /** The label appearing, in seconds. */\n show: { duration: 0.15, ease: [0.22, 1, 0.36, 1] },\n /** And going, in seconds. */\n hide: { duration: 0.12, ease: [0.22, 1, 0.36, 1] },\n /** Windows crossfading under reduced motion, in seconds. */\n fade: { duration: 0.2, ease: [0.22, 1, 0.36, 1] },\n /** The label waiting after the pointer leaves an icon, in ms. */\n leave: 120,\n /** The label staying over a tapped icon, in ms. */\n touchLabel: 1200,\n /** Each app staying up when `autoplay` is `true`, in ms. */\n autoplay: 4500,\n} as const;\n\n/* ─────────────────────────────────────────────────────────\n * LAUNCH DOCK STORYBOARD\n *\n * rest a window over a dock of rounded icons. The open app's\n * window sits under the dock with its lower edge fading out\n * behind it, and a 4px dot marks its icon\n * hover under a mouse the icon you're on rises 6px and grows to\n * 1.1 on a quick spring with a little give. One label hangs\n * over the dock and glides from icon to icon, its width\n * following the name; it shows at once and waits 120ms\n * before it goes\n * launch pick an icon and, on the same frame, its window starts\n * growing up out of it: from a copy small enough to hide\n * behind the icon to full size in 0.3s on a strong ease-out,\n * so most of the growth is over in the first 0.1s. It's\n * opaque from the first frame (it starts hidden behind the\n * icon), so two apps never blend, and the dot slides across\n * dissolve the open window doesn't move: it dissolves where it is\n * (0.22s) while the new one grows over it, so nothing crosses\n * and the stage is never empty\n * smooth windows move by transform and opacity only, as hardware\n * animations on their own layers: nothing repaints while\n * they fly, and a busy page can't stall them. The icons are\n * measured at the click, before anything else happens\n * autoplay with autoplay the dot stretches into a 14px bar that fills\n * while an app is up (4.5s each), then the next one\n * launches. A pointer over the dock, focus inside it, a\n * hidden tab or the dock out of view pauses it; picking an\n * app stops it for good\n * again a launch turns round from wherever it is: click back fast\n * and a dissolving window comes back in place, never queues\n * touch a tap launches, and the label shows over the tapped icon\n * for 1.2s, since there's no hover to show it\n * keys the dock is a tablist. Tab lands on the open app, the\n * arrows move along and launch, Home and End jump to the\n * ends, and Tab carries on into the window, its tabpanel\n * reduced nothing flies or rises: windows crossfade in 0.2s, the\n * label fades, and autoplay stays off\n * ───────────────────────────────────────────────────────── */\n\nconst DOCK = {\n tuck: 0.9, // share of the icon a window's smallest copy fills, so it hides behind it\n rise: 6, // px an icon rises under the pointer\n grow: 1.1, // scale it grows to\n dip: 0.92, // scale while it's pressed\n feather: 0.28, // share of the window's height that fades out behind the dock\n dot: 4, // px; the open app's dot\n bar: 14, // px; the dot while autoplay counts down\n labelPad: 20, // px of padding around the label's text\n} as const;\n\n// The window's corners at rest, per frame.\nconst RADIUS = { window: 12, card: 20, none: 0 } as const;\nconst AT_REST = \"translate(0px, 0px) scale(1)\";\nconst DEFAULT_SIZE: [number, number] = [960, 600];\n\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nexport interface LaunchDockItem {\n /** A unique id. `value` and `onValueChange` use it. */\n id: string;\n /** The app's name: the label over the dock, the window's title and the icon's accessible name. */\n label: string;\n /** The dock icon. It's clipped to a rounded square, so a full-bleed `` or SVG tile both work. */\n icon: React.ReactNode;\n /** What the window shows. It's laid out at `windowSize` and scaled down to fit, like a screenshot. */\n content: React.ReactNode;\n /** The window's title bar text, when it should say more than the label: a domain, a file name. */\n title?: React.ReactNode;\n}\n\nexport interface LaunchDockProps\n extends Omit, \"defaultValue\" | \"onChange\" | \"children\"> {\n /** The apps, in dock order. */\n items: LaunchDockItem[];\n /** The open app's id, when you control it. */\n value?: string;\n /** The app that's open at first. Defaults to the first one. */\n defaultValue?: string;\n /** Called with an app's id whenever it launches, and why: the visitor picked it, or autoplay moved on. */\n onValueChange?: (id: string, reason: \"pick\" | \"autoplay\") => void;\n /** Launch the next app on its own every 4.5s until the visitor picks one. A number sets the time in ms. */\n autoplay?: boolean | number;\n /** The size each window's content is laid out at, in px. Narrower containers scale it down to fit. */\n windowSize?: [number, number];\n /** What the content sits in: a desktop window with a title bar, a plain card, or nothing at all. */\n frame?: \"window\" | \"card\" | \"none\";\n /** Fade the window's lower edge out behind the dock. Turn it off to keep all of the content in view; the dock then sits under the window. */\n fade?: boolean;\n /** Seconds a window takes to grow up out of its icon. The open one dissolves in proportion, so it's gone just before the new one lands. */\n duration?: number;\n /** The scale an icon grows to under the pointer. `1` keeps it still but for the rise. */\n hoverScale?: number;\n /** The dock's accessible name. */\n dockLabel?: string;\n /** Classes for the dock's surface: its fill, ring and shadow. */\n trayClassName?: string;\n /** Classes for each window's surface: its fill, ring and corners. */\n windowClassName?: string;\n}\n\n/** Where a window hides behind its icon, as the transform that puts it there (origin top left). */\ntype Docked = string;\n\n/* ── TitleBar ───────────────────────────────────────────── */\n\n// The window's chrome: three lights and a centered title. Purely drawn; the lights don't act.\nconst BAR = \"h-7 @[30rem]/launch-dock:h-9\";\n\nfunction TitleBar({ title }: { title: React.ReactNode }) {\n return (\n \n
\n \n \n \n
\n
\n {title}\n
\n \n );\n}\n\n/* ── DockWindow ─────────────────────────────────────────── */\n\n// One app's window. It stays mounted, so its images load early and its state survives, and is\n// hidden while closed. Opening animates only its transform and opacity, closing only its opacity,\n// and both run as hardware animations: the window is rastered once, never repainted mid-flight.\nconst DockWindow = React.memo(function DockWindow({\n item,\n open,\n frame,\n fade,\n reduced,\n duration,\n docked,\n width,\n height,\n tabId,\n panelId,\n className,\n}: {\n item: LaunchDockItem;\n open: boolean;\n frame: \"window\" | \"card\" | \"none\";\n fade: boolean;\n reduced: boolean;\n duration: number;\n docked: (id: string) => Docked | null;\n width: number;\n height: number;\n tabId: string;\n panelId: string;\n className?: string;\n}) {\n const [present, setPresent] = React.useState(open);\n if (open && !present) setPresent(true);\n\n const outerRef = React.useRef(null);\n const flight = React.useRef(null);\n // Settled (\"open\"/\"closed\") or on its way; a window still on its way turns round from where it is.\n const phase = React.useRef<\"open\" | \"closed\" | \"opening\" | \"closing\">(open ? \"open\" : \"closed\");\n // The `open` the window last moved for. Strict Mode replays effects on mount; this keeps that\n // replay (and any re-render that doesn't change `open`) from starting a flight.\n const shown = React.useRef(open);\n const rest = RADIUS[frame];\n\n React.useLayoutEffect(() => {\n if (shown.current === open) return;\n shown.current = open;\n const outer = outerRef.current;\n if (!outer) return;\n flight.current?.stop();\n const settled = phase.current === \"open\" || phase.current === \"closed\";\n phase.current = open ? \"opening\" : \"closing\";\n const done = () => {\n phase.current = open ? \"open\" : \"closed\";\n if (!open) setPresent(false);\n };\n\n const target = reduced || !open ? null : docked(item.id);\n if (!target && (open || reduced)) {\n flight.current = animate(\n outer,\n { transform: AT_REST, opacity: open ? [0, 1] : 0 },\n { ...TIMING.fade, transform: { duration: 0 }, onComplete: done },\n );\n } else if (open) {\n // From behind the icon on a fresh launch; from wherever it is if it was still leaving.\n flight.current = animate(\n outer,\n settled ? { transform: [target, AT_REST], opacity: 1 } : { transform: AT_REST, opacity: 1 },\n { ...TIMING.launch, duration, opacity: { duration: settled ? 0 : TIMING.fade.duration }, onComplete: done },\n );\n } else {\n // It stays put and dissolves under the window growing over it, so nothing crosses.\n const dissolve = TIMING.dissolve.duration * (duration / TIMING.launch.duration);\n flight.current = animate(outer, { opacity: 0 }, { ...TIMING.dissolve, duration: dissolve, onComplete: done });\n }\n }, [open, reduced, docked, item.id, duration]);\n\n React.useEffect(() => () => flight.current?.stop(), []);\n\n return (\n