motion-ui-skill 2.0.0

package/components/motion/checkbox.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useId } from "react";
+import { EASE_OUT, SPRING_PRESS } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+const CHECK_PATH = "M5 13l4 4L19 7";
+const INDETERMINATE_PATH = "M6 12h12";
+
+export interface CheckboxProps {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  disabled?: boolean;
+  indeterminate?: boolean;
+  label?: string;
+  className?: string;
+  id?: string;
+  "aria-label"?: string;
+  /** Associates an external message (e.g. a form error) with the control. */
+  "aria-describedby"?: string;
+}
+
+export function Checkbox({
+  checked,
+  onCheckedChange,
+  disabled,
+  indeterminate,
+  label,
+  className,
+  id: idProp,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+}: CheckboxProps) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  const reduce = useReducedMotion();
+  const showMark = checked || indeterminate;
+  const path = indeterminate ? INDETERMINATE_PATH : CHECK_PATH;
+
+  return (
+    <label
+      htmlFor={id}
+      className={cn(
+        "inline-flex items-center gap-3",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        className,
+      )}
+    >
+      <motion.button
+        id={id}
+        type="button"
+        role="checkbox"
+        aria-checked={indeterminate ? "mixed" : checked}
+        aria-label={ariaLabel}
+        aria-describedby={ariaDescribedBy}
+        disabled={disabled}
+        onClick={() => !disabled && onCheckedChange(!checked)}
+        whileTap={reduce || disabled ? undefined : { scale: 0.92 }}
+        transition={SPRING_PRESS}
+        data-state={
+          checked ? "checked" : indeterminate ? "indeterminate" : "unchecked"
+        }
+        className={cn(
+          "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-2 outline-none transition-colors duration-200",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          "disabled:cursor-not-allowed disabled:opacity-60",
+          showMark
+            ? "border-primary bg-primary text-primary-foreground"
+            : "border-muted-foreground/50 bg-background hover:border-muted-foreground",
+        )}
+      >
+        <AnimatePresence initial={false}>
+          {showMark ? (
+            <motion.svg
+              key={indeterminate ? "indeterminate" : "checked"}
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={3}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              initial={reduce ? { opacity: 1 } : { opacity: 0, scale: 0.5 }}
+              animate={reduce ? { opacity: 1 } : { opacity: 1, scale: 1 }}
+              exit={
+                reduce
+                  ? { opacity: 0 }
+                  : { opacity: 0, scale: 0.5, filter: "blur(4px)" }
+              }
+              transition={
+                reduce ? { duration: 0 } : { duration: 0.16, ease: EASE_OUT }
+              }
+              aria-hidden
+            >
+              <title>{indeterminate ? "Partially selected" : "Selected"}</title>
+              <motion.path
+                d={path}
+                initial={reduce ? { pathLength: 1 } : { pathLength: 0 }}
+                animate={{ pathLength: 1 }}
+                transition={
+                  reduce
+                    ? { duration: 0 }
+                    : {
+                        duration: indeterminate ? 0.2 : 0.3,
+                        ease: EASE_OUT,
+                        delay: 0.04,
+                      }
+                }
+              />
+            </motion.svg>
+          ) : null}
+        </AnimatePresence>
+      </motion.button>
+      {label ? (
+        <span className={cn("select-none text-sm text-foreground", disabled && "opacity-60")}>
+          {label}
+        </span>
+      ) : null}
+    </label>
+  );
+}

