motion-ui-skill 2.0.0

package/components/motion/split-text.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import {
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React from "react";
+import { SPRING_BOUNCE } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export interface SplitTextProps extends HTMLMotionProps<"span"> {
+  text: string;
+  by?: "words" | "chars";
+  delay?: number;
+  staggerDuration?: number;
+  mode?: "fade-up" | "pop" | "wave";
+  className?: string;
+}
+
+export function SplitText({
+  text,
+  by = "chars",
+  delay = 0,
+  staggerDuration = 0.03,
+  mode = "fade-up",
+  className,
+  ...props
+}: SplitTextProps) {
+  const shouldReduceMotion = useReducedMotion();
+
+  if (shouldReduceMotion) {
+    return <motion.span className={className} {...props}>{text}</motion.span>;
+  }
+
+  const words = text.split(" ");
+
+  const getVariants = () => {
+    switch (mode) {
+      case "pop":
+        return {
+          hidden: { opacity: 0, scale: 0.5 },
+          visible: { opacity: 1, scale: 1 },
+        };
+      case "wave":
+        return {
+          hidden: { opacity: 0, y: 12 },
+          visible: { opacity: 1, y: 0 },
+        };
+      case "fade-up":
+      default:
+        return {
+          hidden: { opacity: 0, y: 8 },
+          visible: { opacity: 1, y: 0 },
+        };
+    }
+  };
+
+  const variants = getVariants();
+
+  let globalIndex = 0;
+
+  return (
+    <motion.span
+      className={cn("inline-flex flex-wrap items-baseline select-none", className)}
+      {...props}
+    >
+      {words.map((word, wordIdx) => {
+        const chars = Array.from(word);
+
+        return (
+          <span key={wordIdx} className="inline-flex whitespace-nowrap">
+            {by === "words" ? (
+              <motion.span
+                initial="hidden"
+                animate="visible"
+                variants={variants}
+                transition={{
+                  ...SPRING_BOUNCE,
+                  delay: delay + wordIdx * (staggerDuration * 3),
+                }}
+                className="inline-block"
+              >
+                {word}
+              </motion.span>
+            ) : (
+              chars.map((char, charIdx) => {
+                const currentIndex = globalIndex++;
+                return (
+                  <motion.span
+                    key={charIdx}
+                    initial="hidden"
+                    animate="visible"
+                    variants={variants}
+                    transition={{
+                      ...SPRING_BOUNCE,
+                      delay: delay + currentIndex * staggerDuration,
+                    }}
+                    className="inline-block"
+                  >
+                    {char}
+                  </motion.span>
+                );
+              })
+            )}
+            {/* Space between words */}
+            {wordIdx < words.length - 1 && (
+              <span className="inline-block">&nbsp;</span>
+            )}
+          </span>
+        );
+      })}
+    </motion.span>
+  );
+}

package/components/motion/spotlight-card.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import {
+  motion,
+  useMotionTemplate,
+  useMotionValue,
+  useReducedMotion,
+  useSpring,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useRef } from "react";
+import { SPRING_MOUSE } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export interface SpotlightCardProps extends HTMLMotionProps<"div"> {
+  children: React.ReactNode;
+  spotlightColor?: string;
+  spotlightSize?: number;
+  showBorderBeam?: boolean;
+  borderBeamDuration?: number;
+  className?: string;
+}
+
+export function SpotlightCard({
+  children,
+  spotlightColor = "rgba(120, 119, 198, 0.15)",
+  spotlightSize = 350,
+  showBorderBeam = true,
+  borderBeamDuration = 8,
+  className,
+  ...props
+}: SpotlightCardProps) {
+  const cardRef = useRef<HTMLDivElement>(null);
+  const shouldReduceMotion = useReducedMotion();
+
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+
+  const springX = useSpring(mouseX, SPRING_MOUSE);
+  const springY = useSpring(mouseY, SPRING_MOUSE);
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (shouldReduceMotion || !cardRef.current) return;
+    const { left, top } = cardRef.current.getBoundingClientRect();
+    mouseX.set(e.clientX - left);
+    mouseY.set(e.clientY - top);
+  };
+
+  const background = useMotionTemplate`radial-gradient(${spotlightSize}px circle at ${springX}px ${springY}px, ${spotlightColor}, transparent 80%)`;
+
+  return (
+    <motion.div
+      ref={cardRef}
+      onMouseMove={handleMouseMove}
+      whileHover={shouldReduceMotion ? undefined : { y: -2 }}
+      transition={{ duration: 0.2 }}
+      className={cn(
+        "group relative overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-sm transition-shadow hover:shadow-lg dark:hover:shadow-primary/5",
+        className
+      )}
+      {...props}
+    >
+      {/* Dynamic Cursor Spotlight Layer */}
+      {!shouldReduceMotion && (
+        <motion.div
+          className="pointer-events-none absolute -inset-px rounded-2xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+          style={{ background }}
+        />
+      )}
+
+      {/* Animated Border Beam Highlight */}
+      {showBorderBeam && !shouldReduceMotion && (
+        <div className="pointer-events-none absolute inset-0 rounded-2xl overflow-hidden">
+          <div
+            className="absolute -inset-[100%] animate-none opacity-0 group-hover:animate-[spin_8s_linear_infinite] group-hover:opacity-40 transition-opacity duration-500"
+            style={{
+              background:
+                "conic-gradient(from 0deg, transparent 0 340deg, var(--primary) 360deg)",
+              animationDuration: `${borderBeamDuration}s`,
+            }}
+          />
+        </div>
+      )}
+
+      {/* Content Container */}
+      <div className="relative z-10 size-full">{children}</div>
+    </motion.div>
+  );
+}

