motion-ui-skill 2.0.0

package/components/motion/text-shimmer.tsx

@@ -0,0 +1,34 @@
+import { cn } from "@/lib/utils";
+import type { ElementType, ReactNode } from "react";
+import {
+  TEXT_SHIMMER_CLASS_NAME,
+  TEXT_SHIMMER_KEYFRAMES,
+  textShimmerStyle,
+} from "@/lib/text-shimmer";
+
+export interface TextShimmerProps {
+  children: ReactNode;
+  as?: ElementType;
+  duration?: number;
+  className?: string;
+}
+
+export function TextShimmer({ children, as: Comp = "span", duration = 2.5, className }: TextShimmerProps) {
+  return (
+    <>
+      <style>
+        {TEXT_SHIMMER_KEYFRAMES}
+      </style>
+      <Comp
+        style={textShimmerStyle(duration)}
+        className={cn(
+          "inline-block",
+          TEXT_SHIMMER_CLASS_NAME,
+          className,
+        )}
+      >
+        {children}
+      </Comp>
+    </>
+  );
+}

package/components/motion/text-swap.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React from "react";
+import { SPRING_SWAP } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export interface TextSwapProps extends HTMLMotionProps<"span"> {
+  text: string | number;
+  direction?: "up" | "down";
+  className?: string;
+}
+
+export function TextSwap({
+  text,
+  direction = "up",
+  className,
+  ...props
+}: TextSwapProps) {
+  const shouldReduceMotion = useReducedMotion();
+
+  const yOffset = direction === "up" ? 20 : -20;
+
+  return (
+    <motion.span
+      className={cn("relative inline-flex overflow-hidden align-baseline", className)}
+      {...props}
+    >
+      <AnimatePresence mode="popLayout" initial={false}>
+        <motion.span
+          key={String(text)}
+          initial={
+            shouldReduceMotion
+              ? { opacity: 0 }
+              : { opacity: 0, y: yOffset, filter: "blur(2px)" }
+          }
+          animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+          exit={
+            shouldReduceMotion
+              ? { opacity: 0 }
+              : { opacity: 0, y: -yOffset, filter: "blur(2px)" }
+          }
+          transition={SPRING_SWAP}
+          className="inline-block"
+        >
+          {text}
+        </motion.span>
+      </AnimatePresence>
+    </motion.span>
+  );
+}

