@vvedantb/ui 0.35.0 → 0.36.0

package/README.md

@@ -7,6 +7,8 @@ Shared React 19 web UI. Source-exported: no build step.
 | `@vvedantb/ui` | The main JavaScript entry. Primitives (Radix-based), AI elements, audio (`playChime`, `useReplyChime`, `playTone`), `toast` and `SonnerToaster`, the composer (`InputArea`, deprecated 0.3 `Composer`), shell (`SidebarHeader`, `SidebarUpgradeCard`, `PillTabs`, `SessionsHoverCard`, and the app shell: `AppShell`, `AppSidebar`, `SidebarRail`, `RailTile`, `SidebarPanel`, `SidebarAccountMenu`, `SignOutDialog` and related helpers), app helpers (confirm skip, update watcher, settings chrome, `useStableAuth`, and from 0.8.0 `createThemeProvider`, `createPageTitleContext`, `PageMotionProvider` and `formatCompactRelativeTime`), marketing pieces from 0.9.0 (`createLandingKit` and the `Landing*` parts, `SiteFooter`, `PricingModal`), animated nav icons from 0.11.0 (`MemoryIcon`, `BoardIcon`, ... and `NavIconBase`; `SettingsIcon` `variant` from 0.12.0), artifact viewers from 0.13.0 (`ArtifactFrame`, `ArtifactList`, `ArtifactViewer`, ...), date pickers from 0.14.0 (`Calendar`, `DatePicker`, `DateTimePicker`, `MonthPicker`), `cn`, and the native tokens `tokens` and `Tokens`. See `app/README.md` in the repository for the app helpers. |
 | `@vvedantb/ui/client` | The root without `@vvedantb/server`, convex or Clerk, for Chrome extensions (0.28.0). Leaves out the artifact viewers, `ConvexClerkProvider`, `useStableAuth`, `createUseStableAuth`, `resetStableAuthSession` and `useEnsureUser`. See [Chrome extensions](#chrome-extensions-0280). |
 | `@vvedantb/ui/brand` | App icons (`Icon*`, `APP_ICONS`), `AppWordmark`, deprecated `AppMark`, raw SVG strings and `FAMILY_APPS`. Also in the root and `/client`. |
+| `@vvedantb/ui/logos` | Third-party brand logos (`GitHubIcon`, `GoogleDriveIcon`, `SlackIcon`, `ClaudeIcon`, `VercelIcon`, ...) and `LogoProps` (0.36.0). Also in the root and `/client`. See [Third-party logos](#third-party-logos-0360). |
+| `@vvedantb/ui/icons/animated` | Motion-driven animated SVG icons (`AnimatedNotificationIcon`, `MorphingMenuIcon`, `AnimatedBellIcon`, ...) (0.36.0). Not in the root or `/client`. Needs the optional `motion` peer. See [Animated SVG icons](#animated-svg-icons-0360). |
 | `@vvedantb/ui/tokens` | `tokens.css`: colour, radius, shadow, ease and font tokens for Tailwind v4. CSS. |
 | `@vvedantb/ui/tokens/tokens.css` | Same file as `@vvedantb/ui/tokens`. CSS. |
 | `@vvedantb/ui/tokens/css/*.css` | `index`, `base`, `dialog`, `modal`, `tabs`, `tabs-pills`, `utilities`, `scrollbar-thin`, `clear-input`, `motion`, `animations`, `nav-icons`, `compat-shadcn-rgb`, `border-beam` (opt-in, for `BorderBeam`), `markdown` (opt-in, for `Markdown`). CSS. `tokens.css` imports `scrollbar-thin`, `clear-input` and `motion`. |
@@ -1155,6 +1157,47 @@ Props (type `IconProps`; all optional):
 
 Other SVG props (`id`, `data-*`, handlers, `ref`) go to the svg. On group hover the svg scales to 1.15 (the first six icons, spring ease) or 1.12 (the rest). `NavIconBase` is the shared svg wrapper, for icons drawn in the same style. The stylesheet has no reduced-motion override.
 
+## Third-party logos (0.36.0)
+
+Full-colour vendor logos, separate from the family marks in `@vvedantb/ui/brand`. Import from `@vvedantb/ui/logos` (also in the root and `/client`):
+
+```tsx
+import { GitHubIcon, GoogleDriveIcon, SlackIcon } from "@vvedantb/ui/logos";
+
+<GoogleDriveIcon />                      // 24px, aria-hidden
+<SlackIcon size={16} title="Slack" />    // role="img", aria-label and <title>
+<GitHubIcon className="text-foreground" /> // monochrome marks follow currentColor
+```
+
+| Logo | Colour |
+| --- | --- |
+| `ChromeIcon`, `ConvexIcon`, `DropboxIcon`, `FigmaIcon`, `GmailIcon`, `GoogleDriveIcon`, `LinearIcon`, `NotionIcon`, `OneDriveIcon`, `SharePointIcon`, `SlackIcon` | Brand colours |
+| `ClaudeIcon`, `CursorIcon`, `GitHubIcon`, `VercelIcon` | `currentColor` |
+
+Props (`LogoProps`): `size` (number or CSS length, default `24`, sets width and height), `title` (accessible name: the svg becomes `role="img"` with `aria-label` and a `<title>`; without `title` or `aria-label` it is `aria-hidden`), and any other SVG prop (`className`, `style`, `data-*`, `ref`). `OneDriveIcon` and `SharePointIcon` use `useId` for their gradient ids, so several on one page do not clash. Paths are the vendors' own: do not recolour the full-colour marks. For the AI provider marks in model pickers, keep using `ProviderIcon`.
+
+## Animated SVG icons (0.36.0)
+
+Motion-driven icons, on their own entry so apps that do not use them do not load them. They are not in the root or `/client`.
+
+```tsx
+import { AnimatedNotificationIcon, MorphingMenuIcon } from "@vvedantb/ui/icons/animated";
+```
+
+They need the optional `motion` peer and animate through `m.*`, so they need the app's `MotionProvider` (or its own `LazyMotion`). Without it they render their resting frame. No stylesheet. All are decorative (`aria-hidden`) except `AnimatedProgress` (`role="progressbar"`) and `AnimatedCounter` (text).
+
+| Component | Props | What it does |
+| --- | --- | --- |
+| `AnimatedNotificationIcon` | `type` (`NotificationIconType`: `success`, `warning`, `error`, `info`), `size` (20), `color`, `className` | On mount the check draws itself, the warning shakes, the error pops in, the info icon rises. Colour: `--color-success`, `--color-warning`, `--color-danger`, `--color-primary` (`info`); `color` overrides. |
+| `AnimatedBellIcon` | `size` (32), `muted` (`true`), `className` | Bell draws itself, then swings every 4.5 s. `muted` adds the slash. |
+| `AnimatedKeyIcon` | `size` (48), `className` | Bolt draws itself, sparkles twinkle, soft pulse. For empty API-key states. |
+| `MorphingMenuIcon` | `isOpen`, `size` (20), `className` | Three bars morph to an X. `data-state="open"` or `"closed"`. Label the button and set its `aria-expanded`. |
+| `MorphingMicIcon` | `isListening`, `size` (32), `strokeWidth` (2), `className` | Cross-fades a microphone and a stop square. |
+| `PulsingRings` | `size`, `ringCount` (3), `color` (`var(--color-danger)`), `active` (`true`), `className` | Staggered expanding rings, absolutely centred in a `relative` parent. `active={false}` renders nothing. |
+| `AnimatedStatusDot` | `phase` (`StatusDotPhase`: `idle`, `listening`, `thinking`, `speaking`, `error`), `size` (10; svg is 3x), `className` | Ripples while listening, glow while listening or speaking. |
+| `AnimatedProgress` | `value` (0 to 100, clamped), `height` (4), `showGradient` (`true`), `label`, `className` | Spring fill in `--color-primary` on `--color-surface-secondary`, with a moving gradient and shimmer. |
+| `AnimatedCounter` | `value`, `duration` (1 s), `formatValue`, `animateOnView` (`true`), `className` | Springs from 0 to `value` once in view. `tabular-nums`. The spring runs without `LazyMotion`. |
+
 ## Artifact viewers (0.13.0)
 
 Web viewers for artifacts: standalone HTML, Markdown, SVG, code or typed JSON (quiz, flashcards) documents with per-user state. The pure core (schemas, state limits and ops, the document wrapper, the guest bridge) lives in `@vvedantb/server` (see its `docs/artifacts.md`); install `@vvedantb/server` 0.6.1 or later next to this package. The components hold no data: rows come in through props and changes leave through callbacks, so any backend works.

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "license": "MIT",
-  "description": "Shared React 19 UI for web apps: one main JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), a client entry without @vvedantb/server, convex or Clerk for Chrome extensions, design-token CSS, shared Tailwind v4 CSS, a Tailwind preset and packaged Instrument Sans fonts.",
+  "description": "Shared React 19 UI for web apps: one main JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), third-party brand logos (also @vvedantb/ui/logos), motion-driven animated SVG icons (@vvedantb/ui/icons/animated), a client entry without @vvedantb/server, convex or Clerk for Chrome extensions, design-token CSS, shared Tailwind v4 CSS, a Tailwind preset and packaged Instrument Sans fonts.",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -46,6 +46,14 @@
       "types": "./src/brand/index.ts",
       "default": "./src/brand/index.ts"
     },
+    "./logos": {
+      "types": "./src/logos/index.ts",
+      "default": "./src/logos/index.ts"
+    },
+    "./icons/animated": {
+      "types": "./src/icons/animated/index.ts",
+      "default": "./src/icons/animated/index.ts"
+    },
     "./client": {
       "types": "./src/client.ts",
       "default": "./src/client.ts"

package/src/client.ts

@@ -399,6 +399,9 @@ export { useHeldResult } from "../app/src/convex/useHeldResult";
 // Family app marks (Icon* components, deprecated AppMark and raw SVG strings for favicons).
 export * from "./brand";
 
+// Third-party brand logos (`GitHubIcon`, `SlackIcon`, `ClaudeIcon`, ...). Also `@vvedantb/ui/logos`.
+export * from "./logos";
+
 // Native tokens (JS values that match tokens.css).
 export { tokens } from "../tokens/src/native";
 export type { Tokens } from "../tokens/src/native";

package/src/icons/animated/animated-bell-icon.tsx

@@ -0,0 +1,68 @@
+import { m } from "motion/react";
+
+export interface AnimatedBellIconProps {
+  /** Width and height in px. Default `32`. */
+  size?: number;
+  className?: string;
+  /** Draw the mute slash. Default `true` (the empty-notifications state). */
+  muted?: boolean;
+}
+
+/**
+ * Bell that draws itself, then swings every few seconds with a moving
+ * clapper. For empty notification states. Uses `currentColor`. Decorative (`aria-hidden`).
+ */
+export function AnimatedBellIcon({ size = 32, className, muted = true }: AnimatedBellIconProps) {
+  return (
+    <m.svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+      initial={{ rotate: 0 }}
+      animate={{ rotate: [0, 10, -10, 8, -8, 5, -5, 0] }}
+      transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 3 }}
+      style={{ transformOrigin: "top center" }}
+    >
+      {/* Body */}
+      <m.path
+        d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"
+        initial={{ pathLength: 0 }}
+        animate={{ pathLength: 1 }}
+        transition={{ duration: 0.6, ease: "easeOut" }}
+      />
+      {/* Bottom curve */}
+      <m.path
+        d="M13.73 21a2 2 0 0 1-3.46 0"
+        initial={{ pathLength: 0 }}
+        animate={{ pathLength: 1 }}
+        transition={{ duration: 0.3, delay: 0.4 }}
+      />
+      {/* Mute slash */}
+      {muted ? (
+        <m.path
+          d="M2 2l20 20"
+          data-slot="mute-slash"
+          initial={{ pathLength: 0 }}
+          animate={{ pathLength: 1 }}
+          transition={{ duration: 0.3, delay: 0.6 }}
+        />
+      ) : null}
+      {/* Clapper */}
+      <m.circle
+        cx="12"
+        cy="17"
+        r="0.5"
+        fill="currentColor"
+        animate={{ x: [0, 1, -1, 0.5, -0.5, 0] }}
+        transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 3 }}
+      />
+    </m.svg>
+  );
+}