package/components/motion/stepper.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { Check } from "lucide-react";
+import {
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React from "react";
+import { SPRING_BOUNCE, SPRING_LAYOUT, SPRING_PRESS } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export interface StepItem {
+  id: string;
+  title: string;
+  description?: string;
+}
+
+export interface StepperProps extends Omit<HTMLMotionProps<"div">, "onChange"> {
+  steps: StepItem[];
+  currentStep: number;
+  onStepClick?: (stepIndex: number) => void;
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+}
+
+export function Stepper({
+  steps,
+  currentStep,
+  onStepClick,
+  orientation = "horizontal",
+  className,
+  ...props
+}: StepperProps) {
+  const shouldReduceMotion = useReducedMotion();
+
+  return (
+    <motion.div
+      role="navigation"
+      aria-label="Progress Stepper"
+      className={cn(
+        "flex w-full",
+        orientation === "horizontal"
+          ? "items-center justify-between"
+          : "flex-col space-y-6",
+        className
+      )}
+      {...props}
+    >
+      {steps.map((step, idx) => {
+        const isCompleted = idx < currentStep;
+        const isCurrent = idx === currentStep;
+        const isUpcoming = idx > currentStep;
+        const isClickable = onStepClick && idx <= currentStep;
+
+        return (
+          <React.Fragment key={step.id}>
+            <div
+              className={cn(
+                "flex items-center gap-3",
+                orientation === "horizontal" ? "flex-col text-center" : "flex-row text-left"
+              )}
+            >
+              {/* Step Circle Indicator */}
+              <motion.button
+                type="button"
+                disabled={!isClickable}
+                onClick={() => isClickable && onStepClick(idx)}
+                whileTap={isClickable && !shouldReduceMotion ? { scale: 0.92 } : undefined}
+                transition={SPRING_PRESS}
+                aria-current={isCurrent ? "step" : undefined}
+                className={cn(
+                  "relative flex size-9 items-center justify-center rounded-full border text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                  isCompleted && "bg-primary border-primary text-primary-foreground shadow-sm shadow-primary/25",
+                  isCurrent && "border-primary bg-background text-primary ring-4 ring-primary/20 font-bold",
+                  isUpcoming && "border-border bg-muted/60 text-muted-foreground",
+                  !isClickable && "cursor-default"
+                )}
+              >
+                {isCompleted ? (
+                  <motion.div
+                    initial={shouldReduceMotion ? false : { scale: 0 }}
+                    animate={{ scale: 1 }}
+                    transition={SPRING_BOUNCE}
+                  >
+                    <Check className="size-4 stroke-[3]" />
+                  </motion.div>
+                ) : (
+                  <span>{idx + 1}</span>
+                )}
+              </motion.button>
+
+              {/* Step Label */}
+              <div className="flex flex-col">
+                <span
+                  className={cn(
+                    "text-xs font-medium tracking-tight transition-colors",
+                    isCurrent ? "text-foreground font-semibold" : "text-muted-foreground"
+                  )}
+                >
+                  {step.title}
+                </span>
+                {step.description && (
+                  <span className="text-[11px] text-muted-foreground/70 hidden sm:inline">
+                    {step.description}
+                  </span>
+                )}
+              </div>
+            </div>
+
+            {/* Connecting Line Between Steps */}
+            {idx < steps.length - 1 && orientation === "horizontal" && (
+              <div className="relative mx-2 h-0.5 flex-1 bg-border/70 overflow-hidden">
+                <motion.div
+                  initial={false}
+                  animate={{ width: isCompleted ? "100%" : "0%" }}
+                  transition={SPRING_LAYOUT}
+                  className="absolute inset-y-0 left-0 bg-primary"
+                />
+              </div>
+            )}
+          </React.Fragment>
+        );
+      })}
+    </motion.div>
+  );
+}

package/components/motion/success-check.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import {
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react";
+import React, { useEffect, useRef, useState } from "react";
+import { EASE_OUT, SPRING_BOUNCE, SPRING_PRESS } from "@/lib/ease";
+import { useHaptic } from "@/lib/hooks/use-haptic";
+import { cn } from "@/lib/utils";
+
+export interface SuccessCheckProps extends Omit<HTMLMotionProps<"div">, "children"> {
+  trigger?: boolean;
+  size?: "sm" | "md" | "lg" | "xl";
+  showHalo?: boolean;
+  autoReset?: boolean;
+  resetDelay?: number;
+  onComplete?: () => void;
+  className?: string;
+}
+
+const SIZE_MAP = {
+  sm: { box: "size-8", stroke: 2.5 },
+  md: { box: "size-12", stroke: 2.5 },
+  lg: { box: "size-16", stroke: 3 },
+  xl: { box: "size-24", stroke: 3.5 },
+};
+
+export function SuccessCheck({
+  trigger = true,
+  size = "md",
+  showHalo = true,
+  autoReset = false,
+  resetDelay = 3000,
+  onComplete,
+  className,
+  ...props
+}: SuccessCheckProps) {
+  const [isPlaying, setIsPlaying] = useState(trigger);
+  const shouldReduceMotion = useReducedMotion();
+  const triggerHaptic = useHaptic();
+  const replayTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const currentSize = SIZE_MAP[size];
+
+  useEffect(() => () => {
+    if (replayTimer.current) clearTimeout(replayTimer.current);
+  }, []);
+
+  useEffect(() => {
+    if (trigger) {
+      setIsPlaying(true);
+      triggerHaptic("success");
+
+      if (autoReset) {
+        const timer = setTimeout(() => setIsPlaying(false), resetDelay);
+        return () => clearTimeout(timer);
+      }
+    } else {
+      setIsPlaying(false);
+    }
+  }, [trigger, autoReset, resetDelay, onComplete, triggerHaptic]);
+
+  const handleManualReplay = () => {
+    setIsPlaying(false);
+    if (replayTimer.current) clearTimeout(replayTimer.current);
+    replayTimer.current = setTimeout(() => {
+      setIsPlaying(true);
+      triggerHaptic("success");
+    }, 50);
+  };
+
+  return (
+    <motion.div
+      role="button"
+      tabIndex={0}
+      aria-label="Action succeeded"
+      onClick={handleManualReplay}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          handleManualReplay();
+        }
+      }}
+      className={cn(
+        "relative inline-flex items-center justify-center cursor-pointer select-none",
+        currentSize.box,
+        className
+      )}
+      {...props}
+    >
+      {/* Expanding Ripple Halo */}
+      {showHalo && isPlaying && !shouldReduceMotion && (
+        <motion.div
+          initial={{ scale: 0.8, opacity: 0.8 }}
+          animate={{ scale: 1.8, opacity: 0 }}
+          transition={{ duration: 0.8, ease: EASE_OUT }}
+          className="absolute inset-0 rounded-full bg-emerald-500/30 dark:bg-emerald-400/20 pointer-events-none"
+        />
+      )}
+
+      {/* Outer Circle Container */}
+        <motion.div
+        initial={shouldReduceMotion ? false : { scale: 0, rotate: -30 }}
+        animate={shouldReduceMotion
+          ? (isPlaying ? { opacity: 1 } : { opacity: 0 })
+          : (isPlaying ? { scale: 1, rotate: 0 } : { scale: 0, opacity: 0 })}
+        transition={shouldReduceMotion ? { duration: 0 } : SPRING_BOUNCE}
+        onAnimationComplete={() => {
+          if (isPlaying) onComplete?.();
+        }}
+        className="relative flex size-full items-center justify-center rounded-full bg-emerald-500 text-white shadow-lg shadow-emerald-500/25 dark:shadow-emerald-500/10"
+      >
+        {/* SVG Drawing Checkmark */}
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          className="size-3/5"
+          style={{ overflow: "visible" }}
+        >
+          <motion.path
+            d="M5 13l4 4L19 7"
+            strokeWidth={currentSize.stroke}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            initial={shouldReduceMotion ? false : { pathLength: 0, opacity: 0 }}
+            animate={
+              isPlaying
+                ? { pathLength: 1, opacity: 1 }
+                : { pathLength: 0, opacity: 0 }
+            }
+            transition={{
+              pathLength: { duration: shouldReduceMotion ? 0 : 0.35, delay: shouldReduceMotion ? 0 : 0.15, ease: EASE_OUT },
+              opacity: { duration: 0.1 },
+            }}
+          />
+        </svg>
+      </motion.div>
+    </motion.div>
+  );
+}