package/components/motion/theme-toggle.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useReducedMotion } from "motion/react";
+import { useEffect, useState, type ComponentPropsWithoutRef } from "react";
+import { ActionSwapIcon } from "@/components/motion/action-swap";
+import { EASE_OUT_CSS } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export type ThemeVariant = "rectangle" | "circle" | "circle-blur" | "blinds";
+
+export type RectStart =
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right"
+  | "center"
+  | "bottom-up";
+
+export interface ThemeToggleProps
+  extends Omit<ComponentPropsWithoutRef<"button">, "children" | "onClick"> {
+  /** Animation variant. Default: "rectangle". */
+  variant?: ThemeVariant;
+  /** Origin direction for the reveal. Default: "bottom-up". */
+  start?: RectStart;
+  iconClassName?: string;
+}
+
+const VT_STYLE_ID = "motion-theme-toggle-vt";
+
+// View transitions animate in CSS, not motion springs, so easing here is
+// either EASE_OUT_CSS or a keyword. The circle variants keep the Material
+// standard curve because their reveal expands symmetrically rather than
+// decelerating. Durations differ per variant to match native OS mode switches.
+const VT_CSS = `
+html[data-motion-vt="rect"]::view-transition-old(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+html[data-motion-vt="rect"]::view-transition-new(root) {
+  mix-blend-mode: normal;
+  animation: motion-rect-reveal 400ms ease-out;
+}
+html[data-motion-vt="circle"]::view-transition-old(root),
+html[data-motion-vt="circle-blur"]::view-transition-old(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+html[data-motion-vt="circle"]::view-transition-new(root) {
+  mix-blend-mode: normal;
+  animation: motion-circle-reveal 700ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+html[data-motion-vt="circle-blur"]::view-transition-new(root) {
+  mix-blend-mode: normal;
+  animation: motion-circle-blur-reveal 700ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+html[data-motion-vt="blinds"]::view-transition-old(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+/* Slats: a masked band widens inside every 72px tile, so the new theme opens
+   across the page like a shutter. The band edge has to be a registered custom
+   property — mask-image itself is not animatable, but it re-resolves every
+   frame the property ticks. mask-size fixes the tile at 72px rather than
+   letting a repeating gradient's last stop define it, which is what keeps the
+   20px soft edge from dragging the tile wider than the slat and leaving a
+   feathered gap that never closes; it also means both ends land clean, fully
+   transparent at -20px and fully opaque at 72px. Falling back to no mask
+   (unregistered property, so the var is invalid) reveals the page in one
+   step. */
+@property --motion-vt-slat {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 72px;
+}
+html[data-motion-vt="blinds"]::view-transition-new(root) {
+  mix-blend-mode: normal;
+  mask-image: linear-gradient(
+    90deg,
+    #000 0 var(--motion-vt-slat),
+    transparent calc(var(--motion-vt-slat) + 20px)
+  );
+  mask-size: 72px 100%;
+  mask-repeat: repeat;
+  animation: motion-blinds-reveal 700ms ${EASE_OUT_CSS};
+}
+@keyframes motion-rect-reveal {
+  from { clip-path: var(--motion-vt-from, inset(100% 0 0 0)); }
+  to   { clip-path: inset(0 0 0 0); }
+}
+@keyframes motion-circle-reveal {
+  from { clip-path: circle(0% at var(--motion-vt-origin, 50% 100%)); }
+  to   { clip-path: circle(150% at var(--motion-vt-origin, 50% 100%)); }
+}
+@keyframes motion-circle-blur-reveal {
+  from { clip-path: circle(0% at var(--motion-vt-origin, 50% 100%)); filter: blur(8px); }
+  to   { clip-path: circle(150% at var(--motion-vt-origin, 50% 100%)); filter: blur(0px); }
+}
+@keyframes motion-blinds-reveal {
+  from { --motion-vt-slat: -20px; }
+  to   { --motion-vt-slat: 72px; }
+}
+`;
+
+const RECT_FROM: Record<RectStart, string> = {
+  "top-left":    "inset(0 100% 100% 0)",
+  "top-right":   "inset(0 0 100% 100%)",
+  "bottom-left": "inset(100% 100% 0 0)",
+  "bottom-right":"inset(100% 0 0 100%)",
+  center:        "inset(50% 50% 50% 50%)",
+  "bottom-up":   "inset(100% 0 0 0)",
+};
+
+const CIRCLE_ORIGIN: Record<RectStart, string> = {
+  "top-left":    "0% 0%",
+  "top-right":   "100% 0%",
+  "bottom-left": "0% 100%",
+  "bottom-right":"100% 100%",
+  center:        "50% 50%",
+  "bottom-up":   "50% 100%",
+};
+
+export function useThemeToggle({
+  variant = "rectangle",
+  start = "bottom-up",
+}: { variant?: ThemeVariant; start?: RectStart } = {}) {
+  const { setTheme, resolvedTheme } = useTheme();
+  const reduce = useReducedMotion() ?? false;
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  useEffect(() => {
+    if (document.getElementById(VT_STYLE_ID)) return;
+    const el = document.createElement("style");
+    el.id = VT_STYLE_ID;
+    el.textContent = VT_CSS;
+    document.head.appendChild(el);
+  }, []);
+  const isDark = mounted && resolvedTheme === "dark";
+
+  const toggle = () => {
+    const next = isDark ? "light" : "dark";
+
+    if (reduce || !("startViewTransition" in document)) {
+      setTheme(next);
+      return;
+    }
+
+    const root = document.documentElement;
+
+    if (variant === "rectangle") {
+      root.style.setProperty("--motion-vt-from", RECT_FROM[start]);
+      root.dataset.motionVt = "rect";
+    } else if (variant === "blinds") {
+      // Slats sweep the whole viewport; there is no origin point to set.
+      root.dataset.motionVt = "blinds";
+    } else {
+      root.style.setProperty("--motion-vt-origin", CIRCLE_ORIGIN[start]);
+      root.dataset.motionVt = variant;
+    }
+
+    const vt = (
+      document as Document & {
+        startViewTransition(cb: () => void): { finished: Promise<void> };
+      }
+    ).startViewTransition(() => setTheme(next));
+
+    vt.finished.finally(() => {
+      delete root.dataset.motionVt;
+    });
+  };
+
+  return { isDark, mounted, toggle };
+}
+
+export function ThemeToggle({
+  variant = "rectangle",
+  start = "bottom-up",
+  className,
+  iconClassName,
+  ...rest
+}: ThemeToggleProps) {
+  const { isDark, mounted, toggle } = useThemeToggle({ variant, start });
+
+  return (
+    <button
+      type="button"
+      aria-label={mounted && isDark ? "Switch to light mode" : "Switch to dark mode"}
+      onClick={toggle}
+      className={cn("flex items-center justify-center", className)}
+      {...rest}
+    >
+      {mounted ? (
+        <ActionSwapIcon
+          value={isDark ? "dark" : "light"}
+          animation="blur"
+          className={iconClassName}
+        >
+          {isDark ? (
+            <Sun className={iconClassName} />
+          ) : (
+            <Moon className={iconClassName} />
+          )}
+        </ActionSwapIcon>
+      ) : (
+        <span className={iconClassName} aria-hidden="true" />
+      )}
+    </button>
+  );
+}

