motion-ui-skill 2.0.0

package/components/motion/magnet-dock.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import {
+  motion,
+  useMotionValue,
+  useSpring,
+  useTransform,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useRef } from "react";
+import { SPRING_MOUSE } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export interface MagnetDockItem {
+  id: string;
+  icon: React.ReactNode;
+  label: string;
+  onClick?: () => void;
+  badge?: string | number;
+}
+
+export interface MagnetDockProps extends HTMLMotionProps<"div"> {
+  items: MagnetDockItem[];
+  magnification?: number; // max scale size (default 64px)
+  baseSize?: number; // default 40px
+  distance?: number; // influence radius in pixels (default 140px)
+  className?: string;
+}
+
+function DockIcon({
+  item,
+  mouseX,
+  magnification = 64,
+  baseSize = 42,
+  distance = 140,
+}: {
+  item: MagnetDockItem;
+  mouseX: any;
+  magnification?: number;
+  baseSize?: number;
+  distance?: number;
+}) {
+  const ref = useRef<HTMLButtonElement>(null);
+  const shouldReduceMotion = useReducedMotion();
+
+  const distanceCalc = useTransform(mouseX, (val: number) => {
+    const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
+    return val - bounds.x - bounds.width / 2;
+  });
+
+  const widthSync = useTransform(
+    distanceCalc,
+    [-distance, 0, distance],
+    [baseSize, magnification, baseSize]
+  );
+
+  const width = useSpring(widthSync, {
+    mass: 0.1,
+    stiffness: 160,
+    damping: 14,
+  });
+
+  return (
+    <motion.button
+      type="button"
+      ref={ref}
+      aria-label={item.label}
+      style={shouldReduceMotion ? { width: baseSize, height: baseSize } : { width, height: width }}
+      onClick={item.onClick}
+      className="relative flex items-center justify-center rounded-2xl bg-card border border-border shadow-md cursor-pointer hover:border-primary/50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group aspect-square select-none"
+    >
+      <div className="flex items-center justify-center text-foreground pointer-events-none">
+        {item.icon}
+      </div>
+
+      {/* Tooltip */}
+      <span className="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-foreground px-2 py-0.5 text-[10px] font-semibold text-background opacity-0 group-hover:opacity-100 transition-opacity shadow-lg">
+        {item.label}
+      </span>
+    </motion.button>
+  );
+}
+
+export function MagnetDock({
+  items,
+  magnification = 64,
+  baseSize = 42,
+  distance = 140,
+  className,
+  ...props
+}: MagnetDockProps) {
+  const mouseX = useMotionValue(Infinity);
+
+  return (
+    <motion.div
+      onMouseMove={(e) => mouseX.set(e.pageX)}
+      onMouseLeave={() => mouseX.set(Infinity)}
+      className={cn(
+        "flex h-16 items-end gap-3 rounded-3xl border border-white/20 dark:border-white/10 bg-card/70 px-4 pb-2.5 shadow-2xl backdrop-blur-2xl ring-1 ring-black/5",
+        className
+      )}
+      {...props}
+    >
+      {items.map((item) => (
+        <DockIcon
+          key={item.id}
+          item={item}
+          mouseX={mouseX}
+          magnification={magnification}
+          baseSize={baseSize}
+          distance={distance}
+        />
+      ))}
+    </motion.div>
+  );
+}

package/components/motion/magnetic.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { motion, useMotionValue, useReducedMotion, useSpring } from "motion/react";
+import { useRef, type ReactNode } from "react";
+import { SPRING_MOUSE } from "@/lib/ease";
+import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
+import { cn } from "@/lib/utils";
+
+export interface MagneticProps {
+  children: ReactNode;
+  strength?: number;
+  className?: string;
+}
+
+export function Magnetic({ children, strength = 0.35, className }: MagneticProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const reduce = useReducedMotion();
+  const canHover = useHoverCapable();
+  // Decorative cursor-follow: skip on touch (phantom hover) and reduced motion.
+  const enabled = !reduce && canHover;
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  const sx = useSpring(x, SPRING_MOUSE);
+  const sy = useSpring(y, SPRING_MOUSE);
+
+  const onMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    const el = ref.current;
+    if (!el || !enabled) return;
+    const rect = el.getBoundingClientRect();
+    x.set((e.clientX - rect.left - rect.width / 2) * strength);
+    y.set((e.clientY - rect.top - rect.height / 2) * strength);
+  };
+
+  const onLeave = () => {
+    x.set(0);
+    y.set(0);
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      onMouseMove={onMove}
+      onMouseLeave={onLeave}
+      style={{ x: sx, y: sy }}
+      className={cn("inline-block", className)}
+    >
+      {children}
+    </motion.div>
+  );
+}

package/components/motion/marquee.tsx