package/components/motion/swap/constants.ts

@@ -0,0 +1,2 @@
+// Swap-local aliases for the shared motion tokens in @/lib/ease.
+export { EASE_OUT as EASE, EASE_DRAWER as SWAP_DRAWER_EASE } from "@/lib/ease";

package/components/motion/swap/controls.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { ArrowDownUp, Check, ChevronDown, Send, X } from "lucide-react";
+import { SPRING_PRESS } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+import type { Token } from "./types";
+import { EASE } from "./constants";
+import { isValidAddress, truncateAddress } from "./utils";
+
+export function FlipButton({
+  rotation,
+  reduce,
+  onClick,
+}: {
+  rotation: number;
+  reduce: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <div className="relative -my-4 flex justify-center" style={{ zIndex: 1 }}>
+      <motion.button
+        type="button"
+        onClick={onClick}
+        aria-label="Reverse direction"
+        whileTap={reduce ? undefined : { scale: 0.9 }}
+        animate={reduce ? undefined : { rotate: rotation }}
+        transition={{ type: "spring", stiffness: 380, damping: 26, mass: 0.6 }}
+        className="inline-flex h-9 w-9 items-center justify-center rounded-full border-[3px] border-card bg-primary/10 text-foreground backdrop-blur"
+      >
+        <ArrowDownUp className="h-3.5 w-3.5" />
+      </motion.button>
+    </div>
+  );
+}
+
+export function ActionButton({
+  from,
+  to,
+  amount,
+  destAddress,
+}: {
+  from: Token;
+  to: Token;
+  amount: number;
+  destAddress: string;
+}) {
+  const reduce = useReducedMotion();
+  const noAmount = amount <= 0;
+  const overBalance = from.balance !== undefined && amount > from.balance;
+  const validDest = destAddress && isValidAddress(destAddress);
+  const label = noAmount
+    ? "Enter an amount"
+    : overBalance
+      ? `Insufficient ${from.symbol}`
+      : validDest
+        ? `Swap + Send to ${truncateAddress(destAddress)}`
+        : `Swap ${from.symbol} → ${to.symbol}`;
+  const disabled = noAmount || overBalance;
+
+  return (
+    <motion.button
+      type="button"
+      whileTap={disabled || reduce ? undefined : { scale: 0.97 }}
+      transition={SPRING_PRESS}
+      disabled={disabled}
+      className={cn(
+        "mt-3 inline-flex h-12 w-full items-center justify-center rounded-2xl text-sm font-semibold transition-colors",
+        disabled
+          ? "cursor-not-allowed bg-primary/10 text-muted-foreground"
+          : "bg-primary text-primary-foreground hover:bg-primary/90",
+      )}
+    >
+      <AnimatePresence mode="wait" initial={false}>
+        <motion.span
+          key={label}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.14, ease: EASE }}
+        >
+          {label}
+        </motion.span>
+      </AnimatePresence>
+    </motion.button>
+  );
+}
+
+export function DestinationRow({
+  show,
+  onToggle,
+  address,
+  onAddress,
+  reduce,
+}: {
+  show: boolean;
+  onToggle: () => void;
+  address: string;
+  onAddress: (v: string) => void;
+  reduce: boolean;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const hasAddress = address.length > 0;
+  const valid = isValidAddress(address);
+
+  useEffect(() => {
+    if (!show) return;
+    requestAnimationFrame(() =>
+      inputRef.current?.focus({ preventScroll: true }),
+    );
+  }, [show]);
+
+  return (
+    <div className="mt-1 overflow-hidden rounded-xl border border-border/50 bg-background/40">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex w-full items-center justify-between gap-2 px-3.5 py-2.5 text-[12px] text-muted-foreground hover:text-foreground"
+      >
+        <span className="flex items-center gap-2">
+          <Send className="h-3.5 w-3.5 shrink-0" />
+          <span>
+            {show && hasAddress && valid
+              ? `To: ${truncateAddress(address)}`
+              : "Send to different address"}
+          </span>
+        </span>
+        <motion.span
+          animate={reduce ? {} : { rotate: show ? 180 : 0 }}
+          transition={{ duration: 0.2, ease: EASE }}
+          style={{ display: "inline-flex" }}
+        >
+          <ChevronDown className="h-3.5 w-3.5" />
+        </motion.span>
+      </button>
+
+      <AnimatePresence>
+        {show ? (
+          <motion.div
+            key="dest-input"
+            initial={reduce ? { opacity: 0 } : { height: 0, opacity: 0 }}
+            animate={reduce ? { opacity: 1 } : { height: "auto", opacity: 1 }}
+            exit={reduce ? { opacity: 0 } : { height: 0, opacity: 0 }}
+            transition={{ duration: 0.22, ease: EASE }}
+            style={{ overflow: "hidden" }}
+          >
+            <div className="border-t border-border/50 px-3.5 pb-3 pt-2.5">
+              <div
+                className={cn(
+                  "flex items-center gap-2 rounded-lg border px-2.5 py-2 transition-colors",
+                  hasAddress && !valid
+                    ? "border-destructive/40"
+                    : "border-border",
+                )}
+              >
+                <input
+                  ref={inputRef}
+                  value={address}
+                  onChange={(e) => onAddress(e.target.value.trim())}
+                  placeholder="0x... or name.eth"
+                  spellCheck={false}
+                  className="min-w-0 flex-1 bg-transparent font-mono text-[12px] text-foreground outline-none placeholder:text-muted-foreground/60"
+                />
+                <AnimatePresence mode="wait">
+                  {hasAddress ? (
+                    valid ? (
+                      <motion.span
+                        key="check"
+                        initial={{ opacity: 0, scale: 0.7 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        exit={{ opacity: 0, scale: 0.7 }}
+                        transition={{ duration: 0.14, ease: EASE }}
+                      >
+                        <Check className="h-3.5 w-3.5 shrink-0 text-primary" />
+                      </motion.span>
+                    ) : (
+                      <motion.button
+                        key="clear"
+                        type="button"
+                        onClick={() => onAddress("")}
+                        aria-label="Clear address"
+                        initial={{ opacity: 0, scale: 0.7 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        exit={{ opacity: 0, scale: 0.7 }}
+                        transition={{ duration: 0.14, ease: EASE }}
+                        className="shrink-0 text-muted-foreground hover:text-foreground"
+                      >
+                        <X className="h-3.5 w-3.5" />
+                      </motion.button>
+                    )
+                  ) : null}
+                </AnimatePresence>
+              </div>
+            </div>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+    </div>
+  );
+}