package/src/icons/animated/animated-counter.tsx

@@ -0,0 +1,45 @@
+import { m, useInView, useSpring, useTransform } from "motion/react";
+import { useEffect, useRef } from "react";
+import { cn } from "../../utils/cn";
+
+export interface AnimatedCounterProps {
+  /** Target value to count up to. */
+  value: number;
+  /** Rough animation length in seconds (scales the spring stiffness). Default `1`. */
+  duration?: number;
+  className?: string;
+  /** Formats the displayed number. Default: rounded, `toLocaleString()`. */
+  formatValue?: (value: number) => string;
+  /** Wait until the counter scrolls into view. Default `true`. */
+  animateOnView?: boolean;
+}
+
+const defaultFormat = (v: number) => Math.round(v).toLocaleString();
+
+/**
+ * Number that springs up from 0 to `value` (`tabular-nums`). Changes to
+ * `value` spring from the current number. The spring runs without the app's
+ * `LazyMotion`.
+ */
+export function AnimatedCounter({
+  value,
+  duration = 1,
+  className,
+  formatValue = defaultFormat,
+  animateOnView = true,
+}: AnimatedCounterProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const isInView = useInView(ref, { once: true, margin: "-50px" });
+  const springValue = useSpring(0, { stiffness: 100 / duration, damping: 30, restDelta: 0.01 });
+  const displayValue = useTransform(springValue, (v) => formatValue(v));
+
+  useEffect(() => {
+    if (!animateOnView || isInView) springValue.set(value);
+  }, [value, springValue, animateOnView, isInView]);
+
+  return (
+    <m.span ref={ref} className={cn("tabular-nums", className)}>
+      {displayValue}
+    </m.span>
+  );
+}

