"use client"; import { bgShadow } from "@/lib/utils"; import { Compass, Feather, FlameKindling, Moon, type LucideIcon, } from "lucide-react"; import { AnimatePresence, LayoutGroup, MotionConfig, motion, useReducedMotion, } from "motion/react"; import { useState } from "react"; type DockDirection = -1 | 0 | 1; type DockItem = { id: string; label: string; icon: LucideIcon; tone: string; eyebrow: string; paragraph: string; cue: string; }; type MorphingActionDockProps = { items?: DockItem[]; className?: string; defaultActiveId?: string; }; const DOCK_ITEMS: DockItem[] = [ { id: "signal", label: "Signal", icon: Compass, tone: "from-zinc-900 via-zinc-800 to-zinc-700", eyebrow: "Clear Direction", paragraph: "A good interface reduces the number of things a person has to keep in their head. It points gently, removes hesitation, and lets the next action feel obvious without being loud.", cue: "Structure the next step", }, { id: "craft", label: "Craft", icon: Feather, tone: "from-neutral-900 via-neutral-800 to-stone-700", eyebrow: "Quiet Detail", paragraph: "The details that make software feel expensive are usually small: the right easing, a button that answers the finger, a surface that appears from where your eye already is.", cue: "Tune the invisible parts", }, { id: "energy", label: "Energy", icon: FlameKindling, tone: "from-slate-900 via-zinc-800 to-neutral-700", eyebrow: "Motion With Intent", paragraph: "Animation should explain a state change, not decorate a delay. When motion has a job, it makes the product feel quicker, more spatial, and easier to trust.", cue: "Use motion as feedback", }, { id: "calm", label: "Calm", icon: Moon, tone: "from-black via-neutral-800 to-zinc-700", eyebrow: "Lower The Noise", paragraph: "The strongest components know when to disappear. They hold their shape, avoid surprise, and give people a place to rest while they decide what to do next.", cue: "Keep the surface steady", }, ]; const spring = { type: "spring" as const, duration: 0.46, bounce: 0.16, }; const contentSpring = { type: "spring" as const, duration: 0.5, bounce: 0, }; const fastOut = [0.4, 0, 0.2, 1] as const; const contentVariants = { enter: (direction: DockDirection) => ({ opacity: 0, x: direction === 0 ? 0 : direction > 0 ? "110%" : "-110%", }), center: { opacity: 1, x: 0, }, exit: (direction: DockDirection) => ({ opacity: 0, x: direction === 0 ? 0 : direction > 0 ? "-110%" : "110%", }), }; function cn(...classes: Array) { return classes.filter(Boolean).join(" "); } export function MorphingActionDock({ items = DOCK_ITEMS, className, defaultActiveId = DOCK_ITEMS[0]?.id, }: MorphingActionDockProps) { const shouldReduceMotion = useReducedMotion(); const [activeId, setActiveId] = useState(defaultActiveId); const [pinnedId, setPinnedId] = useState(null); const [isDockOpen, setIsDockOpen] = useState(false); const [direction, setDirection] = useState(1); const activeItem = items.find((item) => item.id === activeId) ?? items[0]; const activeIndex = Math.max( 0, items.findIndex((item) => item.id === activeItem?.id) ); function setActiveById(id: string, source: "pointer" | "keyboard" | "press") { const nextIndex = items.findIndex((item) => item.id === id); if (nextIndex === -1 || id === activeId) { return; } if (source === "keyboard" || shouldReduceMotion) { setDirection(0); } else { setDirection(nextIndex > activeIndex ? 1 : -1); } setActiveId(id); } function setPointerActive(id: string) { setActiveById(id, "pointer"); } function togglePinned(id: string) { setActiveById(id, "press"); setPinnedId((current) => (current === id ? null : id)); } function clearPointerActive() { if (pinnedId) { setActiveById(pinnedId, "pointer"); return; } setIsDockOpen(false); setActiveById(defaultActiveId, "pointer"); } if (!activeItem) { return null; } const contentDirection = shouldReduceMotion ? 0 : direction; return (

setIsDockOpen(true)} onBlurCapture={(event) => { if ( !event.currentTarget.contains(event.relatedTarget) && !pinnedId ) { clearPointerActive(); } }} onPointerEnter={() => setIsDockOpen(true)} onPointerLeave={clearPointerActive} >

{isDockOpen || pinnedId ? ( ) : null}

{items.map((item) => { const Icon = item.icon; const isActive = item.id === activeItem.id; const isItemPinned = pinnedId === item.id; return ( ); })}

); } export default MorphingActionDock;

Dependencies

Installation

Usage