package/components/motion/chip.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { X } from "lucide-react";
+import {
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { type ReactNode } from "react";
+import { SPRING_BOUNCE, SPRING_PRESS } from "@/lib/ease";
+import { useHaptic } from "@/lib/hooks/use-haptic";
+import { cn } from "@/lib/utils";
+
+export interface ChipProps extends Omit<HTMLMotionProps<"div">, "children"> {
+  label: ReactNode;
+  icon?: ReactNode;
+  badge?: string | number;
+  selected?: boolean;
+  onSelect?: () => void;
+  onDismiss?: () => void;
+  variant?: "default" | "outline" | "secondary";
+  size?: "sm" | "md";
+  disabled?: boolean;
+  className?: string;
+}
+
+export function Chip({
+  label,
+  icon,
+  badge,
+  selected = false,
+  onSelect,
+  onDismiss,
+  variant = "default",
+  size = "md",
+  disabled = false,
+  className,
+  ...props
+}: ChipProps) {
+  const shouldReduceMotion = useReducedMotion();
+  const triggerHaptic = useHaptic();
+
+  const handleSelect = () => {
+    if (disabled || !onSelect) return;
+    triggerHaptic("selection");
+    onSelect();
+  };
+
+  const handleDismiss = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (disabled || !onDismiss) return;
+    triggerHaptic("light");
+    onDismiss();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.target !== e.currentTarget || (e.key !== "Enter" && e.key !== " ")) return;
+    e.preventDefault();
+    handleSelect();
+  };
+
+  return (
+    <motion.div
+      layout
+      initial={shouldReduceMotion ? false : { opacity: 0, scale: 0.85 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.8, transition: { duration: 0.15 } }}
+      whileTap={shouldReduceMotion || disabled || !onSelect ? undefined : { scale: 0.95 }}
+      transition={SPRING_BOUNCE}
+      onClick={handleSelect}
+      onKeyDown={handleKeyDown}
+      role={onSelect ? "button" : undefined}
+      tabIndex={onSelect && !disabled ? 0 : undefined}
+      aria-pressed={onSelect ? selected : undefined}
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full border font-medium transition-colors select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        size === "sm" ? "h-6 px-2.5 text-[11px]" : "h-[1.875rem] px-3 text-xs",
+        onSelect && !disabled && "cursor-pointer",
+        selected
+          ? "border-primary bg-primary text-primary-foreground shadow-sm shadow-primary/20"
+          : variant === "outline"
+          ? "border-border bg-background text-foreground hover:bg-muted"
+          : "border-transparent bg-muted text-muted-foreground hover:text-foreground",
+        disabled && "opacity-40 cursor-not-allowed",
+        className
+      )}
+      {...props}
+    >
+      {icon && <span className="size-3.5 shrink-0">{icon}</span>}
+      <span>{label}</span>
+
+      {badge !== undefined && (
+        <span
+          className={cn(
+            "rounded-full px-1.5 py-[0.125rem] text-[10px] font-semibold tabular-nums",
+            selected
+              ? "bg-primary-foreground/20 text-primary-foreground"
+              : "bg-background text-muted-foreground border border-border"
+          )}
+        >
+          {badge}
+        </span>
+      )}
+
+      {onDismiss && !disabled && (
+        <motion.button
+          type="button"
+          onClick={handleDismiss}
+          whileTap={shouldReduceMotion ? undefined : { scale: 0.8 }}
+          aria-label={`Remove ${label}`}
+          className={cn(
+            "-mr-1 ml-0.5 flex size-4 items-center justify-center rounded-full hover:bg-black/10 dark:hover:bg-white/20 transition-colors focus:outline-none",
+            selected ? "text-primary-foreground" : "text-muted-foreground hover:text-foreground"
+          )}
+        >
+          <X className="size-3" />
+        </motion.button>
+      )}
+    </motion.div>
+  );
+}