package/src/icons/animated/animated-key-icon.tsx

@@ -0,0 +1,79 @@
+import { m } from "motion/react";
+
+export interface AnimatedKeyIconProps {
+  /** Width and height in px. Default `48`. */
+  size?: number;
+  className?: string;
+}
+
+function Sparkle({ x, y, delay, size = 3 }: { x: number; y: number; delay: number; size?: number }) {
+  return (
+    <g transform={`translate(${x}, ${y})`}>
+      {/* Four-pointed star */}
+      <m.path
+        d={`M0 -${size} L0 ${size} M-${size} 0 L${size} 0`}
+        stroke="currentColor"
+        strokeWidth="1"
+        strokeLinecap="round"
+        initial={{ scale: 0, opacity: 0, rotate: 0 }}
+        animate={{ scale: [0, 1, 0], opacity: [0, 1, 0], rotate: [0, 45, 90] }}
+        transition={{ duration: 1.2, delay, repeat: Infinity, repeatDelay: 2, ease: "easeInOut" }}
+      />
+    </g>
+  );
+}
+
+/**
+ * Lightning-bolt "key" that draws itself, with twinkling sparkles and a soft
+ * pulse. For empty API-key states. Uses `currentColor`. Decorative (`aria-hidden`).
+ */
+export function AnimatedKeyIcon({ size = 48, className }: AnimatedKeyIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 48 48"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <Sparkle x={8} y={10} delay={0} size={2.5} />
+      <Sparkle x={40} y={12} delay={0.4} size={2} />
+      <Sparkle x={36} y={38} delay={0.8} size={2.5} />
+      <Sparkle x={10} y={36} delay={1.2} size={2} />
+
+      {/* Bolt with a gentle pulse */}
+      <m.g
+        initial={{ scale: 1 }}
+        animate={{ scale: [1, 1.02, 1] }}
+        transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
+      >
+        <m.path
+          d="M26 6L14 26h8l-4 16 16-22h-9l5-14z"
+          strokeWidth="1.5"
+          fill="none"
+          initial={{ pathLength: 0, opacity: 0 }}
+          animate={{ pathLength: 1, opacity: 1 }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
+        />
+      </m.g>
+
+      {/* Glow pulse behind */}
+      <m.circle
+        cx="24"
+        cy="24"
+        r="16"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="0.5"
+        initial={{ scale: 0.9, opacity: 0 }}
+        animate={{ scale: [0.9, 1.1, 0.9], opacity: [0, 0.15, 0] }}
+        transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
+      />
+    </svg>
+  );
+}

