motion-ui-skill 2.0.0

package/components/motion/card-folder.tsx

@@ -0,0 +1,345 @@
+"use client";
+
+import { EllipsisVertical, Eye, EyeOff } from "lucide-react";
+import {
+  AnimatePresence,
+  animate,
+  motion,
+  useMotionValue,
+  useReducedMotion,
+  useTransform,
+} from "motion/react";
+import { type ReactNode, useCallback, useEffect, useState } from "react";
+import { DigitSwap } from "@/components/motion/digit-swap";
+import {
+  EASE_IN_OUT,
+  EASE_OUT,
+  SPRING_LAYOUT,
+  SPRING_PRESS,
+} from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+// The two purse layers collapse as one material surface after the card starts
+// moving, then reverse immediately so closing feels like the card is caught.
+const PURSE_MORPH_TRANSITION = {
+  duration: 0.28,
+  ease: EASE_IN_OUT,
+} as const;
+const PURSE_REDUCED_TRANSITION = {
+  duration: 0.16,
+  ease: EASE_OUT,
+} as const;
+
+export interface CardFolderProps {
+  title: string;
+  cardNumber: string;
+  expiry: string;
+  cvv: string;
+  card: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  detailsVisible?: boolean;
+  defaultDetailsVisible?: boolean;
+  onDetailsVisibleChange?: (visible: boolean) => void;
+  onClick?: () => void;
+  onAction?: () => void;
+  ariaLabel?: string;
+  actionLabel?: string;
+  disabled?: boolean;
+  className?: string;
+  cardClassName?: string;
+}
+
+/**
+ * A landscape card tucked into an animated folder sleeve. Pressing the folder
+ * lifts the card forward while the purse compresses into its bottom seam; a
+ * separate privacy control reveals its number and CVV.
+ */
+export function CardFolder({
+  title,
+  cardNumber,
+  expiry,
+  cvv,
+  card,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  detailsVisible,
+  defaultDetailsVisible = false,
+  onDetailsVisibleChange,
+  onClick,
+  onAction,
+  ariaLabel,
+  actionLabel,
+  disabled = false,
+  className,
+  cardClassName,
+}: CardFolderProps) {
+  const reduce = useReducedMotion();
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const [internalDetailsVisible, setInternalDetailsVisible] = useState(
+    defaultDetailsVisible,
+  );
+  const openControlled = open !== undefined;
+  const detailsControlled = detailsVisible !== undefined;
+  const isOpen = open ?? internalOpen;
+  const areDetailsVisible = detailsVisible ?? internalDetailsVisible;
+  const transition = reduce ? { duration: 0 } : SPRING_LAYOUT;
+  const normalizedCardNumber = cardNumber.replace(/\D/g, "");
+  const visibleLastFour = normalizedCardNumber.slice(-4).padStart(4, "•");
+  const revealedCardNumber =
+    normalizedCardNumber.match(/.{1,4}/g)?.join(" ") ?? visibleLastFour;
+  const maskedCvv = "•".repeat(Math.max(3, cvv.length));
+  const defaultAriaLabel = `${isOpen ? "Close" : "Open"} ${title}, card ending in ${visibleLastFour}, expires ${expiry}`;
+  const progress = useMotionValue(isOpen ? 1 : 0);
+  const cardTransform = useTransform(progress, (value) => {
+    const boundedProgress = Math.min(1, Math.max(0, value));
+    const lift = Math.sin(Math.PI * boundedProgress);
+    return `translateY(${-8 * lift}%) scale(${1 + 0.01 * lift})`;
+  });
+  const backTransform = useTransform(
+    progress,
+    [0, 1],
+    ["translateY(0%) scaleY(1)", "translateY(18%) scaleY(0.18)"],
+  );
+  const frontTransform = useTransform(
+    progress,
+    [0, 1],
+    ["translateY(0%) rotateX(0deg)", "translateY(18%) rotateX(-72deg)"],
+  );
+  const purseOpacity = useTransform(progress, [0, 0.76, 1], [1, 1, 0]);
+
+  useEffect(() => {
+    const controls = animate(
+      progress,
+      isOpen ? 1 : 0,
+      reduce ? { duration: 0 } : PURSE_MORPH_TRANSITION,
+    );
+    return () => controls.stop();
+  }, [isOpen, progress, reduce]);
+
+  const setOpen = useCallback(
+    (nextOpen: boolean) => {
+      if (disabled) return;
+      if (!openControlled) setInternalOpen(nextOpen);
+      onOpenChange?.(nextOpen);
+    },
+    [disabled, onOpenChange, openControlled],
+  );
+
+  const handleClick = () => {
+    setOpen(!isOpen);
+    onClick?.();
+  };
+
+  const toggleDetails = () => {
+    if (disabled) return;
+    const nextVisible = !areDetailsVisible;
+    if (!detailsControlled) setInternalDetailsVisible(nextVisible);
+    onDetailsVisibleChange?.(nextVisible);
+  };
+
+  return (
+    <div
+      data-open={isOpen ? "true" : "false"}
+      data-details-visible={areDetailsVisible ? "true" : "false"}
+      className={cn(
+        "relative aspect-[1029/592] w-96 max-w-full select-none [perspective:1200px]",
+        className,
+      )}
+    >
+      <motion.button
+        type="button"
+        disabled={disabled}
+        aria-label={ariaLabel ?? defaultAriaLabel}
+        aria-expanded={isOpen}
+        onClick={handleClick}
+        whileTap={reduce || disabled ? undefined : { scale: 0.96 }}
+        transition={reduce ? { duration: 0 } : SPRING_PRESS}
+        className="absolute inset-0 block rounded-2xl text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-4 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <motion.span
+          data-slot="card-folder-back"
+          aria-hidden="true"
+          initial={false}
+          animate={reduce ? { opacity: isOpen ? 0 : 1 } : undefined}
+          transition={PURSE_REDUCED_TRANSITION}
+          style={
+            reduce
+              ? undefined
+              : { opacity: purseOpacity, transform: backTransform }
+          }
+          className="absolute inset-x-0 bottom-0 top-[10%] rounded-2xl border border-foreground/10 bg-background [transform-origin:center_bottom]"
+        />
+
+        <motion.span
+          aria-hidden="true"
+          initial={false}
+          animate={
+            reduce ? { transform: "translateY(0%) scale(1)" } : undefined
+          }
+          style={reduce ? undefined : { transform: cardTransform }}
+          className={cn(
+            "absolute left-[4.7%] right-[4.7%] top-0 z-10 aspect-[1.586/1] overflow-hidden rounded-xl border border-foreground/10 bg-background [transform-origin:center_bottom] will-change-transform",
+            cardClassName,
+          )}
+        >
+          {card}
+        </motion.span>
+      </motion.button>
+
+      <motion.span
+        aria-hidden={isOpen}
+        inert={isOpen}
+        initial={false}
+        animate={reduce ? { opacity: isOpen ? 0 : 1 } : undefined}
+        transition={PURSE_REDUCED_TRANSITION}
+        style={
+          reduce
+            ? undefined
+            : { opacity: purseOpacity, transform: frontTransform }
+        }
+        className="pointer-events-none absolute inset-x-0 bottom-0 top-1/2 z-20 [backface-visibility:hidden] [transform-origin:center_bottom]"
+      >
+          <svg
+            aria-hidden="true"
+            viewBox="0 0 384 110"
+            preserveAspectRatio="none"
+            className="absolute inset-0 size-full overflow-visible"
+          >
+            <path
+              d="M0 17C15 7 31 4 49 4H87C110 4 126 17 144 32L158 44C176 59 206 59 225 43L240 30C257 16 271 4 295 4H335C354 4 370 8 384 18V94C384 103 377 110 368 110H16C7 110 0 103 0 94Z"
+              fill="var(--background)"
+              stroke="var(--foreground)"
+              strokeOpacity="0.12"
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d="M10 21C22 13 35 11 51 11H85C105 11 120 23 137 37L153 50C175 68 208 68 231 49L246 36C262 23 275 11 297 11H333C350 11 363 14 374 22V89C374 97 369 101 360 101H24C15 101 10 96 10 89Z"
+              fill="none"
+              stroke="var(--foreground)"
+              strokeDasharray="5 5"
+              strokeLinecap="round"
+              strokeOpacity="0.22"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+
+          <span className="absolute inset-x-[5%] inset-y-0 z-10 flex min-w-0 flex-col justify-between py-4">
+            <span className="flex items-start justify-between pr-2">
+              <motion.button
+                key="card-details-visibility"
+                type="button"
+                disabled={disabled}
+                tabIndex={isOpen ? -1 : undefined}
+                aria-label={
+                  areDetailsVisible
+                    ? "Hide card details"
+                    : "Show card details"
+                }
+                aria-pressed={areDetailsVisible}
+                onClick={toggleDetails}
+                whileTap={reduce || disabled ? undefined : { scale: 0.96 }}
+                transition={reduce ? { duration: 0.12 } : SPRING_PRESS}
+                className={cn(
+                  "z-30 flex size-10 shrink-0 items-center justify-center rounded-full text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                  isOpen ? "pointer-events-none" : "pointer-events-auto",
+                )}
+              >
+                <AnimatePresence initial={false} mode="popLayout">
+                  <motion.span
+                    key={areDetailsVisible ? "hide" : "show"}
+                    initial={
+                      reduce
+                        ? { opacity: 0 }
+                        : { opacity: 0, scale: 0.25, filter: "blur(4px)" }
+                    }
+                    animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
+                    exit={
+                      reduce
+                        ? { opacity: 0 }
+                        : { opacity: 0, scale: 0.25, filter: "blur(4px)" }
+                    }
+                    transition={
+                      reduce
+                        ? { duration: 0.12 }
+                        : { type: "spring", duration: 0.3, bounce: 0 }
+                    }
+                    className="flex items-center justify-center"
+                  >
+                    {areDetailsVisible ? (
+                      <EyeOff className="size-4" aria-hidden="true" />
+                    ) : (
+                      <Eye className="size-4" aria-hidden="true" />
+                    )}
+                  </motion.span>
+                </AnimatePresence>
+              </motion.button>
+
+              <span className="flex shrink-0 items-end gap-3.5 pt-2">
+                <span className="flex flex-col gap-0.5">
+                  <span className="text-[9px] font-medium uppercase tracking-[0.12em] text-muted-foreground/65">
+                    Expiry
+                  </span>
+                  <span className="text-xs font-medium text-foreground tabular-nums">
+                    {expiry}
+                  </span>
+                </span>
+                <span className="flex flex-col gap-0.5">
+                  <span className="text-[9px] font-medium uppercase tracking-[0.12em] text-muted-foreground/65">
+                    CVV
+                  </span>
+                  <DigitSwap
+                    value={areDetailsVisible ? cvv : maskedCvv}
+                    animationKey={
+                      areDetailsVisible ? "revealed" : "masked"
+                    }
+                    direction={areDetailsVisible ? "up" : "down"}
+                    className="text-xs font-medium text-foreground tabular-nums"
+                  />
+                </span>
+              </span>
+            </span>
+            <span className="flex min-w-0 items-baseline justify-between gap-4">
+              <span className="truncate text-lg font-medium leading-tight text-foreground">
+                {title}
+              </span>
+              <DigitSwap
+                value={
+                  areDetailsVisible
+                    ? revealedCardNumber
+                    : `•••• •••• •••• ${visibleLastFour}`
+                }
+                animationKey={areDetailsVisible ? "revealed" : "masked"}
+                direction={areDetailsVisible ? "up" : "down"}
+                suffixLength={4}
+                glyphClassName={
+                  areDetailsVisible
+                    ? "text-foreground"
+                    : "text-muted-foreground"
+                }
+                suffixClassName="text-foreground"
+                className="truncate font-mono text-xs tracking-[0.08em] tabular-nums"
+              />
+            </span>
+          </span>
+      </motion.span>
+
+      {onAction ? (
+        <motion.button
+          type="button"
+          disabled={disabled}
+          aria-label={actionLabel ?? `Open actions for ${title}`}
+          onClick={onAction}
+          animate={{ y: isOpen && !reduce ? -14 : 0 }}
+          whileTap={reduce || disabled ? undefined : { scale: 0.96 }}
+          transition={transition}
+          className="absolute right-[2.6%] top-[10%] z-10 flex size-10 -translate-y-1/2 items-center justify-center rounded-full text-white/65 outline-none transition-colors hover:bg-white/10 hover:text-white focus-visible:ring-2 focus-visible:ring-white disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <EllipsisVertical className="size-4" aria-hidden="true" />
+        </motion.button>
+      ) : null}
+    </div>
+  );
+}

