motion-ui-skill 2.0.0

package/components/agents/loading-states/agent-progress.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { motion, useReducedMotion } from "motion/react";
+import { useEffect, useState } from "react";
+import { EASE_IN_OUT } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+const GRID_CELLS = [
+  { id: "top-left", delay: 0 },
+  { id: "top-center", delay: 0.14 },
+  { id: "top-right", delay: 0.28 },
+  { id: "middle-left", delay: 0.42 },
+  { id: "middle-center", delay: 0.56 },
+  { id: "middle-right", delay: 0.7 },
+  { id: "bottom-left", delay: 0.84 },
+  { id: "bottom-center", delay: 0.98 },
+  { id: "bottom-right", delay: 1.12 },
+];
+
+export interface AgentProgressProps {
+  /** Verb describing the agent's current activity. */
+  label?: string;
+  /** Controlled elapsed time in seconds. */
+  elapsedSeconds?: number;
+  /** Starting time for the internal timer, in seconds. */
+  initialSeconds?: number;
+  /** Whether the internal timer should advance. Ignored when elapsedSeconds is provided. */
+  running?: boolean;
+  className?: string;
+}
+
+function formatElapsed(totalSeconds: number) {
+  const safeSeconds = Math.max(0, totalSeconds);
+  const minutes = Math.floor(safeSeconds / 60);
+  const seconds = (safeSeconds % 60).toFixed(1);
+  return minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`;
+}
+
+export function AgentProgress({
+  label = "Churning",
+  elapsedSeconds,
+  initialSeconds = 0,
+  running = true,
+  className,
+}: AgentProgressProps) {
+  const reduce = useReducedMotion() ?? false;
+  const [internalSeconds, setInternalSeconds] = useState(initialSeconds);
+
+  useEffect(() => {
+    if (elapsedSeconds !== undefined || !running) return;
+
+    const startedAt = performance.now() - initialSeconds * 1000;
+    const timer = window.setInterval(() => {
+      setInternalSeconds((performance.now() - startedAt) / 1000);
+    }, 100);
+
+    return () => window.clearInterval(timer);
+  }, [elapsedSeconds, initialSeconds, running]);
+
+  const elapsed = elapsedSeconds ?? internalSeconds;
+
+  return (
+    <span
+      role="status"
+      aria-label={`${label}, in progress`}
+      className={cn(
+        "inline-flex items-center gap-3 font-mono text-sm text-muted-foreground",
+        className,
+      )}
+    >
+      <span
+        aria-hidden="true"
+        className="grid size-5 shrink-0 grid-cols-3 gap-[2px]"
+      >
+        {GRID_CELLS.map(({ id, delay }) => (
+          <motion.span
+            key={id}
+            className="rounded-[1px] bg-current"
+            animate={
+              reduce
+                ? { opacity: [0.35, 0.8, 0.35] }
+                : {
+                    opacity: [0.28, 1, 0.28],
+                    scale: [0.72, 1, 0.72],
+                  }
+            }
+            transition={{
+              duration: 1.55,
+              ease: EASE_IN_OUT,
+              repeat: Infinity,
+              delay,
+            }}
+          />
+        ))}
+      </span>
+      <span className="font-sans font-medium">{label}</span>
+      <span
+        aria-hidden="true"
+        className="tabular-nums text-muted-foreground/70"
+      >
+        {formatElapsed(elapsed)}
+      </span>
+    </span>
+  );
+}

package/components/agents/loading-states/index.ts

@@ -0,0 +1,13 @@
+export {
+  AgentProgress,
+  type AgentProgressProps,
+} from "./agent-progress";
+export {
+  ReasoningText,
+  type ReasoningTextProps,
+  type ReasoningTextVariant,
+} from "./reasoning-text";
+export {
+  ThinkingShimmer,
+  type ThinkingShimmerProps,
+} from "./thinking-shimmer";

package/components/agents/loading-states/reasoning-text.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useEffect, useId, useState, type ReactNode } from "react";
+import { Loader } from "@/components/motion/loader";
+import { TextScramble } from "@/components/motion/text-scramble";
+import { EASE_OUT, SPRING_SWAP } from "@/lib/ease";
+import {
+  TEXT_SHIMMER_CLASS_NAME,
+  TEXT_SHIMMER_KEYFRAMES,
+  textShimmerStyle,
+} from "@/lib/text-shimmer";
+import { cn } from "@/lib/utils";
+
+const DEFAULT_PHRASES = [
+  "Thinking",
+  "Reading the context",
+  "Connecting the details",
+  "Forming a response",
+];
+
+const CASCADE_STAGGER = 0.025;
+
+export type ReasoningTextVariant = "cascade" | "swap" | "scramble";
+
+export interface ReasoningTextProps {
+  /** Phrases cycled through while the agent works. */
+  phrases?: string[];
+  /** Animation used when the active phrase changes. */
+  variant?: ReasoningTextVariant;
+  /** Milliseconds each phrase remains visible. */
+  interval?: number;
+  /** Seconds taken for one shimmer pass. */
+  shimmerDuration?: number;
+  /** Optional leading visual. Defaults to a terminal-style ASCII loader. */
+  indicator?: ReactNode;
+  className?: string;
+}
+
+type PhraseProps = {
+  phrase: string;
+  reduce: boolean;
+  shimmerDuration: number;
+};
+
+function CascadePhrase({
+  phrase,
+  reduce,
+  shimmerDuration,
+}: PhraseProps) {
+  const text = `${phrase}…`;
+
+  if (reduce) {
+    return (
+      <span
+        className={cn(
+          "col-start-1 row-start-1 inline-block justify-self-start whitespace-pre",
+          TEXT_SHIMMER_CLASS_NAME,
+        )}
+        style={textShimmerStyle(shimmerDuration)}
+      >
+        {text}
+      </span>
+    );
+  }
+
+  return (
+    <AnimatePresence initial={false}>
+      <motion.span
+        key={phrase}
+        className="col-start-1 row-start-1 inline-block justify-self-start whitespace-pre"
+        initial="initial"
+        animate="animate"
+        exit="exit"
+      >
+        {text.split("").map((character, characterIndex) => (
+          <motion.span
+            // biome-ignore lint/suspicious/noArrayIndexKey: position is the stable cascade slot identity.
+            key={characterIndex}
+            custom={characterIndex * CASCADE_STAGGER}
+            variants={{
+              initial: { opacity: 0, y: "100%" },
+              animate: (delay: number) => ({
+                opacity: 1,
+                y: "0%",
+                transition: { ...SPRING_SWAP, delay },
+              }),
+              exit: (delay: number) => ({
+                opacity: 0,
+                y: "-100%",
+                transition: {
+                  duration: 0.14,
+                  ease: EASE_OUT,
+                  delay: delay * 0.45,
+                },
+              }),
+            }}
+            className={cn(
+              "inline-block whitespace-pre will-change-[opacity,transform]",
+              TEXT_SHIMMER_CLASS_NAME,
+            )}
+            style={textShimmerStyle(shimmerDuration)}
+          >
+            {character}
+          </motion.span>
+        ))}
+      </motion.span>
+    </AnimatePresence>
+  );
+}
+
+function SwapPhrase({ phrase, reduce, shimmerDuration }: PhraseProps) {
+  return (
+    <AnimatePresence initial={false}>
+      <motion.span
+        key={phrase}
+        className={cn(
+          "col-start-1 row-start-1 inline-block justify-self-start whitespace-nowrap will-change-[opacity,transform]",
+          TEXT_SHIMMER_CLASS_NAME,
+        )}
+        style={textShimmerStyle(shimmerDuration)}
+        initial={reduce ? { opacity: 0 } : { opacity: 0, y: 3 }}
+        animate={reduce ? { opacity: 1 } : { opacity: 1, y: 0 }}
+        exit={reduce ? { opacity: 0 } : { opacity: 0, y: -3 }}
+        transition={{
+          duration: reduce ? 0.12 : 0.2,
+          ease: EASE_OUT,
+        }}
+      >
+        {phrase}…
+      </motion.span>
+    </AnimatePresence>
+  );
+}
+
+function ScramblePhrase({
+  phrase,
+  shimmerDuration,
+}: PhraseProps) {
+  const target = `${phrase}…`;
+
+  return (
+    <TextScramble
+      text={target}
+      className={cn(
+        "col-start-1 row-start-1 justify-self-start tabular-nums",
+        TEXT_SHIMMER_CLASS_NAME,
+      )}
+      style={textShimmerStyle(shimmerDuration)}
+    />
+  );
+}
+
+export function ReasoningText({
+  phrases = DEFAULT_PHRASES,
+  variant = "cascade",
+  interval = 1800,
+  shimmerDuration = 2.2,
+  indicator,
+  className,
+}: ReasoningTextProps) {
+  const reduce = useReducedMotion() ?? false;
+  const [index, setIndex] = useState(0);
+  const statusId = useId();
+  const safePhrases = phrases.length > 0 ? phrases : DEFAULT_PHRASES;
+  const phrase = safePhrases[index % safePhrases.length];
+  const longestPhrase = safePhrases.reduce((longest, current) =>
+    current.length > longest.length ? current : longest,
+  );
+  const phraseProps = { phrase, reduce, shimmerDuration };
+
+  useEffect(() => {
+    if (safePhrases.length < 2) return;
+
+    const timer = window.setInterval(() => {
+      setIndex((current) => (current + 1) % safePhrases.length);
+    }, Math.max(600, interval));
+
+    return () => window.clearInterval(timer);
+  }, [interval, safePhrases.length]);
+
+  return (
+    <>
+      <style>{TEXT_SHIMMER_KEYFRAMES}</style>
+      <span
+        role="status"
+        aria-live="polite"
+        aria-labelledby={statusId}
+        className={cn(
+          "inline-flex items-center gap-2 text-sm font-medium text-muted-foreground",
+          className,
+        )}
+      >
+        <span aria-hidden="true" className="inline-flex size-3 shrink-0 items-center justify-center">
+          {indicator ?? (
+            <Loader
+              variant="ascii-line"
+              size={14}
+              speed={0.8}
+              label="Reasoning"
+            />
+          )}
+        </span>
+
+        <span aria-hidden="true" className="grid overflow-hidden text-left">
+          <span className="invisible col-start-1 row-start-1 whitespace-nowrap">
+            {longestPhrase}…
+          </span>
+          {variant === "cascade" ? (
+            <CascadePhrase {...phraseProps} />
+          ) : variant === "scramble" ? (
+            <ScramblePhrase {...phraseProps} />
+          ) : (
+            <SwapPhrase {...phraseProps} />
+          )}
+        </span>
+
+        <span id={statusId} className="sr-only">
+          {phrase}
+        </span>
+      </span>
+    </>
+  );
+}

package/components/agents/loading-states/thinking-shimmer.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import { TextShimmer } from "@/components/motion/text-shimmer";
+import { cn } from "@/lib/utils";
+
+export interface ThinkingShimmerProps {
+  /** Loading message shown to the user. */
+  children?: ReactNode;
+  /** Seconds taken for one shimmer pass. */
+  duration?: number;
+  className?: string;
+}
+
+export function ThinkingShimmer({
+  children = "Thinking…",
+  duration = 1.8,
+  className,
+}: ThinkingShimmerProps) {
+  return (
+    <TextShimmer
+      as="span"
+      duration={duration}
+      className={cn("font-medium", className)}
+    >
+      {children}
+    </TextShimmer>
+  );
+}