motion-ui-skill 2.0.0

package/components/motion/haptic-pressable.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import {
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useEffect, useRef, useState } from "react";
+import { SPRING_PRESS } from "@/lib/ease";
+import { useHaptic, type HapticType } from "@/lib/hooks/use-haptic";
+import { cn } from "@/lib/utils";
+
+export interface HapticPressableProps extends HTMLMotionProps<"div"> {
+  children: React.ReactNode;
+  haptic?: HapticType;
+  pressScale?: number;
+  showRipple?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function HapticPressable({
+  children,
+  haptic = "selection",
+  pressScale = 0.96,
+  showRipple = true,
+  disabled = false,
+  className,
+  onClick,
+  onPointerDown,
+  ...props
+}: HapticPressableProps) {
+  const [ripples, setRipples] = useState<Array<{ id: number; x: number; y: number }>>([]);
+  const nextRippleId = useRef(0);
+  const rippleTimers = useRef(new Set<ReturnType<typeof setTimeout>>());
+  const shouldReduceMotion = useReducedMotion();
+  const triggerHaptic = useHaptic();
+
+  useEffect(() => () => {
+    rippleTimers.current.forEach(clearTimeout);
+  }, []);
+
+  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (disabled) return;
+    triggerHaptic(haptic);
+
+    if (showRipple && !shouldReduceMotion) {
+      const rect = e.currentTarget.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const id = ++nextRippleId.current;
+      setRipples((prev) => [...prev, { id, x, y }]);
+      const timer = setTimeout(() => {
+        setRipples((prev) => prev.filter((r) => r.id !== id));
+        rippleTimers.current.delete(timer);
+      }, 600);
+      rippleTimers.current.add(timer);
+    }
+
+    onPointerDown?.(e);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      triggerHaptic(haptic);
+      // @ts-ignore
+      onClick?.(e as any);
+    }
+  };
+
+  return (
+    <motion.div
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      aria-disabled={disabled || undefined}
+      onPointerDown={handlePointerDown}
+      onKeyDown={handleKeyDown}
+      onClick={disabled ? undefined : onClick}
+      whileTap={shouldReduceMotion || disabled ? undefined : { scale: pressScale }}
+      transition={SPRING_PRESS}
+      className={cn(
+        "relative overflow-hidden cursor-pointer select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      )}
+      {...props}
+    >
+      {/* Ripple Animation Effects */}
+      {ripples.map((ripple) => (
+        <span
+          key={ripple.id}
+          className="pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground/10 animate-[ping_0.6s_ease-out_forwards]"
+          style={{
+            left: ripple.x,
+            top: ripple.y,
+            width: 120,
+            height: 120,
+          }}
+        />
+      ))}
+
+      {children}
+    </motion.div>
+  );
+}

package/components/motion/hold-action-button.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import { motion, useReducedMotion, type HTMLMotionProps } from "motion/react";
+import {
+  forwardRef,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type PointerEvent,
+  type ReactNode,
+} from "react";
+import { EASE_OUT, SPRING_PRESS } from "@/lib/ease";
+import {
+  capturePointer,
+  releasePointer,
+  TOUCH_GESTURE_CLASS,
+} from "@/lib/touch";
+import { cn } from "@/lib/utils";
+
+export interface HoldActionButtonProps extends Omit<
+  HTMLMotionProps<"button">,
+  | "children"
+  | "type"
+  | "onClick"
+  | "onPointerDown"
+  | "onPointerUp"
+  | "onPointerCancel"
+  | "onPointerLeave"
+  | "onPointerMove"
+  | "onKeyDown"
+  | "onKeyUp"
+> {
+  children: ReactNode;
+  type?: "vertical" | "horizontal";
+  holdingLabel?: ReactNode;
+  completeLabel?: ReactNode;
+  holdDuration?: number;
+  onHoldComplete?: () => void;
+  fillClassName?: string;
+  labelClassName?: string;
+}
+
+export const HoldActionButton = forwardRef<
+  HTMLButtonElement,
+  HoldActionButtonProps
+>(function HoldActionButton(
+  {
+    children,
+    type = "vertical",
+    holdingLabel = "Keep holding",
+    completeLabel = "Done",
+    holdDuration = 1600,
+    onHoldComplete,
+    fillClassName,
+    labelClassName,
+    className,
+    disabled,
+    ...rest
+  },
+  ref,
+) {
+  const reduce = useReducedMotion();
+  const completedRef = useRef(false);
+  const [holding, setHolding] = useState(false);
+  const [completed, setCompleted] = useState(false);
+
+  const startHold = () => {
+    if (disabled || holding) return;
+    completedRef.current = false;
+    setCompleted(false);
+    setHolding(true);
+  };
+
+  const cancelHold = () => {
+    setHolding(false);
+    setCompleted(false);
+  };
+
+  const handlePointerDown = (event: PointerEvent<HTMLButtonElement>) => {
+    if (event.button !== 0) return;
+    // Start first: capture is a convenience, and a browser that refuses it
+    // must not take the hold down with it.
+    startHold();
+    capturePointer(event.currentTarget, event.pointerId);
+  };
+
+  const handlePointerUp = (event: PointerEvent<HTMLButtonElement>) => {
+    releasePointer(event.currentTarget, event.pointerId);
+    cancelHold();
+  };
+
+  const handlePointerLeave = (event: PointerEvent<HTMLButtonElement>) => {
+    // Only reached when the capture below was refused: a captured pointer gets
+    // no boundary events at all. A finger does not get this reading either way
+    // — WebKit fires leave repeatedly for a touch that never moved, which
+    // would cancel every hold on the frame it started.
+    if (event.pointerType !== "touch") cancelHold();
+  };
+
+  const handlePointerMove = (event: PointerEvent<HTMLButtonElement>) => {
+    // Leaving the button abandons the hold, and while the pointer is captured
+    // nothing announces that: no boundary events, and `touch-none` means a
+    // finger sliding off cannot scroll and so cannot cancel either. Measure it
+    // instead — off the button ends the hold, wherever the pointer then goes.
+    if (!holding) return;
+
+    const rect = event.currentTarget.getBoundingClientRect();
+    const outside =
+      event.clientX < rect.left ||
+      event.clientX > rect.right ||
+      event.clientY < rect.top ||
+      event.clientY > rect.bottom;
+
+    if (outside) cancelHold();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if ((event.key === " " || event.key === "Enter") && !event.repeat) {
+      event.preventDefault();
+      startHold();
+    }
+  };
+
+  const handleKeyUp = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      cancelHold();
+    }
+  };
+
+  const handleFillComplete = () => {
+    if (!holding || completedRef.current) return;
+    completedRef.current = true;
+    setCompleted(true);
+    onHoldComplete?.();
+  };
+
+  const active = holding || completed;
+  const activeTransform =
+    type === "horizontal" ? "translateX(0%)" : "translateY(0%)";
+  const idleTransform =
+    type === "horizontal" ? "translateX(-100%)" : "translateY(115%)";
+
+  return (
+    <motion.button
+      ref={ref}
+      type="button"
+      disabled={disabled}
+      aria-label={typeof children === "string" ? children : undefined}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onPointerCancel={cancelHold}
+      onPointerLeave={handlePointerLeave}
+      onKeyDown={handleKeyDown}
+      onKeyUp={handleKeyUp}
+      onContextMenu={(event) => event.preventDefault()}
+      whileTap={reduce || disabled ? undefined : { scale: 0.98 }}
+      transition={SPRING_PRESS}
+      className={cn(
+        "relative inline-grid h-16 min-w-72 touch-none place-items-center overflow-hidden rounded-[var(--hold-radius)] bg-primary px-8 text-primary-foreground",
+        "[--hold-radius:22px]",
+        TOUCH_GESTURE_CLASS,
+        "outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className,
+      )}
+      {...rest}
+    >
+      {/* Safari hands the fill its own compositing layer and then stops
+          applying the button's rounded overflow clip to it, so the liquid
+          bleeds past the corners. clip-path survives compositing. It lives on
+          this static layer rather than the button so it never cuts the focus
+          ring, and reads the same radius so the two cannot drift apart. */}
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 [clip-path:inset(0_round_var(--hold-radius))]"
+      >
+        <motion.span
+          aria-hidden="true"
+          initial={false}
+          animate={
+            reduce
+              ? { opacity: active ? 1 : 0, transform: "none" }
+              : {
+                  opacity: 1,
+                  transform: active ? activeTransform : idleTransform,
+                }
+          }
+          transition={
+            active
+              ? { duration: holdDuration / 1000, ease: "linear" }
+              : { duration: reduce ? 0.15 : 0.24, ease: EASE_OUT }
+          }
+          onAnimationComplete={handleFillComplete}
+          className={cn(
+            "absolute inset-0 bg-sky-400 will-change-[opacity,transform]",
+            fillClassName,
+          )}
+        >
+          {!reduce ? (
+            type === "horizontal" ? (
+              <motion.svg
+                viewBox="0 0 24 240"
+                preserveAspectRatio="none"
+                aria-hidden="true"
+                animate={{
+                  transform: active ? "translateY(-50%)" : "translateY(0%)",
+                }}
+                transition={{
+                  duration: 1.1,
+                  ease: "linear",
+                  repeat: active ? Number.POSITIVE_INFINITY : 0,
+                }}
+                className="absolute -right-5 top-0 h-[200%] w-6 text-sky-400"
+              >
+                <path
+                  d="M0 0h12C2 20 2 40 12 60s10 40 0 60-10 40 0 60 10 40 0 60H0Z"
+                  fill="currentColor"
+                />
+              </motion.svg>
+            ) : (
+              <motion.svg
+                viewBox="0 0 240 24"
+                preserveAspectRatio="none"
+                aria-hidden="true"
+                animate={{
+                  transform: active ? "translateX(-50%)" : "translateX(0%)",
+                }}
+                transition={{
+                  duration: 1.1,
+                  ease: "linear",
+                  repeat: active ? Number.POSITIVE_INFINITY : 0,
+                }}
+                className="absolute -top-5 left-0 h-6 w-[200%] text-sky-400"
+              >
+                <path
+                  d="M0 12C20 2 40 2 60 12s40 10 60 0 40-10 60 0 40 10 60 0v12H0Z"
+                  fill="currentColor"
+                />
+              </motion.svg>
+            )
+          ) : null}
+        </motion.span>
+      </span>
+
+      <span
+        className={cn(
+          "relative z-10 grid place-items-center text-base font-medium tracking-[-0.01em]",
+          labelClassName,
+        )}
+      >
+        <motion.span
+          animate={{ opacity: active ? 0 : 1 }}
+          transition={{ duration: reduce ? 0 : 0.12, ease: EASE_OUT }}
+          className="col-start-1 row-start-1"
+        >
+          {children}
+        </motion.span>
+        <motion.span
+          aria-hidden={!holding || completed}
+          animate={{ opacity: holding && !completed ? 1 : 0 }}
+          transition={{ duration: reduce ? 0 : 0.12, ease: EASE_OUT }}
+          className="col-start-1 row-start-1"
+        >
+          {holdingLabel}
+        </motion.span>
+        <motion.span
+          aria-hidden={!completed}
+          animate={{ opacity: completed ? 1 : 0 }}
+          transition={{ duration: reduce ? 0 : 0.12, ease: EASE_OUT }}
+          className="col-start-1 row-start-1"
+        >
+          {completeLabel}
+        </motion.span>
+      </span>
+    </motion.button>
+  );
+});