package/components/motion/card-resize.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import { X } from "lucide-react";
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useId, useRef, useState, useEffect } from "react";
+import { SPRING_PANEL, SPRING_PRESS } from "@/lib/ease";
+import { useHaptic } from "@/lib/hooks/use-haptic";
+import { cn } from "@/lib/utils";
+
+export interface CardResizeItem {
+  id: string;
+  title: string;
+  category: string;
+  image?: string;
+  description: string;
+  content?: React.ReactNode;
+}
+
+export interface CardResizeProps extends HTMLMotionProps<"div"> {
+  card: CardResizeItem;
+  className?: string;
+}
+
+const FOCUSABLE_SELECTOR = "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])";
+
+export function CardResize({ card, className, ...props }: CardResizeProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const shouldReduceMotion = useReducedMotion();
+  const triggerHaptic = useHaptic();
+  const compactRef = useRef<HTMLDivElement>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const titleId = useId();
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const previousFocus = document.activeElement instanceof HTMLElement
+      ? document.activeElement
+      : null;
+    const focusable = () => Array.from(
+      dialogRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR) ?? []
+    );
+    const frame = requestAnimationFrame(() => (focusable()[0] ?? dialogRef.current)?.focus());
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setIsOpen(false);
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const elements = focusable();
+      if (!elements.length) {
+        e.preventDefault();
+        dialogRef.current?.focus();
+        return;
+      }
+      const first = elements[0];
+      const last = elements[elements.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      cancelAnimationFrame(frame);
+      document.removeEventListener("keydown", handleKeyDown);
+      if (previousFocus?.isConnected) previousFocus.focus();
+    };
+  }, [isOpen]);
+
+  const toggle = () => {
+    triggerHaptic(isOpen ? "light" : "medium");
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <>
+      {/* Compact Resting Card */}
+      <motion.div
+        ref={compactRef}
+        role="button"
+        tabIndex={0}
+        aria-haspopup="dialog"
+        layoutId={shouldReduceMotion ? undefined : `card-container-${card.id}`}
+        onClick={toggle}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            toggle();
+          }
+        }}
+        whileHover={shouldReduceMotion ? undefined : { y: -4 }}
+        whileTap={shouldReduceMotion ? undefined : { scale: 0.98 }}
+        transition={SPRING_PRESS}
+        className={cn(
+          "group relative cursor-pointer overflow-hidden rounded-2xl border border-border bg-card shadow-sm hover:shadow-md transition-shadow",
+          className
+        )}
+        {...props}
+      >
+        {card.image && (
+          <motion.div
+            layoutId={shouldReduceMotion ? undefined : `card-image-${card.id}`}
+            className="h-44 w-full overflow-hidden bg-muted"
+          >
+            <img
+              src={card.image}
+              alt={card.title}
+              className="size-full object-cover transition-transform duration-500 group-hover:scale-105"
+            />
+          </motion.div>
+        )}
+        <div className="p-4 space-y-1">
+          <motion.span
+            layoutId={shouldReduceMotion ? undefined : `card-category-${card.id}`}
+            className="text-[10px] font-semibold uppercase tracking-wider text-primary"
+          >
+            {card.category}
+          </motion.span>
+          <motion.h3
+            layoutId={shouldReduceMotion ? undefined : `card-title-${card.id}`}
+            className="text-sm font-semibold text-foreground line-clamp-1"
+          >
+            {card.title}
+          </motion.h3>
+          <p className="text-xs text-muted-foreground line-clamp-2 pt-0.5">
+            {card.description}
+          </p>
+        </div>
+      </motion.div>
+
+      {/* Expanded Modal Overlay */}
+      <AnimatePresence>
+        {isOpen && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6">
+            {/* Backdrop */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              onClick={toggle}
+              className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+            />
+
+            {/* Expanded Surface */}
+            <motion.div
+              ref={dialogRef}
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby={titleId}
+              tabIndex={-1}
+              layoutId={shouldReduceMotion ? undefined : `card-container-${card.id}`}
+              transition={SPRING_PANEL}
+              className="relative z-10 w-full max-w-lg overflow-hidden rounded-3xl border border-border bg-card shadow-2xl"
+            >
+              {card.image && (
+                <motion.div
+                  layoutId={shouldReduceMotion ? undefined : `card-image-${card.id}`}
+                  className="h-60 w-full overflow-hidden bg-muted relative"
+                >
+                  <img
+                    src={card.image}
+                    alt={card.title}
+                    className="size-full object-cover"
+                  />
+                  <button
+                    type="button"
+                    aria-label="Close card"
+                    onClick={toggle}
+                    className="absolute top-3 right-3 z-20 rounded-full bg-black/50 p-2 text-white hover:bg-black/70 backdrop-blur-sm transition-colors"
+                  >
+                    <X className="size-4" />
+                  </button>
+                </motion.div>
+              )}
+
+              <div className="p-6 space-y-3">
+                <div className="flex items-center justify-between">
+                  <motion.span
+                    layoutId={shouldReduceMotion ? undefined : `card-category-${card.id}`}
+                    className="text-xs font-semibold uppercase tracking-wider text-primary"
+                  >
+                    {card.category}
+                  </motion.span>
+                  {!card.image && (
+                    <button
+                      type="button"
+                      aria-label="Close card"
+                      onClick={toggle}
+                      className="rounded-full p-1.5 text-muted-foreground hover:text-foreground hover:bg-muted"
+                    >
+                      <X className="size-4" />
+                    </button>
+                  )}
+                </div>
+
+                <motion.h2
+                  id={titleId}
+                  layoutId={shouldReduceMotion ? undefined : `card-title-${card.id}`}
+                  className="text-xl font-bold text-foreground"
+                >
+                  {card.title}
+                </motion.h2>
+
+                <p className="text-sm text-muted-foreground leading-relaxed">
+                  {card.description}
+                </p>
+
+                {card.content && (
+                  <div className="pt-2 border-t border-border">
+                    {card.content}
+                  </div>
+                )}
+              </div>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}