motion-ui-skill 2.0.0

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

@@ -0,0 +1,203 @@
+"use client";
+
+import {
+  animate,
+  motion,
+  useMotionValue,
+  useReducedMotion,
+  useTransform,
+} from "motion/react";
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+import { EASE_OUT, SPRING_LAYOUT, SPRING_PRESS } from "@/lib/ease";
+import { TOUCH_GESTURE_CLASS, TOUCH_GESTURE_CONTENT_CLASS } from "@/lib/touch";
+import { cn } from "@/lib/utils";
+
+export interface SlideActionButtonProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "children"
+> {
+  children: ReactNode;
+  completeLabel?: ReactNode;
+  threshold?: number;
+  resetDelay?: number;
+  onComplete?: () => void;
+  thumbClassName?: string;
+  fillClassName?: string;
+}
+
+export function SlideActionButton({
+  children,
+  completeLabel = "Complete",
+  threshold = 0.82,
+  resetDelay = 1200,
+  onComplete,
+  thumbClassName,
+  fillClassName,
+  className,
+  ...rest
+}: SlideActionButtonProps) {
+  const reduce = useReducedMotion();
+  const trackRef = useRef<HTMLDivElement>(null);
+  const thumbRef = useRef<HTMLButtonElement>(null);
+  const resetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const completedRef = useRef(false);
+  const x = useMotionValue(0);
+  const [maxDistance, setMaxDistance] = useState(0);
+  const [completed, setCompleted] = useState(false);
+  const safeDistance = Math.max(maxDistance, 1);
+  const dragProgress = useTransform(x, [0, safeDistance], [0, 1]);
+  const fillProgress = useTransform(x, [0, safeDistance], [0, 1]);
+  const labelOpacity = useTransform(
+    x,
+    [0, safeDistance * 0.35, safeDistance * 0.65],
+    [1, 0.75, 0],
+  );
+  const iconPath = useTransform(
+    dragProgress,
+    [0, 0.5, 1],
+    [
+      "M 8 5 L 15 12 L 8 19",
+      "M 7 8 L 12 14 L 17 10",
+      "M 5 12 L 10 17 L 19 7",
+    ],
+  );
+
+  useLayoutEffect(() => {
+    const track = trackRef.current;
+    const thumb = thumbRef.current;
+    if (!track || !thumb) return;
+
+    const measure = () => {
+      setMaxDistance(Math.max(track.clientWidth - thumb.clientWidth - 8, 0));
+    };
+
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(track);
+    observer.observe(thumb);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(
+    () => () => {
+      if (resetTimerRef.current) clearTimeout(resetTimerRef.current);
+    },
+    [],
+  );
+
+  const moveTo = (target: number) => {
+    if (reduce) {
+      x.set(target);
+      return;
+    }
+    animate(x, target, SPRING_LAYOUT);
+  };
+
+  const reset = () => {
+    completedRef.current = false;
+    setCompleted(false);
+    moveTo(0);
+  };
+
+  const complete = () => {
+    if (completedRef.current || maxDistance === 0) return;
+    completedRef.current = true;
+    setCompleted(true);
+    moveTo(maxDistance);
+    onComplete?.();
+
+    if (resetTimerRef.current) clearTimeout(resetTimerRef.current);
+    resetTimerRef.current = setTimeout(reset, resetDelay);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    complete();
+  };
+
+  return (
+    <div
+      ref={trackRef}
+      className={cn(
+        "relative h-16 w-72 overflow-hidden rounded-[22px] bg-primary/10 p-1",
+        "ring-1 ring-primary/10",
+        // The track only carries the label — the slide starts on the thumb,
+        // which suppresses selection for the whole gesture on its own.
+        TOUCH_GESTURE_CONTENT_CLASS,
+        className,
+      )}
+      {...rest}
+    >
+      <motion.span
+        aria-hidden="true"
+        style={{ scaleX: fillProgress }}
+        className={cn(
+          "absolute inset-0 origin-left bg-primary will-change-transform",
+          fillClassName,
+        )}
+      />
+
+      <motion.span
+        aria-hidden="true"
+        style={{ opacity: labelOpacity }}
+        className="pointer-events-none absolute inset-0 grid place-items-center pl-10 text-sm font-medium text-foreground"
+      >
+        {children}
+      </motion.span>
+
+      <motion.span
+        aria-live="polite"
+        animate={{ opacity: completed ? 1 : 0 }}
+        transition={{ duration: reduce ? 0 : 0.15, ease: EASE_OUT }}
+        className="pointer-events-none absolute inset-0 grid place-items-center text-sm font-medium text-primary-foreground"
+      >
+        {completed ? completeLabel : null}
+      </motion.span>
+
+      <motion.button
+        ref={thumbRef}
+        type="button"
+        aria-label={typeof children === "string" ? children : "Slide action"}
+        drag={completed ? false : "x"}
+        dragConstraints={{ left: 0, right: maxDistance }}
+        dragElastic={0}
+        dragMomentum={false}
+        style={{ x }}
+        onDragEnd={() => {
+          if (x.get() >= maxDistance * threshold) complete();
+          else moveTo(0);
+        }}
+        onKeyDown={handleKeyDown}
+        whileTap={reduce || completed ? undefined : { scale: 0.94 }}
+        transition={SPRING_PRESS}
+        className={cn(
+          "relative z-10 grid size-14 touch-none cursor-grab place-items-center rounded-[18px] bg-primary text-primary-foreground shadow-sm",
+          TOUCH_GESTURE_CLASS,
+          "outline-none active:cursor-grabbing focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          completed && "cursor-default bg-background text-foreground",
+          thumbClassName,
+        )}
+      >
+        <motion.svg viewBox="0 0 24 24" aria-hidden="true" className="size-5">
+          <motion.path
+            d={iconPath}
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+          />
+        </motion.svg>
+      </motion.button>
+    </div>
+  );
+}

package/components/motion/smooth-scroll.tsx

@@ -0,0 +1,264 @@
+"use client";
+
+import type Lenis from "lenis";
+import { ReactLenis, useLenis } from "lenis/react";
+import { type MotionValue, useMotionValue, useReducedMotion } from "motion/react";
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
+
+// Lenis' own expo-out curve — the canonical smooth-scroll easing. Kept as a
+// named local fn (not a lib/ease token) because tokens are bezier control
+// points for the motion lib, while Lenis needs a (t) => number easing fn.
+const EASE_SCROLL = (t: number) => Math.min(1, 1.001 - 2 ** (-10 * t));
+
+export type ScrollTarget = number | string | HTMLElement;
+
+export type ScrollToOptions = {
+  offset?: number;
+  immediate?: boolean;
+  duration?: number;
+};
+
+export type SmoothScrollApi = {
+  /** Underlying Lenis instance, or null on the reduced-motion / native path. */
+  lenis: Lenis | null;
+  /** Current scroll offset in px. */
+  scrollY: MotionValue<number>;
+  /** Scroll position as 0..1 of the scrollable height. */
+  progress: MotionValue<number>;
+  /** Signed scroll velocity (px/frame); drives velocity-based effects. */
+  velocity: MotionValue<number>;
+  /** Programmatic smooth scroll. Respects reduced motion (jumps instantly). */
+  scrollTo: (target: ScrollTarget, options?: ScrollToOptions) => void;
+};
+
+const SmoothScrollContext = createContext<SmoothScrollApi | null>(null);
+
+export interface SmoothScrollProps {
+  children: ReactNode;
+  /** Drive the page (window) when true, or a contained scroll area when false. */
+  root?: boolean;
+  /** Smoothing factor; lower is smoother and heavier. */
+  lerp?: number;
+  /** Wheel / programmatic ease duration in seconds. */
+  duration?: number;
+  orientation?: "vertical" | "horizontal";
+  /** Wheel scroll speed multiplier. */
+  wheelMultiplier?: number;
+  /** Smooth touch scrolling. Off by default — native momentum is good on mobile. */
+  touch?: boolean;
+  className?: string;
+}
+
+type ScrollSource = Window | HTMLElement;
+
+function readMetrics(target: ScrollSource) {
+  if (target instanceof Window) {
+    const max = Math.max(
+      0,
+      document.documentElement.scrollHeight - window.innerHeight,
+    );
+    return { y: window.scrollY, max };
+  }
+  return {
+    y: target.scrollTop,
+    max: Math.max(0, target.scrollHeight - target.clientHeight),
+  };
+}
+
+function resolveTop(
+  target: ScrollTarget,
+  source: ScrollSource,
+  offset = 0,
+): number {
+  if (typeof target === "number") return target + offset;
+  if (source instanceof Window) {
+    const el =
+      typeof target === "string" ? document.querySelector(target) : target;
+    if (!el) return window.scrollY;
+    return el.getBoundingClientRect().top + window.scrollY + offset;
+  }
+  const el =
+    typeof target === "string" ? source.querySelector(target) : target;
+  if (!(el instanceof HTMLElement)) return source.scrollTop;
+  return el.offsetTop + offset;
+}
+
+/** Pushes Lenis' live scroll state into the shared motion values. */
+function LenisBridge({
+  scrollY,
+  progress,
+  velocity,
+  lenisRef,
+}: {
+  scrollY: MotionValue<number>;
+  progress: MotionValue<number>;
+  velocity: MotionValue<number>;
+  lenisRef: { current: Lenis | null };
+}) {
+  const lenis = useLenis((instance) => {
+    scrollY.set(instance.scroll);
+    progress.set(instance.progress);
+    velocity.set(instance.velocity);
+  });
+  useEffect(() => {
+    lenisRef.current = lenis ?? null;
+    return () => {
+      lenisRef.current = null;
+    };
+  }, [lenis, lenisRef]);
+  return null;
+}
+
+/** Native scroll listener for the reduced-motion path and the no-provider fallback. */
+function useNativeScrollSync(
+  enabled: boolean,
+  getTarget: () => ScrollSource | null,
+  scrollY: MotionValue<number>,
+  progress: MotionValue<number>,
+  velocity: MotionValue<number>,
+) {
+  useEffect(() => {
+    if (!enabled) return;
+    const target = getTarget();
+    if (!target) return;
+    let lastY = readMetrics(target).y;
+    let lastT = performance.now();
+    const onScroll = () => {
+      const { y, max } = readMetrics(target);
+      const now = performance.now();
+      const dt = now - lastT || 16;
+      scrollY.set(y);
+      progress.set(max > 0 ? y / max : 0);
+      velocity.set(((y - lastY) / dt) * 16);
+      lastY = y;
+      lastT = now;
+    };
+    onScroll();
+    target.addEventListener("scroll", onScroll, { passive: true });
+    return () => target.removeEventListener("scroll", onScroll);
+  }, [enabled, getTarget, scrollY, progress, velocity]);
+}
+
+export function SmoothScroll({
+  children,
+  root = true,
+  lerp = 0.1,
+  duration = 1.2,
+  orientation = "vertical",
+  wheelMultiplier = 1,
+  touch = false,
+  className,
+}: SmoothScrollProps) {
+  const reduce = useReducedMotion();
+  const scrollY = useMotionValue(0);
+  const progress = useMotionValue(0);
+  const velocity = useMotionValue(0);
+  const lenisRef = useRef<Lenis | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const nativeSource = useCallback(
+    (): ScrollSource | null => (root ? window : containerRef.current),
+    [root],
+  );
+
+  const scrollTo = useCallback(
+    (target: ScrollTarget, options?: ScrollToOptions) => {
+      const lenis = lenisRef.current;
+      if (lenis && !reduce) {
+        lenis.scrollTo(target, {
+          offset: options?.offset,
+          duration: options?.duration,
+          immediate: options?.immediate,
+        });
+        return;
+      }
+      const source = nativeSource();
+      const behavior = reduce || options?.immediate ? "auto" : "smooth";
+      const top = resolveTop(target, source ?? window, options?.offset);
+      (source ?? window).scrollTo({ top, behavior });
+    },
+    [reduce, nativeSource],
+  );
+
+  // Reduced motion drives the native listener; the Lenis path leaves it
+  // disabled and lets LenisBridge feed the values instead.
+  useNativeScrollSync(!!reduce, nativeSource, scrollY, progress, velocity);
+
+  const api = useMemo<SmoothScrollApi>(
+    () => ({ lenis: lenisRef.current, scrollY, progress, velocity, scrollTo }),
+    [scrollY, progress, velocity, scrollTo],
+  );
+
+  if (reduce) {
+    return (
+      <SmoothScrollContext.Provider value={api}>
+        <div ref={containerRef} className={className}>
+          {children}
+        </div>
+      </SmoothScrollContext.Provider>
+    );
+  }
+
+  return (
+    <SmoothScrollContext.Provider value={api}>
+      <ReactLenis
+        root={root}
+        className={className}
+        options={{
+          lerp,
+          duration,
+          orientation,
+          wheelMultiplier,
+          smoothWheel: true,
+          syncTouch: touch,
+          easing: EASE_SCROLL,
+        }}
+      >
+        <LenisBridge
+          scrollY={scrollY}
+          progress={progress}
+          velocity={velocity}
+          lenisRef={lenisRef}
+        />
+        {children}
+      </ReactLenis>
+    </SmoothScrollContext.Provider>
+  );
+}
+
+/**
+ * Read the page's smooth-scroll state. Inside <SmoothScroll> it returns the
+ * shared motion values; outside it falls back to a native window scroll
+ * listener so scroll-driven components still work without the provider.
+ */
+export function useSmoothScroll(): SmoothScrollApi {
+  const ctx = useContext(SmoothScrollContext);
+  const scrollY = useMotionValue(0);
+  const progress = useMotionValue(0);
+  const velocity = useMotionValue(0);
+
+  const windowSource = useCallback((): ScrollSource => window, []);
+  useNativeScrollSync(ctx === null, windowSource, scrollY, progress, velocity);
+
+  const scrollTo = useCallback((target: ScrollTarget, options?: ScrollToOptions) => {
+    window.scrollTo({
+      top: resolveTop(target, window, options?.offset),
+      behavior: options?.immediate ? "auto" : "smooth",
+    });
+  }, []);
+
+  const fallback = useMemo<SmoothScrollApi>(
+    () => ({ lenis: null, scrollY, progress, velocity, scrollTo }),
+    [scrollY, progress, velocity, scrollTo],
+  );
+
+  return ctx ?? fallback;
+}

package/components/motion/sortable-list.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { GripVertical } from "lucide-react";
+import {
+  Reorder,
+  useReducedMotion,
+} from "motion/react";
+import React, { useState, type ReactNode } from "react";
+import { SPRING_LAYOUT } from "@/lib/ease";
+import { useHaptic } from "@/lib/hooks/use-haptic";
+import { cn } from "@/lib/utils";
+
+export interface SortableListItem {
+  id: string;
+  content: ReactNode;
+}
+
+export interface SortableListProps {
+  items: SortableListItem[];
+  onChange?: (items: SortableListItem[]) => void;
+  showHandle?: boolean;
+  className?: string;
+}
+
+export function SortableList({
+  items: initialItems,
+  onChange,
+  showHandle = true,
+  className,
+}: SortableListProps) {
+  const [items, setItems] = useState<SortableListItem[]>(initialItems);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const shouldReduceMotion = useReducedMotion();
+  const triggerHaptic = useHaptic();
+
+  const handleReorder = (newItems: SortableListItem[]) => {
+    setItems(newItems);
+    onChange?.(newItems);
+    triggerHaptic("selection");
+  };
+
+  const moveByKeyboard = (index: number, offset: number) => {
+    const nextIndex = index + offset;
+    if (nextIndex < 0 || nextIndex >= items.length) return;
+    const next = [...items];
+    [next[index], next[nextIndex]] = [next[nextIndex], next[index]];
+    handleReorder(next);
+  };
+
+  return (
+    <Reorder.Group
+      axis="y"
+      values={items}
+      onReorder={handleReorder}
+      className={cn("flex flex-col gap-2 p-1 select-none", className)}
+    >
+      {items.map((item, index) => {
+        const isDragging = activeId === item.id;
+
+        return (
+          <Reorder.Item
+            key={item.id}
+            value={item}
+            tabIndex={0}
+            onKeyDown={(event) => {
+              const offset = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+              if (!offset) return;
+              event.preventDefault();
+              moveByKeyboard(index, offset);
+            }}
+            onDragStart={() => {
+              setActiveId(item.id);
+              triggerHaptic("medium");
+            }}
+            onDragEnd={() => setActiveId(null)}
+            transition={shouldReduceMotion ? { duration: 0 } : SPRING_LAYOUT}
+            className={cn(
+              "relative flex items-center gap-2 rounded-xl border border-border bg-card p-3 shadow-sm transition-shadow",
+              isDragging && "z-20 shadow-xl border-primary/50 bg-card/95 scale-[1.02]"
+            )}
+          >
+            {showHandle && (
+              <div
+                aria-label="Drag handle"
+                className="cursor-grab active:cursor-grabbing text-muted-foreground/60 hover:text-foreground p-0.5"
+              >
+                <GripVertical className="size-4" />
+              </div>
+            )}
+            <div className="flex-1 text-xs text-foreground font-medium">
+              {item.content}
+            </div>
+          </Reorder.Item>
+        );
+      })}
+    </Reorder.Group>
+  );
+}

package/components/motion/speed-dial.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { Plus } from "lucide-react";
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useState } from "react";
+import { SPRING_BOUNCE, SPRING_PRESS } from "@/lib/ease";
+import { useHaptic } from "@/lib/hooks/use-haptic";
+import { cn } from "@/lib/utils";
+
+export interface SpeedDialAction {
+  id: string;
+  icon: React.ReactNode;
+  label: string;
+  onClick: () => void;
+  color?: string;
+}
+
+export interface SpeedDialProps extends HTMLMotionProps<"div"> {
+  actions: SpeedDialAction[];
+  direction?: "up" | "down" | "left" | "right";
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+export function SpeedDial({
+  actions,
+  direction = "up",
+  icon,
+  className,
+  ...props
+}: SpeedDialProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const shouldReduceMotion = useReducedMotion();
+  const triggerHaptic = useHaptic();
+
+  const toggle = () => {
+    triggerHaptic(isOpen ? "light" : "medium");
+    setIsOpen(!isOpen);
+  };
+
+  const getOffsetStyle = (index: number) => {
+    const spacing = 52;
+    const distance = (index + 1) * spacing;
+    switch (direction) {
+      case "up":
+        return { y: -distance, x: 0 };
+      case "down":
+        return { y: distance, x: 0 };
+      case "left":
+        return { x: -distance, y: 0 };
+      case "right":
+        return { x: distance, y: 0 };
+    }
+  };
+
+  return (
+    <motion.div className={cn("relative inline-flex items-center justify-center", className)} {...props}>
+      {/* Actions Stack */}
+      <AnimatePresence>
+        {isOpen && (
+          <>
+            {actions.map((action, index) => {
+              const offset = getOffsetStyle(index);
+              return (
+                <motion.div
+                  key={action.id}
+                  initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.4, x: 0, y: 0 }}
+                  animate={{
+                    opacity: 1,
+                    scale: 1,
+                    x: offset.x,
+                    y: offset.y,
+                    transition: {
+                      delay: index * 0.04,
+                      ...SPRING_BOUNCE,
+                    },
+                  }}
+                  exit={
+                    shouldReduceMotion
+                      ? { opacity: 0 }
+                      : {
+                          opacity: 0,
+                          scale: 0.5,
+                          x: 0,
+                          y: 0,
+                          transition: { duration: 0.15, delay: (actions.length - 1 - index) * 0.02 },
+                        }
+                  }
+                  className="absolute z-40 flex items-center gap-2 pointer-events-auto"
+                >
+                  <motion.button
+                    type="button"
+                    onClick={() => {
+                      triggerHaptic("selection");
+                      action.onClick();
+                      setIsOpen(false);
+                    }}
+                    whileTap={shouldReduceMotion ? undefined : { scale: 0.9 }}
+                    transition={SPRING_PRESS}
+                    aria-label={action.label}
+                    className={cn(
+                      "size-10 rounded-full border border-border bg-card text-foreground shadow-lg flex items-center justify-center hover:bg-muted/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                      action.color
+                    )}
+                  >
+                    {action.icon}
+                  </motion.button>
+                  {direction === "up" || direction === "down" ? (
+                    <span className="rounded-md bg-foreground/90 px-2 py-0.5 text-[11px] font-medium text-background shadow-md whitespace-nowrap pointer-events-none">
+                      {action.label}
+                    </span>
+                  ) : null}
+                </motion.div>
+              );
+            })}
+          </>
+        )}
+      </AnimatePresence>
+
+      {/* Main Trigger FAB */}
+      <motion.button
+        type="button"
+        onClick={toggle}
+        whileTap={shouldReduceMotion ? undefined : { scale: 0.92 }}
+        transition={SPRING_PRESS}
+        aria-expanded={isOpen}
+        aria-label="Toggle speed dial"
+        className="relative z-50 size-[3.25rem] rounded-full bg-primary text-primary-foreground shadow-xl flex items-center justify-center hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+      >
+        <motion.div
+          animate={shouldReduceMotion ? { rotate: 0 } : { rotate: isOpen ? 45 : 0 }}
+          transition={shouldReduceMotion ? { duration: 0 } : SPRING_BOUNCE}
+        >
+          {icon || <Plus className="size-6" />}
+        </motion.div>
+      </motion.button>
+    </motion.div>
+  );
+}