@@ -0,0 +1,66 @@
+import { Children, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+export interface MarqueeProps {
+  children: ReactNode;
+  direction?: "left" | "right" | "up" | "down";
+  speed?: number;
+  pauseOnHover?: boolean;
+  gap?: string;
+  className?: string;
+  fade?: boolean;
+}
+
+export function Marquee({
+  children,
+  direction = "left",
+  speed = 30,
+  pauseOnHover = true,
+  gap = "1rem",
+  className,
+  fade = true,
+}: MarqueeProps) {
+  const vertical = direction === "up" || direction === "down";
+  const reverse = direction === "right" || direction === "down";
+  const items = Children.toArray(children);
+
+  return (
+    <div
+      className={cn(
+        "group relative flex overflow-hidden",
+        vertical ? "flex-col" : "flex-row",
+        fade && !vertical && "[mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)]",
+        fade && vertical && "[mask-image:linear-gradient(to_bottom,transparent,black_12%,black_88%,transparent)]",
+        className,
+      )}
+      // gap on the wrapper too, so the seam between the two tracks matches the
+      // spacing between items and the loop stays even.
+      style={{ "--gap": gap, gap } as React.CSSProperties}
+    >
+      {[0, 1].map((dup) => (
+        <div
+          key={dup}
+          aria-hidden={dup === 1}
+          inert={dup === 1}
+          style={{
+            animationDuration: `${speed}s`,
+            animationDirection: reverse ? "reverse" : "normal",
+            gap,
+          }}
+          className={cn(
+            "flex shrink-0 items-center",
+            vertical ? "flex-col animate-marquee-vertical" : "flex-row animate-marquee",
+            pauseOnHover && "group-hover:[animation-play-state:paused]",
+          )}
+        >
+          {items.map((child, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: Marquee duplicates static child slots; item order is not mutated.
+            <div key={i} className="shrink-0">
+              {child}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}

package/components/motion/metric-card.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { ArrowDownRight, ArrowUpRight } from "lucide-react";
+import {
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React from "react";
+import { SPRING_PRESS } from "@/lib/ease";
+import { getStylePreset, type StylePreset } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+export interface MetricCardProps extends HTMLMotionProps<"div"> {
+  title: string;
+  value: string | number;
+  change?: string;
+  isPositive?: boolean;
+  timeframe?: string;
+  sparklineData?: number[];
+  stylePreset?: StylePreset;
+  className?: string;
+}
+
+export function MetricCard({
+  title,
+  value,
+  change,
+  isPositive = true,
+  timeframe = "vs last month",
+  sparklineData = [12, 18, 15, 24, 22, 35, 42, 38, 55],
+  stylePreset = "origin",
+  className,
+  ...props
+}: MetricCardProps) {
+  const shouldReduceMotion = useReducedMotion();
+  const tokens = getStylePreset(stylePreset);
+
+  // Generate SVG path from sparklineData
+  const data = sparklineData.length > 0 ? sparklineData : [0];
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const width = 120;
+  const height = 40;
+
+  const points = data.map((val, idx) => {
+    const x = data.length === 1 ? width / 2 : (idx / (data.length - 1)) * width;
+    const y = height - ((val - min) / range) * (height - 8) - 4;
+    return `${x},${y}`;
+  });
+  const pathD = `M ${points.join(" L ")}`;
+
+  return (
+    <motion.div
+      whileHover={shouldReduceMotion ? undefined : { y: -2 }}
+      transition={tokens.spring || SPRING_PRESS}
+      className={cn(tokens.card, "flex flex-col justify-between", className)}
+      {...props}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between pb-2">
+        <span className="text-xs font-medium text-muted-foreground">{title}</span>
+        {change && (
+          <div
+            className={cn(
+              "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold",
+              isPositive
+                ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+                : "bg-rose-500/10 text-rose-600 dark:text-rose-400"
+            )}
+          >
+            {isPositive ? (
+              <ArrowUpRight className="size-3" />
+            ) : (
+              <ArrowDownRight className="size-3" />
+            )}
+            <span>{change}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Main Metric Value & Sparkline */}
+      <div className="flex items-end justify-between gap-4 pt-1">
+        <div>
+          <div className="text-2xl font-bold tracking-tight text-foreground font-mono">
+            {value}
+          </div>
+          {timeframe && (
+            <div className="text-[11px] text-muted-foreground mt-0.5">{timeframe}</div>
+          )}
+        </div>
+
+        {/* Animated SVG Sparkline */}
+        <div className="h-10 w-28 overflow-visible">
+          <svg
+            viewBox={`0 0 ${width} ${height}`}
+            className="size-full overflow-visible"
+          >
+            <motion.path
+              d={pathD}
+              fill="none"
+              stroke={isPositive ? "#10b981" : "#f43f5e"}
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              initial={shouldReduceMotion ? { pathLength: 1 } : { pathLength: 0 }}
+              animate={{ pathLength: 1 }}
+              transition={{ duration: 0.9, ease: "easeOut" }}
+            />
+          </svg>
+        </div>
+      </div>
+    </motion.div>
+  );
+}

package/components/motion/morphing-modal.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+} from "motion/react";
+import { type ReactNode, useEffect } from "react";
+import { EASE_OUT, SPRING_PANEL } from "@/lib/ease";
+import { PresenceGate } from "@/lib/presence-gate";
+import { cn } from "@/lib/utils";
+
+export interface MorphingModalProps {
+  /** Which view is currently shown. `null` closes the modal. */
+  viewId: string | null;
+  onClose: () => void;
+  children: ReactNode;
+  /** "bottom" anchors to the viewport bottom (mobile-like). "center" centers vertically. */
+  placement?: "bottom" | "center";
+  className?: string;
+}
+
+export function MorphingModal({
+  viewId,
+  onClose,
+  children,
+  placement = "bottom",
+  className,
+}: MorphingModalProps) {
+  const open = viewId !== null;
+  const reduce = useReducedMotion();
+  const enterY = reduce ? 0 : placement === "bottom" ? 40 : 20;
+  const enterScale = reduce ? 1 : 0.97;
+
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
+  // Mounted only while open, and while open the chrome is two fixed siblings
+  // rather than one wrapper: the backdrop spans the viewport edges but carries
+  // the scrim colour, and the layer positioning the panel sits inset off every
+  // edge (`inset-4`, with the bottom placement's `pb-4` on top of it). Both hang
+  // off `PresenceGate`, so interaction releases in the same commit that starts
+  // the exit rather than when it ends — `open` is already false for those
+  // frames. See tests/fixed-overlay-edge-sampling.test.tsx.
+  return (
+    <AnimatePresence initial={false}>
+      {open ? (
+        <PresenceGate key="backdrop">
+          {({ gate }) => (
+            <motion.button
+              type="button"
+              aria-label="Close modal"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2, ease: EASE_OUT }}
+              {...gate}
+              onClick={onClose}
+              className="pointer-events-auto fixed inset-0 z-[80] bg-background/5 [backdrop-filter:blur(14px)_saturate(140%)] [-webkit-backdrop-filter:blur(14px)_saturate(140%)]"
+            />
+          )}
+        </PresenceGate>
+      ) : null}
+
+      {open ? (
+        <PresenceGate key="panel-layer">
+          {({ isPresent, gate }) => (
+            // The layer itself never takes pointer events, so it carries
+            // `inert` alone rather than the gate's pointer-events value.
+            <div
+              inert={!isPresent}
+              className={cn(
+                "pointer-events-none fixed inset-4 z-[80] flex justify-center",
+                placement === "bottom" ? "items-end pb-4" : "items-center",
+              )}
+            >
+              <motion.div
+                key="panel"
+                layout
+                initial={{ opacity: 0, y: enterY, scale: enterScale }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={{
+                  opacity: 0,
+                  y: enterY,
+                  scale: reduce ? 1 : 0.98,
+                  transition: { duration: 0.18, ease: EASE_OUT },
+                }}
+                transition={SPRING_PANEL}
+                {...gate}
+                className={cn(
+                  "pointer-events-auto relative w-full max-w-sm overflow-hidden rounded-3xl border border-border bg-background shadow-2xl will-change-transform",
+                  className,
+                )}
+              >
+                <motion.div layout="position" className="p-5">
+                  <AnimatePresence mode="popLayout" initial={false}>
+                    <motion.div
+                      key={viewId}
+                      initial={
+                        reduce
+                          ? { opacity: 0 }
+                          : { opacity: 0, y: 8, filter: "blur(4px)" }
+                      }
+                      animate={
+                        reduce
+                          ? {
+                              opacity: 1,
+                              transition: {
+                                duration: 0.18,
+                                ease: EASE_OUT,
+                              },
+                            }
+                          : {
+                              opacity: 1,
+                              y: 0,
+                              filter: "blur(0px)",
+                              transition: {
+                                duration: 0.24,
+                                ease: EASE_OUT,
+                              },
+                            }
+                      }
+                      exit={
+                        reduce
+                          ? {
+                              opacity: 0,
+                              transition: {
+                                duration: 0.14,
+                                ease: EASE_OUT,
+                              },
+                            }
+                          : {
+                              opacity: 0,
+                              y: -8,
+                              filter: "blur(4px)",
+                              transition: {
+                                duration: 0.16,
+                                ease: EASE_OUT,
+                              },
+                            }
+                      }
+                    >
+                      {children}
+                    </motion.div>
+                  </AnimatePresence>
+                </motion.div>
+              </motion.div>
+            </div>
+          )}
+        </PresenceGate>
+      ) : null}
+    </AnimatePresence>
+  );
+}