package/src/icons/animated/animated-notification-icon.tsx

@@ -0,0 +1,202 @@
+import { m } from "motion/react";
+
+export type NotificationIconType = "success" | "warning" | "error" | "info";
+
+export interface AnimatedNotificationIconProps {
+  type: NotificationIconType;
+  /** Width and height in px. Default `20`. */
+  size?: number;
+  /** Stroke colour. Default: the type's token (`--color-success`, `--color-warning`, `--color-danger`, `--color-primary` for `info`). */
+  color?: string;
+  /** Class on the wrapping `span`. */
+  className?: string;
+}
+
+const TYPE_COLORS: Record<NotificationIconType, string> = {
+  success: "var(--color-success)",
+  warning: "var(--color-warning)",
+  error: "var(--color-danger)",
+  info: "var(--color-primary)",
+};
+
+interface PartProps {
+  size: number;
+  color: string;
+}
+
+function SuccessIcon({ size, color }: PartProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      {/* Circle */}
+      <m.circle
+        cx="12"
+        cy="12"
+        r="10"
+        stroke={color}
+        strokeWidth="1.5"
+        fill="none"
+        initial={{ pathLength: 0, opacity: 0 }}
+        animate={{ pathLength: 1, opacity: 1 }}
+        transition={{ duration: 0.4, ease: "easeOut" }}
+      />
+      {/* Checkmark draws itself */}
+      <m.path
+        d="M8 12l2.5 2.5L16 9"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+        initial={{ pathLength: 0 }}
+        animate={{ pathLength: 1 }}
+        transition={{ duration: 0.3, delay: 0.3, ease: "easeOut" }}
+      />
+    </svg>
+  );
+}
+
+function WarningIcon({ size, color }: PartProps) {
+  return (
+    <m.svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      initial={{ rotate: 0 }}
+      animate={{ rotate: [0, -5, 5, -3, 3, 0] }}
+      transition={{ duration: 0.5, delay: 0.2 }}
+    >
+      {/* Triangle */}
+      <m.path
+        d="M12 2L2 20h20L12 2z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+        initial={{ pathLength: 0, opacity: 0 }}
+        animate={{ pathLength: 1, opacity: 1 }}
+        transition={{ duration: 0.4, ease: "easeOut" }}
+      />
+      {/* Exclamation line */}
+      <m.path
+        d="M12 9v4"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        initial={{ pathLength: 0 }}
+        animate={{ pathLength: 1 }}
+        transition={{ duration: 0.2, delay: 0.3 }}
+      />
+      {/* Exclamation dot */}
+      <m.circle
+        cx="12"
+        cy="17"
+        r="1"
+        fill={color}
+        initial={{ scale: 0 }}
+        animate={{ scale: 1 }}
+        transition={{ duration: 0.15, delay: 0.45, type: "spring" }}
+      />
+    </m.svg>
+  );
+}
+
+function ErrorIcon({ size, color }: PartProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      {/* Circle */}
+      <m.circle
+        cx="12"
+        cy="12"
+        r="10"
+        stroke={color}
+        strokeWidth="1.5"
+        fill="none"
+        initial={{ scale: 0.8, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ duration: 0.3, ease: "easeOut" }}
+      />
+      {/* X, first stroke */}
+      <m.path
+        d="M15 9l-6 6"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        initial={{ pathLength: 0 }}
+        animate={{ pathLength: 1 }}
+        transition={{ duration: 0.2, delay: 0.2 }}
+      />
+      {/* X, second stroke */}
+      <m.path
+        d="M9 9l6 6"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        initial={{ pathLength: 0 }}
+        animate={{ pathLength: 1 }}
+        transition={{ duration: 0.2, delay: 0.3 }}
+      />
+    </svg>
+  );
+}
+
+function InfoIcon({ size, color }: PartProps) {
+  return (
+    <m.svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      initial={{ y: 2, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ duration: 0.3, ease: "easeOut" }}
+    >
+      {/* Circle */}
+      <circle cx="12" cy="12" r="10" stroke={color} strokeWidth="1.5" fill="none" />
+      {/* Dot */}
+      <m.circle
+        cx="12"
+        cy="8"
+        r="1"
+        fill={color}
+        initial={{ scale: 0 }}
+        animate={{ scale: 1 }}
+        transition={{ duration: 0.2, delay: 0.2, type: "spring" }}
+      />
+      {/* Line */}
+      <m.path
+        d="M12 12v4"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        initial={{ pathLength: 0 }}
+        animate={{ pathLength: 1 }}
+        transition={{ duration: 0.2, delay: 0.3 }}
+      />
+    </m.svg>
+  );
+}
+
+const PARTS: Record<NotificationIconType, (props: PartProps) => React.JSX.Element> = {
+  success: SuccessIcon,
+  warning: WarningIcon,
+  error: ErrorIcon,
+  info: InfoIcon,
+};
+
+/**
+ * Notification status icon that animates on mount: the check draws itself,
+ * the warning shakes, the error pops in and the info icon rises. Decorative
+ * (`aria-hidden`); put the message text beside it.
+ */
+export function AnimatedNotificationIcon({ type, size = 20, color, className }: AnimatedNotificationIconProps) {
+  const Part = PARTS[type];
+  return (
+    <span className={className} data-type={type}>
+      <Part size={size} color={color ?? TYPE_COLORS[type]} />
+    </span>
+  );
+}

