motion-ui-skill 2.0.0

package/components/motion/avatar-group.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useState } from "react";
+import { SPRING_BOUNCE, SPRING_LAYOUT } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export interface AvatarItem {
+  id: string;
+  name: string;
+  src?: string;
+  fallback?: string;
+  status?: "online" | "offline" | "busy";
+}
+
+export interface AvatarGroupProps extends Omit<HTMLMotionProps<"div">, "children"> {
+  avatars: AvatarItem[];
+  max?: number;
+  size?: "sm" | "md" | "lg";
+  spreadDistance?: number;
+  className?: string;
+}
+
+const SIZE_CONFIGS = {
+  sm: { size: "size-8", text: "text-xs", overlap: "-space-x-2", status: "size-2" },
+  md: { size: "size-10", text: "text-sm", overlap: "-space-x-3", status: "size-2.5" },
+  lg: { size: "size-12", text: "text-base", overlap: "-space-x-4", status: "size-3" },
+};
+
+const STATUS_COLORS = {
+  online: "bg-emerald-500",
+  offline: "bg-slate-400",
+  busy: "bg-rose-500",
+};
+
+export function AvatarGroup({
+  avatars,
+  max = 5,
+  size = "md",
+  spreadDistance = 22,
+  className,
+  ...props
+}: AvatarGroupProps) {
+  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
+  const shouldReduceMotion = useReducedMotion();
+
+  const config = SIZE_CONFIGS[size];
+  const visibleAvatars = avatars.slice(0, max);
+  const excessCount = avatars.length - max;
+
+  return (
+    <motion.div
+      role="group"
+      aria-label="User avatar group"
+      className={cn("inline-flex items-center isolate py-2 px-3", className)}
+      onPointerLeave={() => setHoveredIdx(null)}
+      {...props}
+    >
+      {visibleAvatars.map((avatar, idx) => {
+        const isHovered = hoveredIdx === idx;
+
+        // Calculate magnetic spread offset for neighbors
+        let xOffset = 0;
+        if (hoveredIdx !== null && !shouldReduceMotion) {
+          const diff = idx - hoveredIdx;
+          if (diff !== 0) {
+            // Distance-based falloff: closer neighbors spread more
+            const dir = Math.sign(diff);
+            xOffset = dir * (spreadDistance / (1 + (Math.abs(diff) - 1) * 0.5));
+          }
+        }
+
+        return (
+          <motion.div
+            key={avatar.id}
+            onPointerEnter={() => setHoveredIdx(idx)}
+            animate={{
+              x: xOffset,
+              scale: isHovered && !shouldReduceMotion ? 1.2 : 1,
+              zIndex: isHovered ? 40 : 10 + idx,
+            }}
+            transition={SPRING_BOUNCE}
+            className={cn(
+              "relative cursor-pointer select-none rounded-full ring-2 ring-background focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring",
+              config.size,
+              idx > 0 && "-ml-3"
+            )}
+            tabIndex={0}
+            aria-label={avatar.name}
+          >
+            {/* Avatar Image or Fallback */}
+            <div className="relative flex size-full items-center justify-center overflow-hidden rounded-full bg-muted font-medium text-foreground">
+              {avatar.src ? (
+                <img
+                  src={avatar.src}
+                  alt={avatar.name}
+                  className="size-full object-cover"
+                />
+              ) : (
+                <span className={config.text}>
+                  {avatar.fallback || avatar.name.slice(0, 2).toUpperCase()}
+                </span>
+              )}
+            </div>
+
+            {/* Status Dot */}
+            {avatar.status && (
+              <span
+                className={cn(
+                  "absolute bottom-0 right-0 rounded-full ring-2 ring-background",
+                  config.status,
+                  STATUS_COLORS[avatar.status]
+                )}
+              />
+            )}
+
+            {/* Tooltip on Hover */}
+            <AnimatePresence>
+              {isHovered && (
+                <motion.div
+                  initial={{ opacity: 0, y: 6, scale: 0.9 }}
+                  animate={{ opacity: 1, y: -4, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.9, transition: { duration: 0.1 } }}
+                  transition={SPRING_LAYOUT}
+                  className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 whitespace-nowrap rounded-lg bg-popover px-2.5 py-1 text-xs font-medium text-popover-foreground shadow-md border border-border pointer-events-none"
+                >
+                  {avatar.name}
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </motion.div>
+        );
+      })}
+
+      {/* Overflow Badge */}
+      {excessCount > 0 && (
+        <div
+          className={cn(
+            "relative -ml-3 flex items-center justify-center rounded-full bg-muted font-semibold text-muted-foreground ring-2 ring-background tabular-nums",
+            config.size,
+            config.text
+          )}
+        >
+          +{excessCount}
+        </div>
+      )}
+    </motion.div>
+  );
+}

package/components/motion/bloom-menu.tsx

@@ -0,0 +1,216 @@
+"use client";
+
+import {
+  Bell,
+  FileText,
+  FolderClosed,
+  LayoutGrid,
+  Link,
+  Plus,
+  Table,
+  X,
+} from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { type ComponentType, useEffect, useId, useRef, useState } from "react";
+import { EASE_OUT } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+type MenuItem = { label: string; icon: ComponentType<{ className?: string }> };
+
+const ITEMS: MenuItem[] = [
+  { label: "Doc", icon: FileText },
+  { label: "Board", icon: LayoutGrid },
+  { label: "Table", icon: Table },
+  { label: "Folder", icon: FolderClosed },
+  { label: "Reminder", icon: Bell },
+  { label: "Link", icon: Link },
+];
+
+// Folder-open feel: a touch of overshoot as the panel expands, kept subtle.
+const SPRING_FOLDER = {
+  type: "spring",
+  stiffness: 300,
+  damping: 32,
+  mass: 0.9,
+} as const;
+
+export interface BloomMenuProps {
+  items?: MenuItem[];
+  onSelect?: (label: string) => void;
+  className?: string;
+}
+
+export function BloomMenu({
+  items = ITEMS,
+  onSelect,
+  className,
+}: BloomMenuProps) {
+  const [open, setOpen] = useState(false);
+  const reduce = useReducedMotion();
+  const layoutId = useId();
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    const onPointer = (e: PointerEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node))
+        setOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("pointerdown", onPointer);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("pointerdown", onPointer);
+    };
+  }, [open]);
+
+  const morph = reduce ? { duration: 0.15 } : SPRING_FOLDER;
+
+  return (
+    <div ref={ref} className={cn("relative inline-flex", className)}>
+      {/* spacer fixes the anchor to the trigger size */}
+      <div className="h-11 w-36" aria-hidden />
+
+      {/* Centering box sized to the OPEN panel and centered on the trigger.
+          place-items-center only centers an item that fits its cell, so the cell
+          must be as wide as the panel — otherwise the overflow left-anchors and
+          the panel expands rightward. The box is a fixed size per viewport (vw
+          doesn't change mid-animation), so its -translate centering never drifts
+          the way a content-sized wrapper would. Both states share its center, so
+          the morph grows from the middle outward in every direction. */}
+      <div className="pointer-events-none absolute left-1/2 top-1/2 z-30 grid h-[300px] w-[min(86vw,420px)] -translate-x-1/2 -translate-y-1/2 place-items-center [&>*]:pointer-events-auto">
+        {/* popLayout pulls the exiting trigger out of grid flow at once, so the
+            grid never briefly holds two rows and shoves the panel off-center */}
+        <AnimatePresence initial={false} mode="popLayout">
+          {open ? (
+            <motion.div
+              key="panel"
+              layoutId={layoutId}
+              transition={morph}
+              style={{ borderRadius: 16 }}
+              className="w-[min(86vw,420px)] overflow-hidden border border-border bg-card"
+            >
+              <motion.div
+                // `layout` lets framer undo the box's morph scaling so this
+                // content stays crisp instead of stretching with the resize.
+                layout
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: reduce ? 0 : 0.12, duration: 0.2 }}
+              >
+                {/* header */}
+                <div className="flex items-center justify-between border-b border-border px-4 py-3">
+                  <span className="text-sm font-medium text-muted-foreground">
+                    Create
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => setOpen(false)}
+                    aria-label="Close menu"
+                    className="text-muted-foreground transition-colors hover:text-foreground"
+                  >
+                    <X className="h-4 w-4" />
+                  </button>
+                </div>
+
+                {/* grid */}
+                <motion.div
+                  // Iris reveal: start as a small box at the grid center and open
+                  // outward to all four corners, so the menu grows from the middle
+                  // in every direction instead of wiping top-down.
+                  initial={
+                    reduce ? false : { clipPath: "inset(45% 34% 45% 34%)" }
+                  }
+                  animate={{ clipPath: "inset(0% 0% 0% 0%)" }}
+                  transition={{
+                    delay: reduce ? 0 : 0.08,
+                    duration: 0.45,
+                    ease: EASE_OUT,
+                  }}
+                  className="grid grid-cols-3"
+                >
+                  {items.map((item, i) => {
+                    // Radial stagger: delay each item by its distance from the
+                    // grid center so the four corners animate together and the
+                    // open reads as center-out, not corner-by-corner.
+                    const cols = 3;
+                    const rows = Math.ceil(items.length / cols);
+                    const col = i % cols;
+                    const row = Math.floor(i / cols);
+                    const dist = Math.hypot(
+                      col - (cols - 1) / 2,
+                      row - (rows - 1) / 2,
+                    );
+                    return (
+                      <button
+                        key={item.label}
+                        type="button"
+                        onClick={() => {
+                          onSelect?.(item.label);
+                          setOpen(false);
+                        }}
+                      // Static cell with hairline borders (no animated fill) so
+                      // the grid lines never flicker as items stagger in. Only the
+                      // inner content animates.
+                      className={cn(
+                        "flex items-center justify-center px-3 py-6 text-muted-foreground transition-colors hover:text-foreground",
+                        i % 3 !== 2 && "border-r border-border",
+                        i < 3 && "border-b border-border",
+                      )}
+                    >
+                      <motion.span
+                        initial={
+                          reduce
+                            ? { opacity: 0 }
+                            : { opacity: 0, scale: 0.85, filter: "blur(6px)" }
+                        }
+                        animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
+                        transition={{
+                          delay: reduce ? 0 : 0.1 + dist * 0.07,
+                          type: "spring",
+                          stiffness: 440,
+                          damping: 34,
+                        }}
+                        className="flex flex-col items-center gap-2"
+                      >
+                        <item.icon className="h-5 w-5" />
+                        <span className="text-sm font-medium">{item.label}</span>
+                      </motion.span>
+                    </button>
+                    );
+                  })}
+                </motion.div>
+              </motion.div>
+            </motion.div>
+          ) : (
+            <motion.button
+              key="trigger"
+              type="button"
+              layoutId={layoutId}
+              transition={morph}
+              style={{ borderRadius: 16 }}
+              onClick={() => setOpen(true)}
+              aria-haspopup="menu"
+              aria-expanded={open}
+              whileTap={reduce ? undefined : { scale: 0.97 }}
+              className="inline-flex h-11 w-36 items-center justify-center border border-border bg-card text-sm font-medium text-foreground"
+            >
+              {/* own `layout` counter-scales the label so it stays crisp while the
+                  button box morphs, instead of stretching with it */}
+              <motion.span
+                layout
+                className="inline-flex items-center gap-2 whitespace-nowrap"
+              >
+                Create
+                <Plus className="h-4 w-4" />
+              </motion.span>
+            </motion.button>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}