package/components/motion/tilt-card.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { motion, useMotionTemplate, 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 TiltCardProps {
+  children: ReactNode;
+  max?: number;
+  glare?: boolean;
+  className?: string;
+}
+
+export function TiltCard({ children, max = 12, glare = true, className }: TiltCardProps) {
+  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 rx = useMotionValue(0);
+  const ry = useMotionValue(0);
+  const gx = useMotionValue(50);
+  const gy = useMotionValue(50);
+
+  const srx = useSpring(rx, SPRING_MOUSE);
+  const sry = useSpring(ry, SPRING_MOUSE);
+
+  const onMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    const el = ref.current;
+    if (!el || !enabled) return;
+    const rect = el.getBoundingClientRect();
+    const px = (e.clientX - rect.left) / rect.width;
+    const py = (e.clientY - rect.top) / rect.height;
+    ry.set((px - 0.5) * max);
+    rx.set((0.5 - py) * max);
+    gx.set(px * 100);
+    gy.set(py * 100);
+  };
+
+  const onLeave = () => {
+    rx.set(0);
+    ry.set(0);
+  };
+
+  const transform = useMotionTemplate`perspective(1000px) rotateX(${srx}deg) rotateY(${sry}deg)`;
+  const glareBg = useMotionTemplate`radial-gradient(circle at ${gx}% ${gy}%, var(--foreground), transparent 50%)`;
+
+  return (
+    <motion.div
+      ref={ref}
+      onMouseMove={onMove}
+      onMouseLeave={onLeave}
+      style={{ transform, transformStyle: "preserve-3d" }}
+      className={cn("relative overflow-hidden rounded-2xl will-change-transform", className)}
+    >
+      {children}
+      {glare && enabled ? (
+        <motion.div
+          aria-hidden
+          style={{ background: glareBg }}
+          className="pointer-events-none absolute inset-0 opacity-15"
+        />
+      ) : null}
+    </motion.div>
+  );
+}

package/components/motion/timeline.tsx