package/components/motion/chromatic-text-reveal.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import {
+  type MotionStyle,
+  motion,
+  type UseInViewOptions,
+  useInView,
+  useReducedMotion,
+} from "motion/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { EASE_IN_OUT, EASE_OUT } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+const CHROMATIC_PALETTE = [
+  "#60a5fa",
+  "#818cf8",
+  "#c084fc",
+  "#fb7185",
+  "#fbbf24",
+];
+
+const TRAIL_HALF_WIDTH = 14;
+const REVEAL_START = `-${TRAIL_HALF_WIDTH}%`;
+const REVEAL_FINISH = `${100 + TRAIL_HALF_WIDTH}%`;
+
+export type ChromaticTextRevealProps = {
+  /** Sentence fragment that remains fixed while the final word changes. */
+  prefix: string;
+  /** Words revealed one after another after the fixed prefix. */
+  words: string[];
+  /** Colors used along the moving chromatic edge. */
+  colors?: string[];
+  /** Final text color after the sweep passes. */
+  foregroundColor?: string;
+  /** Sweep duration in seconds. */
+  duration?: number;
+  /** Delay before the first sweep, in seconds. */
+  delay?: number;
+  /** Rest after a word finishes revealing, in seconds. */
+  pauseDuration?: number;
+  /** Returns to the first word after the final word. */
+  loop?: boolean;
+  /** Starts when the text enters the viewport. */
+  startOnView?: boolean;
+  /** Only starts on the first viewport entry. */
+  once?: boolean;
+  /** IntersectionObserver root margin used by the viewport trigger. */
+  inViewMargin?: UseInViewOptions["margin"];
+  className?: string;
+};
+
+function composeChromaticGradient(colors: string[], foregroundColor: string) {
+  const palette = colors.length > 0 ? colors : CHROMATIC_PALETTE;
+  const colorStops = palette.map((color, index) => {
+    const offset =
+      palette.length === 1
+        ? 0
+        : -TRAIL_HALF_WIDTH +
+          (index / (palette.length - 1)) * TRAIL_HALF_WIDTH * 2;
+    const operator = offset < 0 ? "-" : "+";
+    const distance = Number(Math.abs(offset).toFixed(2));
+    return `${color} calc(var(--chromatic-sweep) ${operator} ${distance}%)`;
+  });
+
+  return `linear-gradient(90deg, ${foregroundColor} 0%, ${foregroundColor} calc(var(--chromatic-sweep) - ${TRAIL_HALF_WIDTH}%), ${colorStops.join(", ")}, transparent calc(var(--chromatic-sweep) + ${TRAIL_HALF_WIDTH}%), transparent 100%)`;
+}
+
+export function ChromaticTextReveal({
+  prefix,
+  words,
+  colors = CHROMATIC_PALETTE,
+  foregroundColor = "var(--foreground)",
+  duration = 1.2,
+  delay = 0,
+  pauseDuration = 0.8,
+  loop = true,
+  startOnView = true,
+  once = true,
+  inViewMargin,
+  className,
+}: ChromaticTextRevealProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const timerRef = useRef<number | null>(null);
+  const [wordIndex, setWordIndex] = useState(0);
+  const reduceMotion = useReducedMotion();
+  const isInView = useInView(ref, {
+    once,
+    margin: inViewMargin,
+    amount: 0.4,
+  });
+  const shouldReveal = !startOnView || isInView || reduceMotion;
+  const backgroundImage = composeChromaticGradient(colors, foregroundColor);
+  const hasWords = words.length > 0;
+  const activeIndex = hasWords ? wordIndex % words.length : 0;
+  const activeWord = words[activeIndex] ?? "";
+  const sizingWords = Array.from(new Set(words));
+
+  const clearPendingWord = useCallback(() => {
+    if (timerRef.current !== null) {
+      window.clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  const scheduleNextWord = useCallback(() => {
+    clearPendingWord();
+    const isLastWord = activeIndex === words.length - 1;
+    if (
+      reduceMotion ||
+      !shouldReveal ||
+      words.length < 2 ||
+      (isLastWord && !loop)
+    ) {
+      return;
+    }
+
+    timerRef.current = window.setTimeout(() => {
+      setWordIndex((index) => (index + 1) % words.length);
+    }, pauseDuration * 1000);
+  }, [
+    activeIndex,
+    clearPendingWord,
+    loop,
+    pauseDuration,
+    reduceMotion,
+    shouldReveal,
+    words.length,
+  ]);
+
+  useEffect(() => clearPendingWord, [clearPendingWord]);
+
+  return (
+    <span ref={ref} className={cn("inline-flex items-baseline", className)}>
+      <span className="whitespace-nowrap">
+        {prefix}
+        {hasWords ? "\u00A0" : null}
+      </span>
+      {hasWords ? (
+        <span className="relative inline-grid">
+          {sizingWords.map((word) => (
+            <span
+              key={word}
+              aria-hidden
+              className="invisible col-start-1 row-start-1 whitespace-nowrap"
+            >
+              {word}
+            </span>
+          ))}
+          {/* Moving a clipped text gradient defines this effect. Paint
+              containment bounds that deliberate repaint to the active word. */}
+          <motion.span
+            key={`${activeWord}-${activeIndex}`}
+            aria-hidden
+            initial={
+              reduceMotion
+                ? false
+                : {
+                    opacity: 0.56,
+                    filter: "blur(6px)",
+                    transform: "translateY(5px)",
+                  }
+            }
+            animate={{
+              "--chromatic-sweep": shouldReveal
+                ? REVEAL_FINISH
+                : REVEAL_START,
+              opacity: 1,
+              filter: "blur(0px)",
+              transform: "translateY(0px)",
+            }}
+            transition={{
+              "--chromatic-sweep": reduceMotion
+                ? { duration: 0 }
+                : { duration, delay, ease: EASE_IN_OUT },
+              opacity: reduceMotion
+                ? { duration: 0 }
+                : { duration: 0.28, ease: EASE_OUT },
+              filter: reduceMotion
+                ? { duration: 0 }
+                : { duration: 0.36, ease: EASE_OUT },
+              transform: reduceMotion
+                ? { duration: 0 }
+                : { duration: 0.36, ease: EASE_OUT },
+            }}
+            onAnimationComplete={scheduleNextWord}
+            className="absolute start-0 top-0 whitespace-nowrap bg-clip-text text-transparent [background-image:var(--chromatic-gradient)] [contain:paint]"
+            style={{
+              "--chromatic-sweep": reduceMotion
+                ? REVEAL_FINISH
+                : REVEAL_START,
+              "--chromatic-gradient": backgroundImage,
+              backgroundSize: "100% 100%",
+              backgroundRepeat: "no-repeat",
+            } as MotionStyle}
+          >
+            {activeWord}
+          </motion.span>
+          <span className="sr-only">{activeWord}</span>
+        </span>
+      ) : null}
+    </span>
+  );
+}

package/components/motion/collapsible.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { ChevronDown } from "lucide-react";
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useId, useState, type ReactNode } from "react";
+import { EASE_OUT, SPRING_LAYOUT, SPRING_PRESS } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export interface CollapsibleProps extends Omit<HTMLMotionProps<"div">, "children" | "title"> {
+  title: ReactNode;
+  children: ReactNode;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function Collapsible({
+  title,
+  children,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  disabled = false,
+  className,
+  ...props
+}: CollapsibleProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const contentId = useId();
+  const shouldReduceMotion = useReducedMotion();
+
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+
+  const toggle = () => {
+    if (disabled) return;
+    const next = !isOpen;
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  return (
+    <motion.div
+      className={cn(
+        "rounded-2xl border border-border bg-card overflow-hidden transition-colors",
+        disabled && "opacity-50",
+        className
+      )}
+      {...props}
+    >
+      {/* Header Trigger */}
+      <motion.button
+        type="button"
+        disabled={disabled}
+        onClick={toggle}
+        whileTap={shouldReduceMotion || disabled ? undefined : { scale: 0.99 }}
+        transition={SPRING_PRESS}
+        aria-expanded={isOpen}
+        aria-controls={contentId}
+        className="flex w-full items-center justify-between p-4 text-left font-medium text-foreground hover:bg-muted/40 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+      >
+        <div className="flex-1 text-sm tracking-tight">{title}</div>
+        <motion.span
+          animate={{ rotate: isOpen ? 180 : 0 }}
+          transition={shouldReduceMotion ? { duration: 0 } : SPRING_LAYOUT}
+          className="ml-2 text-muted-foreground"
+        >
+          <ChevronDown className="size-4" />
+        </motion.span>
+      </motion.button>
+
+      {/* Expandable Content Panel */}
+      <AnimatePresence initial={false}>
+        {isOpen && (
+          <motion.div
+            id={contentId}
+            initial={{ opacity: 0, height: 0 }}
+            animate={{
+              opacity: 1,
+              height: "auto",
+              transition: shouldReduceMotion
+                ? { duration: 0 }
+                : { height: SPRING_LAYOUT, opacity: { duration: 0.2, ease: EASE_OUT } },
+            }}
+            exit={{
+              opacity: 0,
+              height: 0,
+              transition: shouldReduceMotion
+                ? { duration: 0 }
+                : { height: { duration: 0.2 }, opacity: { duration: 0.15 } },
+            }}
+            className="overflow-hidden"
+          >
+            <div className="border-t border-border/60 p-4 pt-3 text-xs text-muted-foreground leading-relaxed">
+              {children}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  );
+}