package/components/motion/hover-card.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+} from "motion/react";
+import React, { useEffect, useId, useRef, useState, type ReactNode } from "react";
+import { SPRING_FLOAT } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export interface HoverCardProps {
+  children: ReactNode;
+  content: ReactNode;
+  openDelay?: number;
+  closeDelay?: number;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  className?: string;
+}
+
+export function HoverCard({
+  children,
+  content,
+  openDelay = 200,
+  closeDelay = 250,
+  side = "bottom",
+  align = "center",
+  className,
+}: HoverCardProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const openTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const shouldReduceMotion = useReducedMotion();
+  const tooltipId = useId();
+
+  useEffect(() => () => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+  }, []);
+
+  const handleMouseEnter = () => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    if (openTimer.current) clearTimeout(openTimer.current);
+    openTimer.current = setTimeout(() => setIsOpen(true), openDelay);
+  };
+
+  const handleMouseLeave = () => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    closeTimer.current = setTimeout(() => setIsOpen(false), closeDelay);
+  };
+
+  const handleFocus = () => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    if (openTimer.current) clearTimeout(openTimer.current);
+    setIsOpen(true);
+  };
+  const handleBlur = (event: React.FocusEvent<HTMLDivElement>) => {
+    if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+      setIsOpen(false);
+    }
+  };
+
+  // Positioning classes
+  const sideClasses = {
+    top: "bottom-full mb-2",
+    bottom: "top-full mt-2",
+    left: "right-full mr-2 top-1/2 -translate-y-1/2",
+    right: "left-full ml-2 top-1/2 -translate-y-1/2",
+  };
+
+  const alignClasses = {
+    start: "left-0",
+    center: side === "left" || side === "right" ? "" : "left-1/2 -translate-x-1/2",
+    end: "right-0",
+  };
+
+  return (
+    <div
+      className="relative inline-block"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+    >
+      {/* Trigger */}
+      <div
+        tabIndex={0}
+        aria-describedby={isOpen ? tooltipId : undefined}
+        className="inline-block cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        {children}
+      </div>
+
+      {/* Floating Card Popover */}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            id={tooltipId}
+            role="tooltip"
+            initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.96, y: side === "bottom" ? -4 : 4 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.96, transition: { duration: 0.12 } }}
+            transition={SPRING_FLOAT}
+            className={cn(
+              "absolute z-50 w-72 rounded-2xl border border-border bg-popover p-4 text-popover-foreground shadow-xl backdrop-blur-md focus:outline-none",
+              sideClasses[side],
+              alignClasses[align],
+              className
+            )}
+          >
+            {content}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/components/motion/icon-stack.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useState } from "react";
+import { SPRING_BOUNCE, SPRING_GENTLE } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export interface IconStackItem {
+  id: string | number;
+  label: string;
+  icon?: React.ReactNode;
+  src?: string;
+  href?: string;
+  badge?: string | number;
+}
+
+export interface IconStackProps extends HTMLMotionProps<"div"> {
+  items: IconStackItem[];
+  maxVisible?: number;
+  size?: "sm" | "md" | "lg";
+  spreadOnHover?: boolean;
+  overlap?: "tight" | "normal" | "relaxed";
+  className?: string;
+}
+
+const SIZE_VARIANTS = {
+  sm: "size-7 text-xs",
+  md: "size-9 text-sm",
+  lg: "size-11 text-base",
+};
+
+const OVERLAP_MARGINS = {
+  tight: "-space-x-3 hover:space-x-1.5",
+  normal: "-space-x-2 hover:space-x-2",
+  relaxed: "-space-x-1 hover:space-x-2.5",
+};
+
+export function IconStack({
+  items,
+  maxVisible = 5,
+  size = "md",
+  spreadOnHover = true,
+  overlap = "normal",
+  className,
+  ...props
+}: IconStackProps) {
+  const [hoveredId, setHoveredId] = useState<string | number | null>(null);
+  const shouldReduceMotion = useReducedMotion();
+
+  const visibleItems = items.slice(0, maxVisible);
+  const excessCount = items.length - maxVisible;
+
+  return (
+    <motion.div
+      className={cn(
+        "flex items-center transition-all duration-300 py-1",
+        spreadOnHover && OVERLAP_MARGINS[overlap],
+        className
+      )}
+      {...props}
+    >
+      {visibleItems.map((item, index) => {
+        const isHovered = hoveredId === item.id;
+        const zIndex = isHovered ? 30 : visibleItems.length - index;
+
+        return (
+          <motion.div
+            key={item.id}
+            style={{ zIndex }}
+            className="relative flex items-center justify-center focus-within:z-30"
+            onMouseEnter={() => setHoveredId(item.id)}
+            onMouseLeave={() => setHoveredId(null)}
+            whileHover={
+              shouldReduceMotion
+                ? undefined
+                : { y: -4, scale: 1.15, transition: SPRING_BOUNCE }
+            }
+          >
+            <div
+              className={cn(
+                "relative flex items-center justify-center rounded-full border-2 border-background bg-muted font-medium text-foreground shadow-sm overflow-hidden select-none transition-shadow hover:shadow-md",
+                SIZE_VARIANTS[size]
+              )}
+            >
+              {item.src ? (
+                <img
+                  src={item.src}
+                  alt={item.label}
+                  className="size-full object-cover"
+                />
+              ) : item.icon ? (
+                item.icon
+              ) : (
+                item.label.slice(0, 2).toUpperCase()
+              )}
+
+              {item.badge && (
+                <span className="absolute bottom-0 right-0 size-2 rounded-full bg-emerald-500 ring-2 ring-background" />
+              )}
+            </div>
+
+            {/* Hover Tooltip */}
+            <AnimatePresence>
+              {isHovered && (
+                <motion.div
+                  initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 6, scale: 0.9 }}
+                  animate={{ opacity: 1, y: 0, scale: 1 }}
+                  exit={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 4, scale: 0.92 }}
+                  transition={SPRING_GENTLE}
+                  className="pointer-events-none absolute -top-8 left-1/2 z-50 -translate-x-1/2 whitespace-nowrap rounded-md bg-foreground px-2 py-0.5 text-[10px] font-medium text-background shadow-lg"
+                >
+                  {item.label}
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </motion.div>
+        );
+      })}
+
+      {excessCount > 0 && (
+        <div
+          style={{ zIndex: 0 }}
+          className={cn(
+            "relative flex items-center justify-center rounded-full border-2 border-background bg-secondary text-secondary-foreground font-semibold text-xs shadow-sm select-none",
+            SIZE_VARIANTS[size]
+          )}
+        >
+          +{excessCount}
+        </div>
+      )}
+    </motion.div>
+  );
+}