@@ -0,0 +1,236 @@
+"use client";
+
+import {
+  AlertCircle,
+  Check,
+  ChevronDown,
+  Clock,
+  Loader2,
+  type LucideIcon,
+} from "lucide-react";
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useState, type ReactNode } from "react";
+import { EASE_OUT, SPRING_BOUNCE, SPRING_LAYOUT, SPRING_PRESS } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export type TimelineItemStatus = "completed" | "current" | "upcoming" | "failed";
+
+export interface TimelineItem {
+  id: string;
+  title: string;
+  description?: string;
+  timestamp?: string;
+  status: TimelineItemStatus;
+  icon?: LucideIcon | ReactNode;
+  tags?: string[];
+  content?: ReactNode;
+}
+
+export interface TimelineProps extends Omit<HTMLMotionProps<"div">, "children"> {
+  items: TimelineItem[];
+  orientation?: "vertical" | "horizontal";
+  collapsible?: boolean;
+  className?: string;
+}
+
+const STATUS_ICONS: Record<TimelineItemStatus, ReactNode> = {
+  completed: <Check className="size-3.5 stroke-[2.5]" />,
+  current: <Loader2 className="size-3.5" />,
+  upcoming: <Clock className="size-3.5" />,
+  failed: <AlertCircle className="size-3.5" />,
+};
+
+const STATUS_VARIANTS: Record<
+  TimelineItemStatus,
+  { circle: string; line: string; badge: string }
+> = {
+  completed: {
+    circle: "bg-emerald-500 text-white border-emerald-500 shadow-sm shadow-emerald-500/20",
+    line: "bg-emerald-500",
+    badge: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
+  },
+  current: {
+    circle: "bg-primary text-primary-foreground border-primary ring-4 ring-primary/20",
+    line: "bg-gradient-to-b from-primary to-border",
+    badge: "bg-primary/10 text-primary border-primary/20",
+  },
+  upcoming: {
+    circle: "bg-muted text-muted-foreground border-border",
+    line: "bg-border",
+    badge: "bg-muted text-muted-foreground border-border",
+  },
+  failed: {
+    circle: "bg-destructive text-destructive-foreground border-destructive shadow-sm shadow-destructive/20",
+    line: "bg-destructive/60",
+    badge: "bg-destructive/10 text-destructive border-destructive/20",
+  },
+};
+
+export function Timeline({
+  items,
+  orientation = "vertical",
+  collapsible = true,
+  className,
+  ...props
+}: TimelineProps) {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(
+    () => new Set(items.filter((i) => i.status === "current").map((i) => i.id))
+  );
+  const shouldReduceMotion = useReducedMotion();
+
+  const toggleExpand = (id: string) => {
+    if (!collapsible) return;
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <motion.div
+      role="list"
+      aria-label="Process timeline"
+      className={cn(
+        "relative w-full",
+        orientation === "vertical" ? "space-y-6" : "flex items-start gap-4 overflow-x-auto pb-4",
+        className
+      )}
+      {...props}
+    >
+      {items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        const isExpanded = expandedIds.has(item.id);
+        const variant = STATUS_VARIANTS[item.status];
+
+        return (
+          <div
+            key={item.id}
+            role="listitem"
+            className={cn(
+              "relative flex",
+              orientation === "vertical" ? "gap-4" : "flex-col items-center min-w-[200px]"
+            )}
+          >
+            {/* Connecting Track Line */}
+            {!isLast && orientation === "vertical" && (
+              <div
+                aria-hidden="true"
+                className={cn(
+                  "absolute left-4 top-8 -bottom-6 w-0.5 -translate-x-1/2 transition-colors",
+                  variant.line
+                )}
+              />
+            )}
+
+            {/* Status Node Circle */}
+            <motion.button
+              type="button"
+              onClick={() => toggleExpand(item.id)}
+              whileTap={shouldReduceMotion ? undefined : { scale: 0.92 }}
+              transition={SPRING_PRESS}
+              aria-expanded={isExpanded}
+              aria-label={`${item.title} - ${item.status}`}
+              className={cn(
+                "relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full border text-xs font-semibold transition-shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                variant.circle
+              )}
+            >
+              {React.isValidElement(item.icon) ? (
+                item.icon
+              ) : item.icon ? (
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                React.createElement(item.icon as any, { className: "size-4" })
+              ) : item.status === "current" && !shouldReduceMotion ? (
+                <Loader2 className="size-3.5 animate-spin" />
+              ) : (
+                STATUS_ICONS[item.status]
+              )}
+            </motion.button>
+
+            {/* Content Area */}
+            <div className="min-w-0 flex-1 pt-0.5">
+              <div
+                onClick={() => toggleExpand(item.id)}
+                className={cn(
+                  "flex items-baseline justify-between gap-2",
+                  collapsible && "cursor-pointer select-none"
+                )}
+              >
+                <div className="flex flex-wrap items-center gap-2">
+                  <h4 className="text-sm font-medium text-foreground tracking-tight">
+                    {item.title}
+                  </h4>
+                  {item.tags?.map((tag) => (
+                    <span
+                      key={tag}
+                      className="rounded-full border border-border/60 bg-muted/50 px-2 py-0.5 text-[10px] text-muted-foreground font-medium"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+
+                <div className="flex items-center gap-2">
+                  {item.timestamp && (
+                    <time className="text-xs text-muted-foreground tabular-nums font-normal">
+                      {item.timestamp}
+                    </time>
+                  )}
+                  {collapsible && (item.description || item.content) && (
+                    <motion.span
+                      animate={{ rotate: isExpanded ? 180 : 0 }}
+                      transition={shouldReduceMotion ? { duration: 0 } : SPRING_LAYOUT}
+                      className="text-muted-foreground"
+                    >
+                      <ChevronDown className="size-4" />
+                    </motion.span>
+                  )}
+                </div>
+              </div>
+
+              {/* Collapsible Details */}
+              <AnimatePresence initial={false}>
+                {isExpanded && (item.description || item.content) && (
+                  <motion.div
+                    key="content"
+                    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="pt-2 text-xs text-muted-foreground leading-relaxed">
+                      {item.description && <p>{item.description}</p>}
+                      {item.content && <div className="mt-3">{item.content}</div>}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          </div>
+        );
+      })}
+    </motion.div>
+  );
+}