package/components/motion/bottom-sheet.tsx

@@ -0,0 +1,249 @@
+"use client";
+
+import {
+  AnimatePresence,
+  motion,
+  type PanInfo,
+  useDragControls,
+  useReducedMotion,
+} from "motion/react";
+import { type ReactNode, useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { EASE_DRAWER } from "@/lib/ease";
+import { PresenceGate } from "@/lib/presence-gate";
+import { TOUCH_GESTURE_CONTENT_CLASS } from "@/lib/touch";
+import { cn } from "@/lib/utils";
+
+// Vaul-style glide: a long, fully-damped tween reads smoother than a spring on
+// open — no settle/overshoot, just one clean decel. Same curve drives the
+// backdrop fade so the surface and scrim move as one.
+const DRAWER = { duration: 0.5, ease: EASE_DRAWER } as const;
+
+export interface BottomSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Heights (0-1 = fraction of viewport, or "auto"). First entry is default. */
+  snapPoints?: (number | "auto")[];
+  defaultSnap?: number;
+  title?: string;
+  description?: string;
+  children?: ReactNode;
+  className?: string;
+  /** Min drag distance (px) past current snap to dismiss. */
+  dismissThreshold?: number;
+}
+
+export function BottomSheet({
+  open,
+  onOpenChange,
+  snapPoints = [0.5, 0.92],
+  defaultSnap = 0,
+  title,
+  description,
+  children,
+  className,
+  dismissThreshold = 120,
+}: BottomSheetProps) {
+  const [snap, setSnap] = useState(defaultSnap);
+  const [mounted, setMounted] = useState(false);
+  const dragControls = useDragControls();
+  const sheetRef = useRef<HTMLDivElement>(null);
+  const reduce = useReducedMotion();
+  const heightRef = useRef(0);
+  const uid = useId();
+  const titleId = `${uid}-title`;
+  const descriptionId = `${uid}-description`;
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (open) setSnap(defaultSnap);
+  }, [open, defaultSnap]);
+
+  // Lock background scroll while open. overflow:hidden alone is ignored by
+  // iOS Safari — boundary scrolls inside the sheet chain to the page, which
+  // scrolls underneath and ends up somewhere else on close. position:fixed
+  // is the lock that actually holds; restore the scroll position after.
+  useEffect(() => {
+    if (!open) return;
+    const body = document.body;
+    const scrollY = window.scrollY;
+    const prev = {
+      position: body.style.position,
+      top: body.style.top,
+      left: body.style.left,
+      right: body.style.right,
+      overflow: body.style.overflow,
+    };
+    body.style.position = "fixed";
+    body.style.top = `-${scrollY}px`;
+    body.style.left = "0";
+    body.style.right = "0";
+    body.style.overflow = "hidden";
+
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onOpenChange(false);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      body.style.position = prev.position;
+      body.style.top = prev.top;
+      body.style.left = prev.left;
+      body.style.right = prev.right;
+      body.style.overflow = prev.overflow;
+      window.scrollTo(0, scrollY);
+    };
+  }, [open, onOpenChange]);
+
+  const onDragEnd = (_: unknown, info: PanInfo) => {
+    const velocity = info.velocity.y;
+    const offset = info.offset.y;
+
+    // Strong downward fling or large drag → dismiss.
+    if (velocity > 600 || offset > dismissThreshold) {
+      const smaller = snapPoints.map((_, i) => i).filter((i) => i < snap);
+      if (smaller.length && velocity < 800 && offset < dismissThreshold * 1.6) {
+        setSnap(smaller[smaller.length - 1]);
+      } else {
+        onOpenChange(false);
+      }
+      return;
+    }
+
+    // Strong upward fling → next snap.
+    if (velocity < -500) {
+      setSnap((current) => Math.min(snapPoints.length - 1, current + 1));
+      return;
+    }
+
+    // Otherwise snap to nearest by current offset.
+    setSnap((current) => {
+      if (offset > 80 && current > 0) return current - 1;
+      if (offset < -80 && current < snapPoints.length - 1) return current + 1;
+      return current;
+    });
+  };
+
+  const snapValue = snapPoints[snap];
+  const heightStyle =
+    snapValue === "auto"
+      ? { maxHeight: "92vh" }
+      : { height: `${snapValue * 100}vh` };
+
+  // Portal to <body>: an ancestor with backdrop-filter or transform becomes
+  // the containing block for fixed descendants, which would position the
+  // sheet against that ancestor instead of the viewport.
+  if (!mounted) return null;
+
+  // Two fixed siblings, no wrapper: the scrim spans the viewport edges but
+  // carries a colour, and the sheet is pinned to the bottom, stops short of the
+  // top edge at every snap point the component ships, and paints an opaque
+  // surface either way. Both hang off `PresenceGate`, so interaction releases in
+  // the same commit that starts the exit rather than when it ends. See
+  // tests/fixed-overlay-edge-sampling.test.tsx.
+  return createPortal(
+    <AnimatePresence>
+      {open ? (
+        <PresenceGate key="backdrop">
+          {({ gate }) => (
+            <motion.button
+              type="button"
+              aria-label="Close bottom sheet"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={DRAWER}
+              {...gate}
+              onClick={() => onOpenChange(false)}
+              // A dim scrim with a light blur. backdrop-blur is GPU-expensive and
+              // re-rasterizes every frame the sheet drags over it; a small radius
+              // plus more opacity keeps the glass look without the jank.
+              className="pointer-events-auto fixed inset-0 z-50 bg-background/40 backdrop-blur-sm"
+            />
+          )}
+        </PresenceGate>
+      ) : null}
+      {open ? (
+        <PresenceGate key="sheet">
+          {({ gate }) => (
+            <motion.div
+              ref={sheetRef}
+              drag="y"
+              dragControls={dragControls}
+              dragListener={false}
+              dragConstraints={{ top: 0, bottom: 0 }}
+              dragElastic={{ top: 0.02, bottom: 0.4 }}
+              dragMomentum={false}
+              onDragEnd={onDragEnd}
+              initial={reduce ? { y: 0, opacity: 0 } : { y: "100%" }}
+              animate={reduce ? { y: 0, opacity: 1 } : { y: 0 }}
+              exit={reduce ? { y: 0, opacity: 0 } : { y: "100%" }}
+              transition={reduce ? { duration: 0.18, ease: EASE_DRAWER } : DRAWER}
+              onAnimationComplete={() => {
+                if (sheetRef.current)
+                  heightRef.current = sheetRef.current.offsetHeight;
+              }}
+              {...gate}
+              style={{ ...heightStyle, ...gate.style }}
+              className={cn(
+                "pointer-events-auto fixed bottom-0 left-0 right-0 z-50 mx-auto flex max-w-2xl flex-col overflow-hidden rounded-t-3xl will-change-transform",
+                "border border-border bg-background shadow-xl",
+                className,
+              )}
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby={title ? titleId : undefined}
+              aria-describedby={description ? descriptionId : undefined}
+              aria-label={title ? undefined : "Bottom sheet"}
+            >
+              <div className="flex flex-col items-center px-4 pb-2 pt-3">
+                {/* Drag only the pill so the title and description stay selectable. */}
+                <div
+                  onPointerDown={(event) => dragControls.start(event)}
+                  // A slow pull must not hand the gesture to iOS's callout,
+                  // which would leave the sheet frozen mid-drag.
+                  className={cn(
+                    "flex cursor-grab touch-none items-center justify-center py-1 active:cursor-grabbing",
+                    TOUCH_GESTURE_CONTENT_CLASS,
+                  )}
+                >
+                  <div className="h-1.5 w-10 rounded-full bg-muted-foreground/40" />
+                </div>
+                {title || description ? (
+                  <div className="mt-2 w-full">
+                    {title ? (
+                      <h2
+                        id={titleId}
+                        className="text-base font-semibold text-foreground"
+                      >
+                        {title}
+                      </h2>
+                    ) : null}
+                    {description ? (
+                      <p
+                        id={descriptionId}
+                        className="mt-0.5 text-sm text-muted-foreground"
+                      >
+                        {description}
+                      </p>
+                    ) : null}
+                  </div>
+                ) : null}
+              </div>
+              {/* overscroll-contain stops boundary scrolls from chaining to the page. */}
+              <div className="flex-1 overflow-y-auto overscroll-contain px-4 pb-6">{children}</div>
+            </motion.div>
+          )}
+        </PresenceGate>
+      ) : null}
+    </AnimatePresence>,
+    document.body,
+  );
+}