motion-ui-skill 2.0.0

package/components/previews/agents/image-generation.preview.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { RotateCcw } from "lucide-react";
+import { useReducedMotion } from "motion/react";
+import { useEffect, useState } from "react";
+import {
+  ImageGeneration,
+  type ImageGenerationStatus,
+} from "@/components/agents/image-generation";
+
+function GeneratedArtwork() {
+  return (
+    <svg
+      viewBox="0 0 800 600"
+      aria-hidden="true"
+      className="size-full"
+      preserveAspectRatio="xMidYMid slice"
+    >
+      <defs>
+        <linearGradient id="image-sky" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0" stopColor="#191b33" />
+          <stop offset="0.48" stopColor="#60538d" />
+          <stop offset="1" stopColor="#e59b7b" />
+        </linearGradient>
+        <linearGradient id="image-ground" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#314946" />
+          <stop offset="1" stopColor="#101817" />
+        </linearGradient>
+        <radialGradient id="image-glow">
+          <stop offset="0" stopColor="#ffe6b2" stopOpacity="0.95" />
+          <stop offset="1" stopColor="#efb47e" stopOpacity="0" />
+        </radialGradient>
+      </defs>
+      <rect width="800" height="600" fill="url(#image-sky)" />
+      <circle cx="570" cy="210" r="150" fill="url(#image-glow)" />
+      <circle cx="570" cy="210" r="54" fill="#ffe5ad" />
+      <path
+        d="M0 395 120 314l92 54 132-143 116 126 78-66 92 88 170-61v288H0Z"
+        fill="#283d43"
+        opacity="0.9"
+      />
+      <path
+        d="M0 432 118 376l99 73 115-97 107 92 112-52 108 68 141-48v188H0Z"
+        fill="url(#image-ground)"
+      />
+      <path
+        d="M0 505c116-44 190-32 280 6 103 44 212 47 330-7 68-31 126-37 190-28v124H0Z"
+        fill="#13201f"
+      />
+      <g fill="#c9d7c3" opacity="0.65">
+        <circle cx="108" cy="142" r="2" />
+        <circle cx="168" cy="102" r="1.5" />
+        <circle cx="248" cy="154" r="2" />
+        <circle cx="332" cy="84" r="1.5" />
+        <circle cx="414" cy="138" r="2" />
+      </g>
+    </svg>
+  );
+}
+
+function GenerationDemo({ onReplay }: { onReplay: () => void }) {
+  const reduce = useReducedMotion() ?? false;
+  const [status, setStatus] = useState<ImageGenerationStatus>(
+    reduce ? "complete" : "queued",
+  );
+
+  useEffect(() => {
+    if (reduce) return;
+
+    const timers = [
+      window.setTimeout(() => setStatus("generating"), 500),
+      window.setTimeout(() => setStatus("refining"), 3000),
+      window.setTimeout(() => setStatus("complete"), 5200),
+    ];
+
+    return () => {
+      timers.forEach((timer) => {
+        window.clearTimeout(timer);
+      });
+    };
+  }, [reduce]);
+
+  return (
+    <div className="flex w-full flex-col items-center">
+      <ImageGeneration
+        label="A quiet mountain landscape at sunset"
+        prompt="a quiet mountain landscape at sunset"
+        resolution="1024 × 1024"
+        status={status}
+        onRetry={onReplay}
+      >
+        <GeneratedArtwork />
+      </ImageGeneration>
+      <button
+        type="button"
+        onClick={onReplay}
+        className="mt-4 inline-flex min-h-10 items-center gap-2 rounded-full px-3 text-sm font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <RotateCcw aria-hidden="true" className="size-4" />
+        Replay
+      </button>
+    </div>
+  );
+}
+
+export function ImageGenerationPreview() {
+  const [run, setRun] = useState(0);
+
+  return (
+    <div className="w-full max-w-xl">
+      <GenerationDemo
+        key={run}
+        onReplay={() => setRun((value) => value + 1)}
+      />
+    </div>
+  );
+}

package/components/previews/agents/message-bubble.preview.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { ChatPreview } from "@/components/previews/agents/chat-preview";
+
+export function MessageBubblePreview() {
+  return (
+    <ChatPreview
+      reply="That message mounted once with a spring pop. Streaming updates only change its content, so the entrance does not replay."
+      placeholder="Send a bubble…"
+    />
+  );
+}