package/src/icons/animated/animated-progress.tsx

@@ -0,0 +1,74 @@
+import { m, useSpring, useTransform } from "motion/react";
+import { useEffect, useId } from "react";
+
+export interface AnimatedProgressProps {
+  /** Progress from 0 to 100 (clamped). */
+  value: number;
+  /** Bar height in px. Default `4`. */
+  height?: number;
+  /** Class on the wrapping `div`. */
+  className?: string;
+  /** Run the moving gradient and shimmer. Default `true`. */
+  showGradient?: boolean;
+  /** Accessible name for the `progressbar`. */
+  label?: string;
+}
+
+/**
+ * Thin progress bar whose fill springs to `value`, with a moving gradient
+ * and shimmer (SVG `<animate>`). Fill: `--color-primary`; track:
+ * `--color-surface-secondary`. Renders `role="progressbar"`.
+ */
+export function AnimatedProgress({ value, height = 4, className, showGradient = true, label }: AnimatedProgressProps) {
+  const id = useId();
+  const gradientId = `${id}-gradient`;
+  const shimmerId = `${id}-shimmer`;
+  const clamped = Math.min(Math.max(value, 0), 100);
+  const springValue = useSpring(0, { stiffness: 100, damping: 30 });
+  const width = useTransform(springValue, (v) => `${v}%`);
+
+  useEffect(() => {
+    springValue.set(clamped);
+  }, [clamped, springValue]);
+
+  return (
+    <div
+      className={className}
+      role="progressbar"
+      aria-label={label}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={Math.round(clamped)}
+      style={{ height, overflow: "hidden", borderRadius: height / 2 }}
+    >
+      <svg width="100%" height={height} className="block" aria-hidden="true">
+        <defs>
+          {/* Moving gradient */}
+          <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="var(--color-primary)" />
+            <stop offset="50%" stopColor="color-mix(in oklch, var(--color-primary) 80%, transparent)" />
+            <stop offset="100%" stopColor="var(--color-primary)" />
+            {showGradient ? <animate attributeName="x1" values="-100%;100%" dur="2s" repeatCount="indefinite" /> : null}
+            {showGradient ? <animate attributeName="x2" values="0%;200%" dur="2s" repeatCount="indefinite" /> : null}
+          </linearGradient>
+          {/* Shimmer overlay */}
+          <linearGradient id={shimmerId} x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="transparent" />
+            <stop offset="50%" stopColor="rgba(255,255,255,0.3)" />
+            <stop offset="100%" stopColor="transparent" />
+            <animate attributeName="x1" values="-50%;150%" dur="1.5s" repeatCount="indefinite" />
+            <animate attributeName="x2" values="0%;200%" dur="1.5s" repeatCount="indefinite" />
+          </linearGradient>
+        </defs>
+        {/* Track */}
+        <rect x="0" y="0" width="100%" height={height} rx={height / 2} fill="var(--color-surface-secondary)" />
+        {/* Fill */}
+        <m.rect x="0" y="0" height={height} rx={height / 2} fill={`url(#${gradientId})`} style={{ width }} />
+        {/* Shimmer */}
+        {showGradient && clamped > 0 ? (
+          <m.rect x="0" y="0" height={height} rx={height / 2} fill={`url(#${shimmerId})`} style={{ width }} />
+        ) : null}
+      </svg>
+    </div>
+  );
+}