package/components/previews/agents/message-scroller.preview.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import {
+  ChatPreview,
+  type ChatPreviewMessage,
+} from "@/components/previews/agents/chat-preview";
+
+const MESSAGES: ChatPreviewMessage[] = [
+  {
+    id: "scope-question",
+    from: "user",
+    content: "What should the first release include?",
+  },
+  {
+    id: "scope-answer",
+    from: "assistant",
+    content: "Start with the smallest workflow that still feels complete.",
+  },
+  {
+    id: "states-question",
+    from: "user",
+    content: "Include streaming and recovery states too.",
+  },
+  {
+    id: "states-answer",
+    from: "assistant",
+    content: "Yes. Those states make the first version feel dependable.",
+  },
+  {
+    id: "evidence-question",
+    from: "user",
+    content: "How should we present tool results?",
+  },
+  {
+    id: "evidence-answer",
+    from: "assistant",
+    content: "Keep results close to the action that produced them.",
+  },
+  {
+    id: "approval-question",
+    from: "user",
+    content: "What about actions that need confirmation?",
+  },
+  {
+    id: "approval-answer",
+    from: "assistant",
+    content: "Pause the run, explain the impact, and ask before continuing.",
+  },
+  {
+    id: "summary-question",
+    from: "user",
+    content: "Can the transcript stay easy to navigate?",
+  },
+  {
+    id: "summary-answer",
+    from: "assistant",
+    content: "Use the rail to jump between turns without losing your place.",
+  },
+];
+
+export function MessageScrollerPreview() {
+  return (
+    <ChatPreview
+      initialMessages={MESSAGES}
+      showRail
+      reply="The viewport follows while you stay at the live edge. Scroll upward while this response streams and it will leave your reading position alone."
+      placeholder="Send another message…"
+    />
+  );
+}

package/components/previews/agents/message.preview.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { ChatPreview } from "@/components/previews/agents/chat-preview";
+
+export function MessagePreview() {
+  return (
+    <ChatPreview
+      showAvatars
+      showMetadata
+      assistantVariant="ghost"
+      placeholder="Ask a follow-up…"
+    />
+  );
+}

package/components/previews/agents/prompt-input.preview.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import {
+  Bot,
+  FileText,
+  ImagePlus,
+  Puzzle,
+} from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useEffect, useRef, useState } from "react";
+import { PromptInput } from "@/components/agents/prompt-input";
+import { EASE_OUT } from "@/lib/ease";
+import { useFavicon } from "@/lib/hooks/use-favicon";
+
+function ModelLogo({ url }: { url: string }) {
+  const favicon = useFavicon(url);
+
+  if (!favicon.src) return <Bot />;
+
+  return (
+    // biome-ignore lint/performance/noImgElement: Remote provider favicons keep the registry preview framework-agnostic.
+    <img
+      ref={favicon.ref}
+      src={favicon.src}
+      alt=""
+      width={16}
+      height={16}
+      referrerPolicy="no-referrer"
+      className="size-4 rounded-sm object-contain"
+    />
+  );
+}
+
+const MODELS = [
+  {
+    value: "gpt-5.2",
+    label: "GPT-5.2",
+    icon: <ModelLogo url="https://openai.com" />,
+  },
+  {
+    value: "claude-sonnet-4",
+    label: "Claude Sonnet 4",
+    icon: <ModelLogo url="https://www.anthropic.com" />,
+  },
+  {
+    value: "gemini-3.6-flash",
+    label: "Gemini 3.6 Flash",
+    // gemini.google.com has no /favicon.ico; Google DeepMind ships Gemini.
+    icon: <ModelLogo url="https://deepmind.google" />,
+  },
+  {
+    value: "grok-4.5",
+    label: "Grok 4.5",
+    icon: <ModelLogo url="https://x.ai" />,
+  },
+  {
+    value: "mistral-large-3",
+    label: "Mistral Large 3",
+    icon: <ModelLogo url="https://mistral.ai" />,
+  },
+];
+
+const ACTIONS = [
+  {
+    value: "image",
+    label: "Attach image",
+    description: "Add a screenshot or visual reference.",
+    icon: <ImagePlus />,
+  },
+  {
+    value: "skill",
+    label: "Use a skill",
+    description: "Give the agent a specialized workflow.",
+    icon: <Puzzle />,
+  },
+  {
+    value: "context",
+    label: "Add context",
+    description: "Include a file with supporting details.",
+    icon: <FileText />,
+  },
+];
+
+export function PromptInputPreview() {
+  const reduce = useReducedMotion() ?? false;
+  const timer = useRef<number | undefined>(undefined);
+  const [loading, setLoading] = useState(false);
+  const [sent, setSent] = useState<string>();
+  const [notice, setNotice] = useState<string>();
+
+  useEffect(
+    () => () => {
+      if (timer.current) window.clearTimeout(timer.current);
+    },
+    [],
+  );
+
+  const submit = (prompt: string) => {
+    setSent(undefined);
+    setNotice(undefined);
+    setLoading(true);
+    timer.current = window.setTimeout(() => {
+      setLoading(false);
+      setSent(prompt);
+    }, 900);
+  };
+
+  const stop = () => {
+    if (timer.current) window.clearTimeout(timer.current);
+    setLoading(false);
+  };
+
+  return (
+    <div className="flex h-[360px] w-full max-w-xl flex-col justify-center">
+      <PromptInput
+        models={MODELS}
+        actions={ACTIONS}
+        defaultModel="gpt-5.2"
+        defaultValue="Review the current implementation and suggest the next improvement."
+        loading={loading}
+        onSubmit={submit}
+        onStop={stop}
+        onAction={(action) => {
+          const selected = ACTIONS.find((item) => item.value === action);
+          setNotice(selected ? `${selected.label} selected.` : undefined);
+        }}
+      />
+      <div className="h-8 px-2 pt-2 text-xs text-muted-foreground">
+        <AnimatePresence mode="wait">
+          {sent || notice ? (
+            <motion.p
+              key={sent ?? notice}
+              initial={reduce ? { opacity: 1 } : { opacity: 0, y: 3 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: reduce ? 0 : 0.18, ease: EASE_OUT }}
+            >
+              {sent ? "Prompt sent to the selected model." : notice}
+            </motion.p>
+          ) : null}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}

package/components/previews/agents/streaming-response.preview.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { RotateCcw } from "lucide-react";
+import { useReducedMotion } from "motion/react";
+import { useEffect, useState } from "react";
+import type { CitationItem } from "@/components/agents/citations";
+import { StreamingResponse } from "@/components/agents/streaming-response";
+
+const PIECES = [
+  "A streaming response can link directly to ",
+  "Motion's React guide",
+  " while the rest of the answer continues to arrive.",
+  "The same response can preserve useful structure:",
+  "Links stay interactive as nearby text streams",
+  "Lists keep their spacing and hierarchy",
+  "Code remains readable without shifting the response",
+  "Set ",
+  "aria-busy",
+  " while new content is still arriving.",
+  'const status = complete ? "ready" : "streaming";',
+] as const;
+
+const STARTS = PIECES.map((_, index) =>
+  PIECES.slice(0, index).reduce((total, piece) => total + piece.length, 0),
+);
+const RESPONSE_LENGTH = PIECES.reduce((total, piece) => total + piece.length, 0);
+const RESPONSE_MARKDOWN = `A streaming response can link directly to [Motion's React guide](https://motion.dev/docs/react) while the rest of the answer continues to arrive.
+
+The same response can preserve useful structure:
+
+- Links stay interactive as nearby text streams
+- Lists keep their spacing and hierarchy
+- Code remains readable without shifting the response
+
+Set \`aria-busy\` while new content is still arriving.
+
+\`\`\`tsx
+const status = complete ? "ready" : "streaming";
+\`\`\``;
+
+const CHARACTERS_PER_SECOND = 110;
+
+const RESPONSE_SOURCES: CitationItem[] = [
+  {
+    id: "motion-react",
+    title: "Motion for React",
+    domain: "motion.dev",
+    url: "https://motion.dev/docs/react",
+  },
+  {
+    id: "aria-busy",
+    title: "ARIA live regions",
+    domain: "developer.mozilla.org",
+    url: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-busy",
+  },
+  {
+    id: "react-rendering",
+    title: "Rendering elements",
+    domain: "react.dev",
+    url: "https://react.dev/learn/conditional-rendering",
+  },
+];
+
+function ResponseDemo({ onReplay }: { onReplay: () => void }) {
+  const reduce = useReducedMotion() ?? false;
+  const [cursor, setCursor] = useState(reduce ? RESPONSE_LENGTH : 0);
+  const [complete, setComplete] = useState(reduce);
+
+  const reveal = (index: number) =>
+    PIECES[index].slice(0, Math.max(0, cursor - STARTS[index]));
+  const started = (index: number) => cursor > STARTS[index];
+
+  useEffect(() => {
+    if (reduce) return;
+
+    const startedAt = performance.now();
+    let frame = 0;
+    let completionTimer: number | undefined;
+    const stream = (now: number) => {
+      const cursor = Math.min(
+        RESPONSE_LENGTH,
+        Math.floor(((now - startedAt) / 1000) * CHARACTERS_PER_SECOND),
+      );
+      setCursor(cursor);
+      if (cursor < RESPONSE_LENGTH) frame = requestAnimationFrame(stream);
+      else completionTimer = window.setTimeout(() => setComplete(true), 450);
+    };
+
+    frame = requestAnimationFrame(stream);
+    return () => {
+      cancelAnimationFrame(frame);
+      if (completionTimer) window.clearTimeout(completionTimer);
+    };
+  }, [reduce]);
+
+  return (
+    <StreamingResponse
+      status={complete ? "complete" : "streaming"}
+      copyText={RESPONSE_MARKDOWN}
+      onRetry={onReplay}
+      sources={RESPONSE_SOURCES}
+    >
+      <p>
+        {reveal(0)}
+        {started(1) ? (
+          <a
+            href="https://motion.dev/docs/react"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            {reveal(1)}
+          </a>
+        ) : null}
+        {reveal(2)}
+      </p>
+      {started(3) ? <p>{reveal(3)}</p> : null}
+      {started(4) ? (
+        <ul>
+          <li>{reveal(4)}</li>
+          {started(5) ? <li>{reveal(5)}</li> : null}
+          {started(6) ? <li>{reveal(6)}</li> : null}
+        </ul>
+      ) : null}
+      {started(7) ? (
+        <p>
+          {reveal(7)}
+          {started(8) ? <code>{reveal(8)}</code> : null}
+          {reveal(9)}
+        </p>
+      ) : null}
+      {started(10) ? (
+        <pre>
+          <code>{reveal(10)}</code>
+        </pre>
+      ) : null}
+    </StreamingResponse>
+  );
+}
+
+export function StreamingResponsePreview() {
+  const [run, setRun] = useState(0);
+
+  return (
+    <div className="relative h-[500px] w-full max-w-xl">
+      <ResponseDemo key={run} onReplay={() => setRun((value) => value + 1)} />
+      <button
+        type="button"
+        onClick={() => setRun((value) => value + 1)}
+        className="absolute bottom-0 left-0 inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <RotateCcw className="size-3" />
+        Replay
+      </button>
+    </div>
+  );
+}

package/components/previews/agents/todo-list.preview.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { RotateCcw } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import {
+  type TodoItem,
+  TodoList,
+} from "@/components/agents/todo-list";
+
+const TASKS = [
+  "Inspect the current data flow",
+  "Update the response schema",
+  "Add coverage for edge cases",
+  "Run checks and prepare the result",
+];
+
+const TICKS_PER_TASK = 4;
+
+function itemsAtStep(step: number): TodoItem[] {
+  return TASKS.map((title, index) => ({
+    id: `task-${index}`,
+    title,
+    status:
+      step >= (index + 1) * TICKS_PER_TASK
+        ? "completed"
+        : step >= index * TICKS_PER_TASK
+          ? "in-progress"
+          : "pending",
+    progress:
+      step >= index * TICKS_PER_TASK &&
+      step < (index + 1) * TICKS_PER_TASK
+        ? ((step % TICKS_PER_TASK) + 1) * 25
+        : undefined,
+    detail:
+      step >= index * TICKS_PER_TASK &&
+      step < (index + 1) * TICKS_PER_TASK
+        ? `${((step % TICKS_PER_TASK) + 1) * 25}%`
+        : undefined,
+  }));
+}
+
+function TodoRun() {
+  const [step, setStep] = useState(0);
+  const timer = useRef<number | undefined>(undefined);
+
+  useEffect(() => {
+    if (step >= TASKS.length * TICKS_PER_TASK) return;
+    timer.current = window.setTimeout(() => setStep((value) => value + 1), 280);
+    return () => {
+      if (timer.current) window.clearTimeout(timer.current);
+    };
+  }, [step]);
+
+  return <TodoList items={itemsAtStep(step)} title="Implementation plan" />;
+}
+
+export function TodoListPreview() {
+  const [run, setRun] = useState(0);
+
+  return (
+    <div className="relative h-[330px] w-full max-w-lg">
+      <TodoRun key={run} />
+      <button
+        type="button"
+        onClick={() => setRun((value) => value + 1)}
+        className="absolute bottom-0 left-0 inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <RotateCcw className="size-3" />
+        Replay
+      </button>
+    </div>
+  );
+}

package/components/previews/agents/tool-approval.preview.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { RotateCcw } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  ToolApproval,
+  ToolApprovalCode,
+  type ToolApprovalStatus,
+} from "@/components/agents/tool-approval";
+
+export function ToolApprovalPreview() {
+  const [status, setStatus] = useState<ToolApprovalStatus>("pending");
+  const [detailsOpen, setDetailsOpen] = useState(true);
+  const timers = useRef<number[]>([]);
+
+  const clearTimers = useCallback(() => {
+    timers.current.forEach(window.clearTimeout);
+    timers.current = [];
+  }, []);
+
+  useEffect(() => () => clearTimers(), [clearTimers]);
+
+  const finish = (next: ToolApprovalStatus) => {
+    clearTimers();
+    setStatus(next);
+  };
+
+  const approve = () => {
+    clearTimers();
+    setStatus("approving");
+    timers.current = [
+      window.setTimeout(() => setStatus("approved"), 600),
+      window.setTimeout(() => setStatus("running"), 1150),
+      window.setTimeout(() => setStatus("complete"), 2200),
+    ];
+  };
+
+  const replay = () => {
+    clearTimers();
+    setStatus("pending");
+    setDetailsOpen(true);
+  };
+
+  return (
+    <div className="relative h-[360px] w-full max-w-lg">
+      <ToolApproval
+        tool="terminal.run"
+        title={status === "pending" ? "Allow this tool to run?" : "Terminal access"}
+        description="The agent wants to run the project test suite in the current workspace."
+        status={status}
+        open={detailsOpen}
+        onOpenChange={setDetailsOpen}
+        parameters={[
+          {
+            id: "command",
+            label: "Command",
+            value: (
+              <ToolApprovalCode
+                code="bun test tests/a11y.test.tsx"
+                language="bash"
+              />
+            ),
+          },
+          { id: "directory", label: "Directory", value: "ui-components" },
+        ]}
+        onApprove={approve}
+        onAlwaysAllow={approve}
+        onDeny={() => finish("denied")}
+      />
+      <button
+        type="button"
+        onClick={replay}
+        className="absolute bottom-0 left-0 inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <RotateCcw className="size-3" />
+        Replay
+      </button>
+    </div>
+  );
+}

package/components/previews/agents/use-tool-result-demo.ts

@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { ToolResultStatus } from "@/components/agents/tool-result";
+
+export function useToolResultDemo(
+  steps: number,
+  interval = 420,
+  finalStatus: Exclude<ToolResultStatus, "running"> = "success",
+) {
+  const [visible, setVisible] = useState(0);
+  const [status, setStatus] = useState<ToolResultStatus>("running");
+
+  useEffect(() => {
+    const timers = Array.from({ length: steps }, (_, index) =>
+      window.setTimeout(() => setVisible(index + 1), index * interval + 180),
+    );
+    timers.push(
+      window.setTimeout(
+        () => setStatus(finalStatus),
+        steps * interval + 480,
+      ),
+    );
+    return () => timers.forEach(window.clearTimeout);
+  }, [finalStatus, interval, steps]);
+
+  return { visible, status };
+}