package/src/icons/animated/animated-status-dot.tsx

@@ -0,0 +1,98 @@
+import { m } from "motion/react";
+import { useId } from "react";
+
+export type StatusDotPhase = "idle" | "listening" | "thinking" | "speaking" | "error";
+
+export interface AnimatedStatusDotProps {
+  phase: StatusDotPhase;
+  /** Dot diameter in px. The svg is `size * 3` square to leave room for the ripples. Default `10`. */
+  size?: number;
+  className?: string;
+}
+
+const PHASE_COLORS: Record<StatusDotPhase, string> = {
+  idle: "var(--color-muted-foreground)",
+  listening: "var(--color-danger)",
+  thinking: "var(--color-warning)",
+  speaking: "var(--color-success)",
+  error: "var(--color-danger)",
+};
+
+const RIPPLE_DELAYS = [0, 0.5, 1];
+
+/**
+ * Status dot for voice states: ripples while `listening`, a glow pulse while
+ * `listening` or `speaking`. Decorative (`aria-hidden`); show the phase as text too.
+ */
+export function AnimatedStatusDot({ phase, size = 10, className }: AnimatedStatusDotProps) {
+  const filterId = `${useId()}-glow`;
+  const color = PHASE_COLORS[phase];
+  const isListening = phase === "listening";
+  const isActive = isListening || phase === "speaking";
+
+  return (
+    <svg
+      width={size * 3}
+      height={size * 3}
+      viewBox="0 0 30 30"
+      className={className}
+      overflow="visible"
+      aria-hidden="true"
+      data-phase={phase}
+    >
+      <defs>
+        <filter id={filterId} x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation="2" result="coloredBlur" />
+          <feMerge>
+            <feMergeNode in="coloredBlur" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+
+      {/* Ripples while listening */}
+      {isListening
+        ? RIPPLE_DELAYS.map((delay) => (
+            <m.circle
+              key={delay}
+              cx="15"
+              cy="15"
+              r="5"
+              fill="none"
+              stroke={color}
+              strokeWidth="1"
+              initial={{ r: 5, opacity: 0.6 }}
+              animate={{ r: 14, opacity: 0 }}
+              transition={{ duration: 1.5, repeat: Infinity, ease: "easeOut", delay }}
+            />
+          ))
+        : null}
+
+      {/* Glow ring while active */}
+      {isActive ? (
+        <m.circle
+          cx="15"
+          cy="15"
+          r="7"
+          fill={color}
+          opacity={0.3}
+          initial={{ scale: 1 }}
+          animate={{ scale: [1, 1.2, 1], opacity: [0.3, 0.15, 0.3] }}
+          transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
+        />
+      ) : null}
+
+      {/* Dot */}
+      <m.circle
+        cx="15"
+        cy="15"
+        r="5"
+        fill={color}
+        filter={isActive ? `url(#${filterId})` : undefined}
+        initial={{ scale: 0.8, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ duration: 0.2 }}
+      />
+    </svg>
+  );
+}