diff --git a/animata/card/card-spread.tsx b/animata/card/card-spread.tsx
index 354d1dd8..683fe13b 100644
--- a/animata/card/card-spread.tsx
+++ b/animata/card/card-spread.tsx
@@ -1,17 +1,27 @@
+"use client";
+
 import { useState } from "react";
 
 import Notes, { NotesCard } from "@/animata/widget/notes";
 import ShoppingList from "@/animata/widget/shopping-list";
 import { cn } from "@/lib/utils";
 
+/** w-48 + gap-3 — horizontal step between spread slots */
+const CARD_STEP = "12.75rem";
+
+/** 4× w-48 + 3× gap-3 */
+const SPREAD_WIDTH = "calc(4 * 12rem + 3 * 0.75rem)";
+
+const DECK_TRANSFORM = "translateX(0) rotate(0deg)";
+
 function Reminders() {
   return (
     <ShoppingList
       title="Reminders"
-      data={[
-        { title: "book museum tickets" },
-        { title: "buy groceries", checked: true },
-        { title: "call mom" },
+      items={[
+        { id: "museum", title: "Book museum tickets" },
+        { id: "groceries", title: "Buy groceries", checked: true },
+        { id: "mom", title: "Call mom" },
       ]}
     />
   );
@@ -28,66 +38,121 @@ function RemodelNotes() {
   );
 }
 
+/** Outer layer: hover peek only (ease-out, not ease-cc). */
+const hoverPeekClasses = [
+  "group-hover/stack:-translate-y-1 group-hover/stack:-rotate-[1deg]",
+  "group-hover/stack:-translate-y-2 group-hover/stack:rotate-[2deg]",
+  "group-hover/stack:-translate-y-3 group-hover/stack:rotate-[3deg]",
+  "group-hover/stack:-translate-y-4 group-hover/stack:rotate-[4deg]",
+] as const;
+
 const cards = [
   {
     component: Notes,
-    rotationClass: "",
-    revealClass: "-rotate-[2deg]",
+    spreadTransform: `translateX(0) rotate(-2deg)`,
   },
   {
     component: ShoppingList,
-    rotationClass: "group-hover/spread:rotate-[15deg]",
-    revealClass: "rotate-[3deg] translate-y-2",
+    spreadTransform: `translateX(${CARD_STEP}) translateY(0.5rem) rotate(3deg)`,
   },
-
   {
     component: RemodelNotes,
-    rotationClass: "group-hover/spread:rotate-[30deg]",
-    revealClass: "-rotate-[2deg] translate-x-1",
+    spreadTransform: `translateX(calc(2 * ${CARD_STEP})) rotate(-2deg) translateX(0.25rem)`,
   },
-
   {
     component: Reminders,
-    rotationClass: "group-hover/spread:rotate-[45deg]",
-    revealClass: "rotate-[2deg]",
+    spreadTransform: `translateX(calc(3 * ${CARD_STEP})) rotate(2deg)`,
   },
-];
+] as const;
+
+const zIndex = ["z-10", "z-20", "z-30", "z-40"] as const;
 
 export default function CardSpread() {
   const [isExpanded, setExpanded] = useState(false);
 
   return (
-    <div
-      className={cn(
-        "group/spread relative flex min-h-80 min-w-52 items-center transition-all duration-500 ease-in-out",
-        {
-          "origin-bottom hover:-rotate-[15deg]": !isExpanded,
-          "gap-3": isExpanded,
-        },
-      )}
-    >
-      {cards.map((item, index) => {
-        return (
-          <div
-            key={index}
-            onClick={(e) => {
-              setExpanded(!isExpanded);
-              e.preventDefault();
-            }}
-            className={cn(
-              "transition-all duration-500 ease-in-out",
-              {
-                absolute: !isExpanded,
-                "origin-bottom": !isExpanded,
-              },
-              !isExpanded && item.rotationClass,
-              isExpanded && item.revealClass,
-            )}
-          >
-            <item.component />
-          </div>
-        );
-      })}
+    <div className="inline-flex min-h-80 items-end justify-center overflow-visible p-8">
+      <style>{`
+        .card-spread-stage {
+          /* Quick throw, soft settle — expand on click only */
+          --ease-throw: cubic-bezier(0.22, 1.18, 0.36, 1);
+        }
+
+        .card-spread-motion--expand {
+          transition: transform 480ms var(--ease-throw);
+        }
+
+        .card-spread-motion--collapse {
+          transition: transform 520ms cubic-bezier(0.33, 1, 0.68, 1);
+        }
+
+        .card-spread-stage--expand {
+          transition: width 480ms var(--ease-throw);
+        }
+
+        .card-spread-stage--collapse {
+          transition: width 520ms cubic-bezier(0.33, 1, 0.68, 1);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .card-spread-motion--expand,
+          .card-spread-motion--collapse,
+          .card-spread-stage--expand,
+          .card-spread-stage--collapse {
+            transition-duration: 0.01ms !important;
+          }
+        }
+      `}</style>
+
+      <div
+        role="button"
+        tabIndex={0}
+        aria-expanded={isExpanded}
+        aria-label={isExpanded ? "Collapse card spread" : "Expand card spread"}
+        onClick={() => setExpanded((open) => !open)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            setExpanded((open) => !open);
+          }
+        }}
+        className={cn(
+          "card-spread-stage group/stack relative h-64 outline-none focus-visible:ring-2 focus-visible:ring-[#ffcc00] focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          isExpanded
+            ? "card-spread-stage--expand cursor-default"
+            : "card-spread-stage--collapse w-48 cursor-pointer",
+        )}
+        style={isExpanded ? { width: SPREAD_WIDTH } : undefined}
+      >
+        {cards.map((item, index) => {
+          const Card = item.component;
+          return (
+            <div
+              key={index}
+              className={cn(
+                "absolute bottom-0 left-0 origin-bottom",
+                zIndex[index],
+                !isExpanded && [
+                  "transition-transform duration-300 ease-out motion-reduce:transition-none",
+                  hoverPeekClasses[index],
+                ],
+              )}
+            >
+              <div
+                className={cn(
+                  "origin-bottom motion-reduce:transition-none motion-reduce:transform-none",
+                  isExpanded ? "card-spread-motion--expand" : "card-spread-motion--collapse",
+                )}
+                style={{
+                  transform: isExpanded ? item.spreadTransform : DECK_TRANSFORM,
+                }}
+              >
+                <Card />
+              </div>
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 }
diff --git a/animata/card/collab-card.stories.tsx b/animata/card/collab-card.stories.tsx
new file mode 100644
index 00000000..17ad642e
--- /dev/null
+++ b/animata/card/collab-card.stories.tsx
@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import CollabCard from "@/animata/card/collab-card";
+
+const meta = {
+  title: "Card/Collab Card",
+  component: CollabCard,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    greeting: { control: "text" },
+    eyebrow: { control: "text" },
+    intro: { control: "text" },
+    conjunction: { control: "text" },
+    trailing: { control: "text" },
+    liveLabel: { control: "text" },
+    backgroundUrl: { control: "text" },
+  },
+} satisfies Meta<typeof CollabCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Figma multiplayer — dashed frame, live presence, named cursor pills. */
+export const Primary: Story = {
+  args: {
+    greeting: "hello!",
+    eyebrow: "Now in multiplayer",
+    intro: "editing",
+    conjunction: "&",
+    trailing: "",
+    liveLabel: "Live · 4 editing",
+  },
+  render: (args) => (
+    <div className="w-full full-content">
+      <CollabCard {...args} className="rounded-xl" />
+    </div>
+  ),
+};
+
+/** Bento slot — scales via container queries, not viewport breakpoints. */
+export const InBentoGrid: Story = {
+  render: () => (
+    <div className="grid max-w-3xl grid-cols-3 gap-4">
+      <div className="col-span-2">
+        <CollabCard />
+      </div>
+      <div className="flex min-h-40 items-center rounded-2xl border border-border bg-muted/50 p-5 text-sm leading-relaxed text-muted-foreground">
+        Drop into a wide bento cell — frame, greeting, pills, and cursors track the card width via{" "}
+        <code className="text-xs">cqi</code>.
+      </div>
+    </div>
+  ),
+};
diff --git a/animata/card/collab-card.tsx b/animata/card/collab-card.tsx
new file mode 100644
index 00000000..22e5497e
--- /dev/null
+++ b/animata/card/collab-card.tsx
@@ -0,0 +1,339 @@
+import { cn } from "@/lib/utils";
+
+export interface Collaborator {
+  name: string;
+  /** Tailwind background class for the pill. */
+  pill: string;
+  /** Tailwind text class for the pill label. */
+  pillText?: string;
+  /** Tailwind text color class for the cursor (sets `color`, used by SVG `fill`). */
+  cursor: string;
+}
+
+export interface CollabCardProps {
+  greeting?: string;
+  eyebrow?: string;
+  intro?: string;
+  conjunction?: string;
+  trailing?: string;
+  /** Status line beside the live dot, e.g. `live · 4 editing`. */
+  liveLabel?: string;
+  /** Swatch colors for the visible avatar stack (left → right). */
+  presenceColors?: string[];
+  /** Additional editors not shown as swatches — renders as `+N` on the stack. */
+  extraCount?: number;
+  collaborators?: [Collaborator, Collaborator];
+  /** Optional background image URL. Falls back to a dark canvas gradient. */
+  backgroundUrl?: string;
+  className?: string;
+}
+
+const defaultCollaborators: [Collaborator, Collaborator] = [
+  {
+    name: "Dylan",
+    pill: "bg-[#A259FF]",
+    pillText: "text-white",
+    cursor: "text-[#A259FF]",
+  },
+  {
+    name: "Evan",
+    pill: "bg-[#FF7262]",
+    pillText: "text-white",
+    cursor: "text-[#FF7262]",
+  },
+];
+
+const defaultPresenceColors = ["#A259FF", "#FF7262", "#1ABCFE", "#0ACF83"];
+
+function PresenceStack({
+  colors,
+  extraCount,
+  className,
+}: {
+  colors: string[];
+  extraCount: number;
+  className?: string;
+}) {
+  const overlap = "-ml-[1.08cqi]";
+
+  return (
+    <ul className={cn("m-0 flex list-none items-center p-0", className)} aria-hidden="true">
+      {colors.map((color, index) => (
+        <li
+          key={`${color}-${index}`}
+          className={cn("relative size-[3.25cqi] shrink-0", index > 0 && overlap)}
+          style={{ zIndex: index + 1 }}
+        >
+          <span
+            className="block size-full rounded-full ring-2 ring-[#0e0e12] shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]"
+            style={{ backgroundColor: color }}
+          />
+        </li>
+      ))}
+      {extraCount > 0 ? (
+        <li
+          className={cn("relative size-[3.25cqi] shrink-0", overlap)}
+          style={{ zIndex: colors.length + 1 }}
+        >
+          <span
+            className={cn(
+              "flex size-full items-center justify-center rounded-full ring-2 ring-[#0e0e12]",
+              "bg-[oklch(0.26_0.012_285)] shadow-[inset_0_1px_0_rgba(255,255,255,0.14)]",
+              "font-(family-name:--font-mono) text-[1.65cqi] font-medium leading-none tabular-nums tracking-tight text-white/88",
+            )}
+          >
+            +{extraCount}
+          </span>
+        </li>
+      ) : null}
+    </ul>
+  );
+}
+
+function Cursor({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      className={cn("h-[6.5cqi] w-[6.5cqi] drop-shadow-[0_2px_4px_rgba(0,0,0,0.28)]", className)}
+    >
+      <path
+        d="M4 3.2 L4 19.4 L8.6 15.2 L11.4 21.2 L14 20 L11.2 14 L17.2 13.6 Z"
+        fill="currentColor"
+        stroke="white"
+        strokeWidth="1.4"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ClickBurst({ className }: { className?: string }) {
+  return (
+    <span
+      data-burst=""
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute inline-block h-[3cqi] w-[3cqi]",
+        "before:absolute before:inset-[35%] before:rounded-full before:bg-current",
+        "after:absolute after:inset-0 after:rounded-full",
+        "after:bg-[conic-gradient(from_0deg,transparent_0_8%,currentColor_8%_12%,transparent_12%_33%,currentColor_33%_37%,transparent_37%_58%,currentColor_58%_62%,transparent_62%_83%,currentColor_83%_87%,transparent_87%)]",
+        "after:mask-[radial-gradient(circle,transparent_38%,black_40%,black_60%,transparent_62%)]",
+        className,
+      )}
+    />
+  );
+}
+
+export default function CollabCard({
+  greeting = "hello!",
+  eyebrow = "Now in multiplayer",
+  intro = "editing",
+  conjunction = "&",
+  trailing = "",
+  liveLabel = "Live · 4 editing",
+  presenceColors = defaultPresenceColors,
+  extraCount = 2,
+  collaborators = defaultCollaborators,
+  backgroundUrl,
+  className,
+}: CollabCardProps) {
+  const [first, second] = collaborators;
+
+  return (
+    <div
+      className={cn(
+        "group/collab relative isolate aspect-3/2 w-full overflow-hidden rounded-2xl",
+        "bg-[#111114] text-white shadow-xl ring-1 ring-white/10",
+        "@container",
+        className,
+      )}
+      style={
+        backgroundUrl
+          ? {
+              backgroundImage: `url(${backgroundUrl})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+            }
+          : undefined
+      }
+    >
+      {!backgroundUrl && (
+        <div
+          aria-hidden="true"
+          className="absolute inset-0 -z-10 bg-[linear-gradient(165deg,#18181f_0%,#0c0c10_55%,#09090c_100%)]"
+        />
+      )}
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(ellipse_70%_55%_at_18%_88%,color-mix(in_oklch,#A259FF_42%,transparent)_0%,transparent_70%),radial-gradient(ellipse_60%_50%_at_88%_22%,color-mix(in_oklch,#FF7262_32%,transparent)_0%,transparent_68%)]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 opacity-[0.16] bg-[radial-gradient(rgba(255,255,255,0.32)_1px,transparent_1.2px)] [background-size:14px_14px] [mask-image:radial-gradient(ellipse_at_center,black_40%,transparent_88%)]"
+      />
+
+      <header className="absolute inset-x-[5cqi] top-[4cqi] z-10 flex items-center justify-between gap-[2cqi]">
+        <span className="flex min-w-0 items-center gap-[1.4cqi] text-[2.4cqi] font-medium leading-none tracking-tight text-white/75">
+          <span className="relative inline-flex h-[1.7cqi] w-[1.7cqi] shrink-0">
+            <span className="collab-live-ping absolute inset-0 rounded-full bg-emerald-400/70" />
+            <span className="relative inline-block h-full w-full rounded-full bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.75)]" />
+          </span>
+          <span className="truncate tabular-nums">{liveLabel}</span>
+        </span>
+        <PresenceStack colors={presenceColors} extraCount={extraCount} />
+      </header>
+
+      <div className="relative flex h-full w-full flex-col items-center justify-center gap-[3.2cqi] px-[5.5cqi] pb-[5cqi] pt-[9cqi]">
+        <p className="max-w-[88%] text-center text-[2.75cqi] font-medium leading-snug tracking-tight text-[#0D99FF]">
+          {eyebrow}
+        </p>
+
+        <div className="relative w-[80%] max-w-full">
+          <div className="relative grid place-items-center rounded-[1.8cqi] border-2 border-dashed border-[#0D99FF]/75 px-[5.5cqi] py-[4.2cqi]">
+            {[
+              "-left-[0.9cqi] -top-[0.9cqi]",
+              "-right-[0.9cqi] -top-[0.9cqi]",
+              "-left-[0.9cqi] -bottom-[0.9cqi]",
+              "-right-[0.9cqi] -bottom-[0.9cqi]",
+            ].map((pos) => (
+              <span
+                key={pos}
+                aria-hidden="true"
+                className={cn(
+                  "absolute h-[1.7cqi] w-[1.7cqi] rounded-[0.25cqi] bg-[#111114] ring-[1.5px] ring-[#0D99FF] shadow-[0_2px_4px_rgba(0,0,0,0.35)]",
+                  pos,
+                )}
+              />
+            ))}
+            <h2 className="font-(family-name:--font-display) text-[17.5cqi] font-medium leading-[0.92] tracking-[-0.035em] text-white">
+              {greeting}
+            </h2>
+          </div>
+
+          <span
+            aria-hidden="true"
+            className="collab-cursor collab-cursor--host pointer-events-none absolute left-[-2.8cqi] top-[-3.6cqi] text-white"
+          >
+            <Cursor />
+          </span>
+        </div>
+
+        <p className="flex max-w-full flex-wrap items-baseline justify-center gap-x-[1.5cqi] gap-y-[1.2cqi] text-[3.85cqi] font-medium leading-none tracking-tight text-white/95">
+          <span className="text-white/80">{intro}</span>
+
+          <span className="relative inline-flex items-center">
+            <span
+              className={cn(
+                "inline-flex items-center rounded-full px-[2.8cqi] py-[0.55cqi] text-[3.5cqi] font-semibold leading-none",
+                first.pill,
+                first.pillText ?? "text-white",
+              )}
+            >
+              {first.name}
+            </span>
+            <span
+              aria-hidden="true"
+              className={cn(
+                "collab-cursor collab-cursor--first pointer-events-none absolute bottom-[-2.9cqi] right-[-1.8cqi]",
+                first.cursor,
+              )}
+            >
+              <Cursor className="-scale-x-100" />
+              <ClickBurst className="right-[-0.7cqi] top-[-0.7cqi]" />
+            </span>
+          </span>
+
+          <span className="text-white/55">{conjunction}</span>
+
+          <span className="relative inline-flex items-center">
+            <span
+              className={cn(
+                "inline-flex items-center rounded-full px-[2.8cqi] py-[0.55cqi] text-[3.5cqi] font-semibold leading-none",
+                second.pill,
+                second.pillText ?? "text-white",
+              )}
+            >
+              {second.name}
+            </span>
+            <span
+              aria-hidden="true"
+              className={cn(
+                "collab-cursor collab-cursor--second pointer-events-none absolute right-[-2.8cqi] top-[-3.2cqi]",
+                second.cursor,
+              )}
+            >
+              <Cursor />
+              <ClickBurst className="bottom-[-0.7cqi] left-[-0.7cqi]" />
+            </span>
+          </span>
+
+          {trailing ? <span className="text-white/80">{trailing}</span> : null}
+        </p>
+      </div>
+
+      <style>{`
+        .collab-cursor {
+          display: inline-block;
+          transform-origin: 20% 20%;
+          will-change: transform;
+          animation-fill-mode: both;
+        }
+        .collab-cursor--host    { animation: collab-host   9s ease-in-out infinite; }
+        .collab-cursor--first   { animation: collab-first  5.5s ease-in-out infinite; }
+        .collab-cursor--second  { animation: collab-second 5.5s ease-in-out infinite 0.8s; }
+
+        .collab-cursor [data-burst] {
+          opacity: 0;
+          animation: collab-burst 5.5s ease-in-out infinite;
+          animation-fill-mode: both;
+        }
+        .collab-cursor--first  [data-burst] { animation-delay: 1.1s; }
+        .collab-cursor--second [data-burst] { animation-delay: 2.7s; }
+
+        .collab-live-ping { animation: collab-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite; }
+
+        @keyframes collab-host {
+          0%, 100% { transform: translate3d(0, 0, 0) rotate(-14deg); }
+          22%      { transform: translate3d(54cqi, 2cqi, 0) rotate(-4deg); }
+          48%      { transform: translate3d(56cqi, 19cqi, 0) rotate(10deg); }
+          72%      { transform: translate3d(-1cqi, 21cqi, 0) rotate(-2deg); }
+        }
+
+        @keyframes collab-first {
+          0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
+          30%      { transform: translate3d(-1.2cqi, -1cqi, 0) rotate(-5deg); }
+          60%      { transform: translate3d(0.8cqi, 0.6cqi, 0) rotate(3deg); }
+        }
+        @keyframes collab-second {
+          0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
+          35%      { transform: translate3d(1.4cqi, -0.8cqi, 0) rotate(6deg); }
+          65%      { transform: translate3d(-0.6cqi, 0.6cqi, 0) rotate(-3deg); }
+        }
+
+        @keyframes collab-burst {
+          0%, 14%   { opacity: 0; transform: scale(0.4); }
+          22%       { opacity: 1; transform: scale(1); }
+          34%, 100% { opacity: 0; transform: scale(1.5); }
+        }
+
+        @keyframes collab-ping {
+          0%       { transform: scale(1);   opacity: 0.7; }
+          75%, 100%{ transform: scale(2.4); opacity: 0;   }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .collab-cursor,
+          .collab-cursor [data-burst],
+          .collab-live-ping {
+            animation: none;
+            opacity: 1;
+            transform: none;
+          }
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/animata/widget/alarm-clock.stories.tsx b/animata/widget/alarm-clock.stories.tsx
index 04420394..3e1a8974 100644
--- a/animata/widget/alarm-clock.stories.tsx
+++ b/animata/widget/alarm-clock.stories.tsx
@@ -4,22 +4,28 @@ import AlarmClock from "@/animata/widget/alarm-clock";
 const meta = {
   title: "Widget/Alarm Clock",
   component: AlarmClock,
-  parameters: {
-    layout: "centered",
-  },
+  parameters: { layout: "centered" },
   tags: ["autodocs"],
-  argTypes: {},
 } satisfies Meta<typeof AlarmClock>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
+export const WeekdayRoutine: Story = {
+  name: "Weekday routine",
   args: {
     alarms: [
-      { id: 0, time: "7:30 AM", repetition: "Once" },
-      { id: 1, time: "8:00 AM", repetition: "Daily" },
-      { id: 2, time: "9:00 AM", repetition: "Weekdays" },
+      { id: "weekday", time: "6:45 AM", schedule: "Weekdays" },
+      { id: "gym", time: "7:15 AM", schedule: "Mon, Wed, Fri" },
     ],
+    defaultEnabledIds: ["weekday"],
+  },
+};
+
+export const WeekendSleepIn: Story = {
+  name: "Weekend sleep in",
+  args: {
+    alarms: [{ id: "weekend", time: "9:30 AM", schedule: "Sat & Sun" }],
+    defaultEnabledIds: [],
   },
 };
diff --git a/animata/widget/alarm-clock.tsx b/animata/widget/alarm-clock.tsx
index 9593bfd8..1c651059 100644
--- a/animata/widget/alarm-clock.tsx
+++ b/animata/widget/alarm-clock.tsx
@@ -6,61 +6,85 @@ import { useState } from "react";
 import ToggleSwitch from "@/animata/button/toggle-switch";
 import { cn } from "@/lib/utils";
 
-interface AlarmProps {
-  alarms: { id?: number; time: string; repetition: string }[];
-}
+export type AlarmItem = {
+  id: string | number;
+  time: string;
+  schedule: string;
+};
+
+export type AlarmClockProps = {
+  className?: string;
+  alarms?: AlarmItem[];
+  defaultEnabledIds?: Array<string | number>;
+};
+
+const DEFAULT_ALARMS: AlarmItem[] = [
+  { id: "weekday", time: "7:30 AM", schedule: "Weekdays" },
+  { id: "weekend", time: "9:00 AM", schedule: "Sat & Sun" },
+];
 
 export default function AlarmClock({
-  // Placeholder data
-  alarms = [
-    { id: 0, time: "7:30 AM", repetition: "Once" },
-    { id: 1, time: "8:00 AM", repetition: "Daily" },
-    { id: 2, time: "9:00 AM", repetition: "Weekdays" },
-  ],
-}: AlarmProps) {
-  const [toggleStates, setToggleStates] = useState(new Set<number>());
+  className,
+  alarms = DEFAULT_ALARMS,
+  defaultEnabledIds = ["weekday"],
+}: AlarmClockProps) {
+  const visible = alarms.slice(0, 2);
+  const [enabledIds, setEnabledIds] = useState(() => new Set(defaultEnabledIds));
 
-  const handleToggleChange = (value: boolean, index: number) => {
-    setToggleStates((prevStates) => {
-      const newStates = new Set(prevStates);
-      if (value) {
-        newStates.add(index);
-      } else {
-        newStates.delete(index);
-      }
-      return newStates;
+  const handleToggle = (id: string | number, on: boolean) => {
+    setEnabledIds((prev) => {
+      const next = new Set(prev);
+      if (on) next.add(id);
+      else next.delete(id);
+      return next;
     });
   };
 
   return (
-    <div className={cn("group size-52 rounded-3xl border bg-background p-4 dark:border-zinc-700")}>
-      <div className="flex items-center justify-between">
-        <p className="text-md font-bold text-foreground">Alarms</p>
-        <AlarmClockIcon size={20} className="mt-1 text-muted-foreground" />
+    <div
+      className={cn(
+        "flex size-52 flex-col rounded-3xl border border-border bg-background p-4 font-sans shadow-md",
+        className,
+      )}
+    >
+      <div className="flex shrink-0 items-center justify-between">
+        <p className="text-[15px] font-semibold leading-none text-foreground">Alarms</p>
+        <AlarmClockIcon className="size-[15px] text-muted-foreground" strokeWidth={2} aria-hidden />
       </div>
 
-      <div className="mt-3 flex flex-col gap-2">
-        {alarms.map((alarm, index) => (
-          <div className="flex items-center justify-between" key={index}>
-            <div className="flex-col justify-start tabular-nums">
-              <p
-                className={`text-md font-bold ${toggleStates.has(index) ? "text-foreground" : "text-muted-foreground"}`}
-              >
-                {alarm.time}
-              </p>
-              <p
-                className={`text-xs font-medium ${toggleStates.has(index) ? "text-foreground" : "text-muted-foreground"}`}
-              >
-                {alarm.repetition}
-              </p>
-            </div>
-            <ToggleSwitch
-              defaultChecked={toggleStates.has(index)}
-              onChange={(value) => handleToggleChange(value, index)} // Pass index to identify which alarm is toggled
-            />
-          </div>
-        ))}
-      </div>
+      <ul className="mt-3 flex flex-col gap-4">
+        {visible.map((alarm) => {
+          const on = enabledIds.has(alarm.id);
+          return (
+            <li className="flex items-start justify-between gap-3" key={alarm.id}>
+              <div className="min-w-0 pt-0.5">
+                <p
+                  className={cn(
+                    "text-[22px] font-normal leading-none tabular-nums tracking-tight",
+                    on ? "text-foreground" : "text-muted-foreground/80",
+                  )}
+                >
+                  {alarm.time}
+                </p>
+                <p
+                  className={cn(
+                    "mt-1 text-[13px] leading-none",
+                    on ? "text-muted-foreground" : "text-muted-foreground/70",
+                  )}
+                >
+                  {alarm.schedule}
+                </p>
+              </div>
+              <div className="shrink-0 pt-1">
+                <ToggleSwitch
+                  defaultChecked={on}
+                  onChange={(value) => handleToggle(alarm.id, value)}
+                />
+              </div>
+            </li>
+          );
+        })}
+      </ul>
     </div>
   );
 }
diff --git a/animata/widget/battery.tsx b/animata/widget/battery.tsx
index fae1f70e..b70bae1b 100644
--- a/animata/widget/battery.tsx
+++ b/animata/widget/battery.tsx
@@ -1,14 +1,19 @@
 "use client";
+
 import { BatteryMediumIcon } from "lucide-react";
 import { useEffect, useRef } from "react";
 
 import { cn } from "@/lib/utils";
 
-const Battery = () => {
-  const batteryLevel = 50;
-  const circumference = 2 * Math.PI * 40;
-  const gap = ((100 - batteryLevel) / 100) * circumference;
+export type BatteryProps = {
+  className?: string;
+  /** 0–100 */
+  level?: number;
+};
 
+export default function Battery({ className, level = 50 }: BatteryProps) {
+  const circumference = 2 * Math.PI * 40;
+  const gap = ((100 - level) / 100) * circumference;
   const circleRef = useRef<SVGCircleElement>(null);
 
   useEffect(() => {
@@ -19,16 +24,21 @@ const Battery = () => {
   }, [gap]);
 
   return (
-    <div className="relative size-52 rounded-3xl bg-linear-to-br from-blue-500/25 to-blue-200/25 p-4">
-      <div className="relative size-16">
-        <svg viewBox="0 0 100 100" className="absolute right-0 size-full">
-          <circle cx={50} cy={50} r={40} stroke="#5d5" strokeWidth={8} fill="none" />
+    <div
+      className={cn(
+        "relative flex size-52 flex-col rounded-3xl bg-linear-to-br from-sky-600/90 to-sky-400/80 p-4 font-sans shadow-md",
+        className,
+      )}
+    >
+      <div className="relative size-14 shrink-0">
+        <svg viewBox="0 0 100 100" className="size-full" aria-hidden>
+          <circle cx={50} cy={50} r={40} className="stroke-white/25" strokeWidth={8} fill="none" />
           <circle
             ref={circleRef}
             cx={50}
             cy={50}
             r={40}
-            stroke="#2a2"
+            className="stroke-white"
             strokeWidth={8}
             fill="none"
             strokeDashoffset={circumference}
@@ -37,16 +47,17 @@ const Battery = () => {
             transform="rotate(-90 50 50)"
           />
         </svg>
-        <div className="absolute inset-0 flex size-full items-center justify-center">
-          <BatteryMediumIcon className="text-slate-200" size={24} />
+        <div className="absolute inset-0 flex items-center justify-center">
+          <BatteryMediumIcon className="text-white/90" size={22} strokeWidth={1.75} />
         </div>
       </div>
-      <div className={cn("absolute bottom-4 left-4 text-center text-7xl font-light text-white")}>
-        {batteryLevel}
-        <small className="text-sm">%</small>
+
+      <div className="mt-auto flex items-baseline gap-0.5 text-white">
+        <span className="text-[34px] font-normal leading-none tabular-nums tracking-tight">
+          {level}
+        </span>
+        <span className="pb-1 text-[15px] font-medium leading-none">%</span>
       </div>
     </div>
   );
-};
-
-export default Battery;
+}
diff --git a/animata/widget/calendar-event.stories.tsx b/animata/widget/calendar-event.stories.tsx
index 7fe7b93a..f31cf3cd 100644
--- a/animata/widget/calendar-event.stories.tsx
+++ b/animata/widget/calendar-event.stories.tsx
@@ -1,19 +1,39 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import CalendarEvent, { testCalendarEventProps } from "@/animata/widget/calendar-event";
+import CalendarEvent from "@/animata/widget/calendar-event";
+
+const workdayEvents = [
+  { title: "Design critique", time: "10:00 – 10:45", variant: "violet" as const },
+  { title: "Lunch with Alex", time: "12:30 – 1:15", variant: "cyan" as const },
+  { title: "Ship review", time: "3:00 – 4:00", variant: "emerald" as const },
+  { title: "Yoga", time: "6:30 – 7:30", variant: "amber" as const },
+];
 
 const meta = {
-  title: "Widget/Calendar event",
+  title: "Widget/Calendar Event",
   component: CalendarEvent,
-  parameters: {
-    layout: "centered",
-  },
+  parameters: { layout: "centered" },
   tags: ["autodocs"],
-  argTypes: {},
+  args: {
+    date: new Date(2026, 4, 30),
+    events: workdayEvents,
+  },
 } satisfies Meta<typeof CalendarEvent>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
-  args: testCalendarEventProps,
+export const WorkdayGlance: Story = {
+  name: "Workday glance",
 };
+
+export const LightAfternoon: Story = {
+  name: "Light afternoon",
+  args: {
+    events: [
+      { title: "Focus block", time: "2:00 – 4:00", variant: "violet" },
+      { title: "1:1", time: "4:30 – 5:00", variant: "rose" },
+    ],
+  },
+};
+
+export const Primary = WorkdayGlance;
diff --git a/animata/widget/calendar-event.tsx b/animata/widget/calendar-event.tsx
index 4bb63582..1e99c4ff 100644
--- a/animata/widget/calendar-event.tsx
+++ b/animata/widget/calendar-event.tsx
@@ -1,125 +1,134 @@
 import { cn } from "@/lib/utils";
 
-interface CalendarEvent {
+export type CalendarEventVariant = "violet" | "cyan" | "emerald" | "amber" | "rose";
+
+export type CalendarEventItem = {
   title: string;
   time: string;
-  color: string;
-  bgcolor: string;
-  barColor: string;
-  dateColor: string;
-}
+  variant?: CalendarEventVariant;
+};
 
-interface CalendarEventProps {
-  dates: CalendarEvent[];
-}
+export type CalendarEventProps = {
+  className?: string;
+  /** Defaults to today. */
+  date?: Date;
+  events?: CalendarEventItem[];
+  maxVisible?: number;
+};
 
-export const testCalendarEventProps: CalendarEventProps = {
-  dates: [
-    {
-      title: "Backlog Updates",
-      time: "10:30 - 10:45",
-      color: "text-purple-900",
-      bgcolor: "bg-purple-200",
-      barColor: "bg-purple-700",
-      dateColor: "text-purple-600",
-    },
-    {
-      title: "Review Jade A",
-      time: "12:00 - 12:45",
-      color: "text-cyan-900",
-      bgcolor: "bg-cyan-200",
-      barColor: "bg-cyan-700",
-      dateColor: "text-cyan-600",
-    },
-    {
-      title: "Design Meeting",
-      time: "14:00 - 15:00",
-      color: "text-green-900",
-      bgcolor: "bg-green-200",
-      barColor: "bg-green-700",
-      dateColor: "text-green-600",
-    },
-    {
-      title: "Development",
-      time: "16:00 - 17:00",
-      color: "text-yellow-900",
-      bgcolor: "bg-yellow-200",
-      barColor: "bg-yellow-700",
-      dateColor: "text-yellow-600",
-    },
-    {
-      title: "QA Testing",
-      time: "18:00 - 19:00",
-      color: "text-red-900",
-      bgcolor: "bg-red-200",
-      barColor: "bg-red-700",
-      dateColor: "text-red-600",
-    },
-  ],
+export const DEFAULT_CALENDAR_EVENTS: CalendarEventItem[] = [
+  { title: "Design critique", time: "10:00 – 10:45", variant: "violet" },
+  { title: "Lunch with Alex", time: "12:30 – 1:15", variant: "cyan" },
+  { title: "Ship review", time: "3:00 – 4:00", variant: "emerald" },
+];
+
+const VARIANT_STYLES: Record<
+  CalendarEventVariant,
+  { chip: string; dot: string; title: string; time: string }
+> = {
+  violet: {
+    chip: "bg-violet-500/15 dark:bg-violet-500/25",
+    dot: "bg-violet-600",
+    title: "text-foreground",
+    time: "text-muted-foreground",
+  },
+  cyan: {
+    chip: "bg-cyan-500/15 dark:bg-cyan-500/25",
+    dot: "bg-cyan-600",
+    title: "text-foreground",
+    time: "text-muted-foreground",
+  },
+  emerald: {
+    chip: "bg-emerald-500/15 dark:bg-emerald-500/25",
+    dot: "bg-emerald-600",
+    title: "text-foreground",
+    time: "text-muted-foreground",
+  },
+  amber: {
+    chip: "bg-amber-500/15 dark:bg-amber-500/25",
+    dot: "bg-amber-600",
+    title: "text-foreground",
+    time: "text-muted-foreground",
+  },
+  rose: {
+    chip: "bg-rose-500/15 dark:bg-rose-500/25",
+    dot: "bg-rose-600",
+    title: "text-foreground",
+    time: "text-muted-foreground",
+  },
 };
 
-const maxEvents = 2;
+function eventTimeStart(time: string) {
+  const parts = time.split(/\s[–-]\s/);
+  return parts[0]?.trim() ?? time;
+}
 
-function EventCard({ date }: { date: CalendarEvent; hides: boolean }) {
+function EventRow({ event }: { event: CalendarEventItem }) {
+  const variant = VARIANT_STYLES[event.variant ?? "violet"];
   return (
-    <div
-      className={cn(
-        "relative flex h-10 w-full items-center gap-2 overflow-hidden rounded-md pl-1 transition-all",
-        date.bgcolor,
-      )}
-    >
-      <div className={cn("h-8 w-1 rounded-sm", date.barColor)}></div>
-      <div className="flex-col items-center justify-center">
-        <h4 className={cn("text-sm font-bold", date.color)}>{date.title}</h4>
-        <p className={cn("whitespace-pre text-xs", date.dateColor)}>{date.time}</p>
+    <li className={cn("flex shrink-0 gap-2 rounded-md px-2 py-1", variant.chip)}>
+      <span className={cn("mt-1.5 size-2 shrink-0 rounded-full", variant.dot)} aria-hidden />
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <p className={cn("truncate text-[15px] font-semibold leading-snug", variant.title)}>
+          {event.title}
+        </p>
+        <p className={cn("truncate text-[13px] leading-snug tabular-nums", variant.time)}>
+          {event.time}
+        </p>
       </div>
-    </div>
+    </li>
   );
 }
 
 export default function CalendarEvent({
-  dates = testCalendarEventProps.dates,
+  className,
+  date = new Date(),
+  events = DEFAULT_CALENDAR_EVENTS,
+  maxVisible = 2,
 }: CalendarEventProps) {
-  const extraCount = dates.length - maxEvents;
+  const list = events;
+  const visible = list.slice(0, maxVisible);
+  const extra = list.length - maxVisible;
+  const nextEvent = list[maxVisible];
+
   return (
     <div
       className={cn(
-        "group relative flex size-52 flex-col overflow-hidden rounded-3xl border-2 bg-white p-4",
+        "flex size-52 flex-col rounded-3xl border border-border bg-background p-3.5 font-sans shadow-md",
+        className,
       )}
     >
-      <div className="flex gap-1">
-        <p className="text-xl font-bold text-red-400">
-          {new Date().toLocaleString("default", { weekday: "short" })}
+      <div className="flex shrink-0 items-baseline gap-1.5">
+        <p className="text-[15px] font-semibold leading-snug text-rose-500">
+          {date.toLocaleString("default", { weekday: "short" })}
+        </p>
+        <p className="text-[22px] font-normal leading-snug tabular-nums tracking-tight text-foreground">
+          {date.getDate()}
         </p>
-        <p className="text-xl font-bold text-black">{new Date().getDate()}</p>
-      </div>
-      <div className="my-2 flex flex-1 flex-col gap-2">
-        {dates.slice(0, maxEvents).map((date, index) => (
-          <EventCard hides key={index} date={date} />
-        ))}
       </div>
-      {extraCount ? (
-        <>
-          <div className="flex h-8 w-full items-center justify-between rounded-md border-2 border-slate-200 bg-slate-50 p-1">
-            <p className="text-xs font-bold text-neutral-800">
-              +{dates.length - maxEvents} event{extraCount > 1 && "s"}
-            </p>
-            <p className="text-[10px] text-gray-500">16:15 - 20:00</p>
-          </div>
-          {dates.slice(maxEvents, maxEvents + 3).map((_date, index) => (
-            <div
-              key={index}
-              style={{
-                paddingInline: `${(index + 1) * 6}px`,
-              }}
-            >
-              <div className="mt-[1px] h-[2px] w-full rounded-full bg-gray-100" />
-            </div>
+
+      {visible.length > 0 ? (
+        <ul className="mt-2 flex shrink-0 flex-col gap-1">
+          {visible.map((event, index) => (
+            <EventRow key={`${event.title}-${index}`} event={event} />
           ))}
-        </>
+        </ul>
       ) : (
-        <div className="w-full text-center text-xs font-bold text-gray-500">No more events</div>
+        <p className="mt-2 shrink-0 text-[13px] leading-snug text-muted-foreground">
+          No events today
+        </p>
       )}
+
+      {extra > 0 ? (
+        <div className="mt-1.5 flex h-8 shrink-0 items-center justify-between gap-2 rounded-md bg-muted/60 px-2.5">
+          <p className="shrink-0 text-[13px] font-medium leading-snug text-foreground">
+            +{extra} more
+          </p>
+          <p className="min-w-0 truncate text-right text-[13px] leading-snug tabular-nums text-muted-foreground">
+            {nextEvent ? eventTimeStart(nextEvent.time) : ""}
+          </p>
+        </div>
+      ) : null}
     </div>
   );
 }
diff --git a/animata/widget/calorie-counter.stories.tsx b/animata/widget/calorie-counter.stories.tsx
index b0aaff0b..789c57da 100644
--- a/animata/widget/calorie-counter.stories.tsx
+++ b/animata/widget/calorie-counter.stories.tsx
@@ -1,19 +1,19 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import CalorieCounter, { testCalorieCounterProps } from "@/animata/widget/calorie-counter";
+import CalorieCounter from "@/animata/widget/calorie-counter";
 
 const meta = {
   title: "Widget/Calorie Counter",
   component: CalorieCounter,
-  parameters: {
-    layout: "centered",
-  },
+  parameters: { layout: "centered" },
   tags: ["autodocs"],
-  argTypes: {},
 } satisfies Meta<typeof CalorieCounter>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
-  args: testCalorieCounterProps,
+  args: {
+    goal: 4000,
+    fulfilled: 120,
+  },
 };
diff --git a/animata/widget/calorie-counter.tsx b/animata/widget/calorie-counter.tsx
index 92dfc668..b262fb0d 100644
--- a/animata/widget/calorie-counter.tsx
+++ b/animata/widget/calorie-counter.tsx
@@ -1,49 +1,76 @@
 "use client";
+
 import DonutChart from "@/animata/graphs/donut-chart";
 
-interface ICalorieCounterProps {
-  goal: number;
-  fulfilled: number;
-  image: string;
-}
+import { cn } from "@/lib/utils";
+
+const DEFAULT_IMAGE =
+  "https://plus.unsplash.com/premium_vector-1689096672037-98309fdc7f44?bg=FFFFFF&q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3";
 
-export const testCalorieCounterProps: ICalorieCounterProps = {
-  goal: 4000,
-  fulfilled: 120,
-  image:
-    "https://plus.unsplash.com/premium_vector-1689096672037-98309fdc7f44?bg=FFFFFF&q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3",
+export type CalorieCounterProps = {
+  className?: string;
+  goal?: number;
+  fulfilled?: number;
+  /** @deprecated Use `avatarUrl` */
+  image?: string;
+  avatarUrl?: string;
+  weekday?: string;
+  dateLabel?: string;
 };
 
 export default function CalorieCounter({
-  goal = testCalorieCounterProps.goal,
-  fulfilled = testCalorieCounterProps.fulfilled,
-  image = testCalorieCounterProps.image,
-}: ICalorieCounterProps) {
+  className,
+  goal = 4000,
+  fulfilled = 120,
+  image,
+  avatarUrl = image ?? DEFAULT_IMAGE,
+  weekday = "Monday",
+  dateLabel = "25 October",
+}: CalorieCounterProps) {
+  const progress = goal > 0 ? Math.min(100, (fulfilled / goal) * 100) : 0;
+
   return (
-    <div className="calorie-container relative flex h-96 w-52 flex-col items-center justify-start gap-4 rounded-3xl border-2 border-gray-200 bg-gray-100 px-5 py-3 dark:border-none dark:bg-slate-800 sm:w-72">
-      <div className="day-date flex w-full flex-row items-center justify-between pt-2">
+    <div
+      className={cn(
+        "calorie-container relative flex h-96 w-52 flex-col items-center justify-start gap-4 rounded-3xl border-2 border-gray-200 bg-gray-100 px-5 py-3 sm:w-72 dark:border-none dark:bg-slate-800",
+        className,
+      )}
+    >
+      <div className="flex w-full flex-row items-center justify-between pt-2">
         <div>
-          <p className="day text-gray-400">Monday</p>
-          <p className="date font-md text-xl dark:text-white">25 October</p>
+          <p className="text-gray-400">{weekday}</p>
+          <p className="text-xl dark:text-white">{dateLabel}</p>
         </div>
-        <img alt="image" src={image} className="h-10 w-10 rounded-full" />
+        <img
+          alt=""
+          src={avatarUrl}
+          className="h-10 w-10 rounded-full object-cover"
+          onError={(e) => {
+            e.currentTarget.onerror = null;
+            e.currentTarget.src = "https://avatar.vercel.sh/calorie";
+          }}
+        />
       </div>
-      <DonutChart
-        progress={(fulfilled / goal) * 100}
-        circleWidth={18}
-        progressWidth={18}
-        size={180}
-        progressClassName="dark:text-cyan-300 text-green-400"
-        className="relative m-2 flex items-center justify-center"
-      />
-      <div className="goal absolute bottom-8 flex h-14 w-56 items-center justify-between rounded-xl border-gray-100 bg-gray-400/10 bg-clip-padding px-4 backdrop-blur-sm backdrop-filter sm:w-64">
+
+      <div className="relative m-2 grid size-[180px] shrink-0 place-items-center">
+        <DonutChart
+          progress={progress}
+          circleWidth={18}
+          progressWidth={18}
+          size={180}
+          progressClassName="text-green-400 dark:text-cyan-300"
+          className="col-start-1 row-start-1"
+        />
+        <div className="col-start-1 row-start-1 flex flex-col items-center text-center">
+          <p className="text-gray-400 dark:text-gray-200">Today</p>
+          <p className="text-xl dark:text-white">{fulfilled}Cal</p>
+        </div>
+      </div>
+
+      <div className="flex h-14 w-full mt-auto shrink-0 items-center justify-between rounded-xl border-gray-100 bg-gray-400/10 px-4 backdrop-blur-sm sm:w-64">
         <p className="dark:text-white">Your goal</p>
         <p className="font-bold text-orange-300">{goal}Cal</p>
       </div>
-      <div className="fulfilled absolute top-40 flex flex-col items-center">
-        <p className="text-gray-400 dark:text-gray-200">Today</p>
-        <p className="font-md text-xl dark:text-white">{fulfilled}Cal</p>
-      </div>
     </div>
   );
 }
diff --git a/animata/widget/delivery-card.stories.tsx b/animata/widget/delivery-card.stories.tsx
index 57066744..9ce98a57 100644
--- a/animata/widget/delivery-card.stories.tsx
+++ b/animata/widget/delivery-card.stories.tsx
@@ -4,21 +4,31 @@ import DeliveryCard from "@/animata/widget/delivery-card";
 const meta = {
   title: "Widget/Delivery Card",
   component: DeliveryCard,
-  parameters: {
-    layout: "centered",
-  },
+  parameters: { layout: "centered" },
   tags: ["autodocs"],
-  argTypes: {},
 } satisfies Meta<typeof DeliveryCard>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
+export const OutForDelivery: Story = {
+  name: "Out for delivery",
+  args: {
+    progress: 62,
+    arrivalTime: "12:40",
+    location: "Mission District",
+    timeAgo: "8 min",
+    simulateProgress: false,
+  },
+};
+
+export const LiveDemo: Story = {
+  name: "Live demo",
   args: {
-    progress: 30,
-    arrivalTime: "16:30",
-    location: "Newroad",
-    timeAgo: "30min",
+    progress: 20,
+    arrivalTime: "09:26",
+    location: "Pokhara",
+    timeAgo: "30 min",
+    simulateProgress: true,
   },
 };
diff --git a/animata/widget/delivery-card.tsx b/animata/widget/delivery-card.tsx
index 8505848b..a9c6fcbf 100644
--- a/animata/widget/delivery-card.tsx
+++ b/animata/widget/delivery-card.tsx
@@ -1,84 +1,105 @@
 "use client";
+
 import { LocateIcon, TruckIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import { cn } from "@/lib/utils";
 
-interface DeliveryCardProps {
+export type DeliveryCardProps = {
+  className?: string;
   progress?: number;
   arrivalTime?: string;
   location?: string;
   timeAgo?: string;
-}
+  /** Demo-only: animates progress on an interval. */
+  simulateProgress?: boolean;
+};
 
-const DeliveryCard = ({
-  progress = 10,
+export default function DeliveryCard({
+  className,
+  progress = 42,
   arrivalTime = "09:26",
   location = "Pokhara",
   timeAgo = "30 min",
-}: DeliveryCardProps) => {
-  const [adjustedProgress, setAdjustedProgress] = useState(progress);
-  const status = progress <= 0 ? "Processing" : progress >= 100 ? "Delivered" : "In Transit";
+  simulateProgress = false,
+}: DeliveryCardProps) {
+  const [demoProgress, setDemoProgress] = useState(progress);
+  const displayProgress = simulateProgress ? demoProgress : progress;
+  const clamped = Math.min(100, Math.max(0, displayProgress));
+  const status = clamped <= 0 ? "Processing" : clamped >= 100 ? "Delivered" : "In transit";
+  const headline = clamped >= 100 ? "Arrived" : "Arrives today";
+
+  useEffect(() => {
+    setDemoProgress(progress);
+  }, [progress]);
 
   useEffect(() => {
-    const timeout = setInterval(() => {
-      setAdjustedProgress((currentProgress) => {
-        let newProgress = currentProgress;
-        if (newProgress >= 100) {
-          return 0;
-        }
-        newProgress += 30;
-        return Math.min(Math.max(0, newProgress), 100);
+    if (!simulateProgress) return;
+    const id = setInterval(() => {
+      setDemoProgress((current) => {
+        if (current >= 100) return 0;
+        return Math.min(100, current + 30);
       });
     }, 3000);
-    return () => clearInterval(timeout);
-  }, []);
+    return () => clearInterval(id);
+  }, [simulateProgress]);
 
   return (
-    <div className="relative size-52 overflow-hidden rounded-3xl font-mono text-white">
+    <div
+      className={cn(
+        "relative size-52 overflow-hidden rounded-3xl border border-zinc-900/50 font-sans text-white shadow-md",
+        "bg-zinc-800 dark:border-zinc-950 dark:bg-zinc-900",
+        className,
+      )}
+    >
       <div className="absolute right-2 z-10 h-28 w-5 bg-white/30">
-        <div className="absolute -bottom-2 z-0 h-4 w-full rotate-45 bg-gray-700"></div>
+        <div className="absolute -bottom-2 z-0 h-4 w-full rotate-45 bg-zinc-700 dark:bg-zinc-800" />
       </div>
 
-      <div className="flex h-full flex-col justify-between">
-        <div className="relative w-full bg-gray-500 px-4 pb-2 pt-4">
+      <div className="flex h-full flex-col">
+        <div className="relative shrink-0 bg-zinc-600 px-4 pb-2.5 pt-4 dark:bg-zinc-700">
           <div className="absolute right-2 top-0 flex h-full w-5 justify-center">
-            <div className="z-20 w-[2px] bg-gray-500"></div>
+            <div className="z-20 w-0.5 bg-zinc-600 dark:bg-zinc-700" />
           </div>
-          <p className="text-md">{adjustedProgress === 100 ? "Arrived" : "Arrives Today"}</p>
-          <p className="font-mono text-xl font-bold">{arrivalTime}</p>
+          <p className="text-[13px] font-medium leading-none text-white/85">{headline}</p>
+          <p className="mt-1 text-[22px] font-normal leading-none tabular-nums tracking-tight">
+            {arrivalTime}
+          </p>
         </div>
 
-        <div className="border-t-2 border-t-gray-900 bg-gray-700 px-4 pb-4 pt-2">
-          <p className="w-full text-yellow-400">{status}</p>
-          <div className="relative mx-0.5 mb-6 mt-5 bg-gray-400">
-            <div className="absolute left-0 top-1/2 size-3 -translate-y-1/2 rounded-full bg-yellow-300"></div>
-            <div className="absolute right-0 top-1/2 z-10 size-3 -translate-y-1/2 rounded-full bg-gray-400"></div>
+        <div className="flex min-h-0 flex-1 flex-col border-t-2 border-t-zinc-900/80 bg-zinc-700 px-4 pb-4 pt-2 dark:border-t-zinc-950 dark:bg-zinc-800">
+          <p className="shrink-0 text-[13px] font-medium leading-none text-amber-400 dark:text-amber-300">
+            {status}
+          </p>
+
+          <div className="relative mx-0.5 mb-5 mt-4 shrink-0 bg-zinc-500 dark:bg-zinc-600">
+            <div className="absolute left-0 top-1/2 size-3 -translate-y-1/2 rounded-full bg-amber-400 dark:bg-amber-300" />
+            <div className="absolute right-0 top-1/2 z-10 size-3 -translate-y-1/2 rounded-full bg-zinc-600 dark:bg-zinc-700" />
             <div
-              className="relative h-0.5 bg-yellow-300 transition-all ease-in-out [transition-duration:500ms]"
-              style={{
-                width: `${adjustedProgress}%`,
-              }}
+              className="relative h-0.5 bg-amber-400 transition-[width] duration-500 ease-in-out dark:bg-amber-300"
+              style={{ width: `${clamped}%` }}
             >
-              <TruckIcon
-                className={cn(
-                  "absolute right-0 top-1/2 z-50 size-8 -translate-y-1/2 translate-x-1/2 rounded-full bg-yellow-300 p-1.5 text-gray-700 transition-all duration-500",
-                )}
-              />
+              <TruckIcon className="absolute right-0 top-1/2 z-50 size-8 -translate-y-1/2 translate-x-1/2 rounded-full bg-amber-400 p-1.5 text-zinc-900 dark:bg-amber-300 dark:text-zinc-800" />
             </div>
           </div>
 
-          <div className="my-1 flex gap-1 tracking-tight text-gray-400">
-            <LocateIcon className="inline size-4" />
-            <div>
-              <span className="line-clamp-1 text-sm leading-none">{location}</span>
-              <span className="text-sm leading-none">{timeAgo} ago</span>
+          <div className="mt-auto flex items-start gap-1.5">
+            <LocateIcon
+              className="mt-0.5 size-4 shrink-0 text-zinc-400 dark:text-zinc-500"
+              strokeWidth={2}
+              aria-hidden
+            />
+            <div className="min-w-0">
+              <p className="truncate text-[15px] font-semibold leading-tight text-white">
+                {location}
+              </p>
+              <p className="mt-0.5 text-[13px] leading-none tabular-nums text-zinc-400 dark:text-zinc-500">
+                {timeAgo} ago
+              </p>
             </div>
           </div>
         </div>
       </div>
     </div>
   );
-};
-
-export default DeliveryCard;
+}
diff --git a/animata/widget/flight-widget.tsx b/animata/widget/flight-widget.tsx
index 426fb5ec..666b181c 100644
--- a/animata/widget/flight-widget.tsx
+++ b/animata/widget/flight-widget.tsx
@@ -35,7 +35,7 @@ export default function FlightWidget() {
           <div className="text-lg font-semibold tracking-widest text-red-700">AIR CANADA</div>
           <img
             src="https://seeklogo.com/images/A/air-canada-logo-A0180CCDB8-seeklogo.com.png"
-            className="h-6 w-6"
+            className="h-6 w-6 mix-blend-multiply"
             alt="Air Canada logo"
           />
         </div>
diff --git a/animata/widget/fund-widget.tsx b/animata/widget/fund-widget.tsx
index e02e9840..166a3e94 100644
--- a/animata/widget/fund-widget.tsx
+++ b/animata/widget/fund-widget.tsx
@@ -106,20 +106,9 @@ export default function FundWidget({
   const rotateYValue = Math.min(dragDistance / 10, 15);
 
   return (
-    <div
-      className={cn(
-        "storybook-fix group flex items-center justify-center py-32",
-        containerClassName,
-      )}
-    >
-      <div
-        className={cn(
-          "absolute inset-0 -z-10 h-full w-full items-center bg-linear-to-r from-violet-200 to-pink-200",
-          backgroundClassName,
-        )}
-      />
+    <div className={cn("relative flex size-52 items-center justify-center", containerClassName)}>
       <AnimatePresence initial={false}>
-        <div className="flex h-72 w-64 flex-col items-center">
+        <div className="flex h-72 w-64 origin-center scale-[0.72] flex-col items-center">
           <div className="z-20 flex h-64 w-72 overflow-clip rounded-[35px] bg-white px-6 pt-6 shadow-[0px_0px_10px_1px_#bec2bf]">
             <motion.div
               key={activeDiv}
diff --git a/animata/widget/music-widget.tsx b/animata/widget/music-widget.tsx
index 86bb1373..cddcf84e 100644
--- a/animata/widget/music-widget.tsx
+++ b/animata/widget/music-widget.tsx
@@ -5,112 +5,107 @@ import { useState } from "react";
 
 import { absoluteUrl, cn } from "@/lib/utils";
 
-const songs = [
-  {
-    title: "Never gonna give you up",
-    artist: "Rick Astley",
-  },
-  {
-    title: "It must have been love",
-    artist: "Roxette",
-  },
-  {
-    title: "Take on me",
-    artist: "A-ha",
-  },
-];
-
-export default function MusicWidget() {
-  const [currentSong, setCurrentSong] = useState(0);
-  const [play, setPlay] = useState(false);
+export type MusicTrack = {
+  title: string;
+  artist: string;
+};
 
-  const handleClick = () => {
-    setPlay((prevValue) => !prevValue);
-  };
+export type MusicWidgetProps = {
+  className?: string;
+  tracks?: MusicTrack[];
+  coverUrl?: string;
+  defaultPlaying?: boolean;
+};
 
-  const handleNext = () => {
-    setCurrentSong((prevValue) => (prevValue + 1) % songs.length);
-  };
-
-  const handlePrev = () => {
-    setCurrentSong((prevValue) => (prevValue - 1 + songs.length) % songs.length);
-  };
+const DEFAULT_TRACKS: MusicTrack[] = [
+  { title: "Never Gonna Give You Up", artist: "Rick Astley" },
+  { title: "It Must Have Been Love", artist: "Roxette" },
+  { title: "Take On Me", artist: "A-ha" },
+];
 
-  const song = songs[currentSong];
-  const { title, artist } = song;
+export default function MusicWidget({
+  className,
+  tracks = DEFAULT_TRACKS,
+  coverUrl = absoluteUrl("/widget/music.jpg"),
+  defaultPlaying = false,
+}: MusicWidgetProps) {
+  const [index, setIndex] = useState(0);
+  const [playing, setPlaying] = useState(defaultPlaying);
+  const safeTracks = tracks.length > 0 ? tracks : DEFAULT_TRACKS;
+  const track = safeTracks[index % safeTracks.length];
 
   return (
-    <div className="flex h-52 w-52 flex-col rounded-3xl bg-linear-to-bl from-indigo-200 to-indigo-600 p-4 text-white">
-      <div className="relative flex flex-1 flex-col justify-between">
-        <div className="flex">
-          <div className="flex-1">
-            <img
-              src={absoluteUrl("/widget/music.jpg")}
-              alt="Album Pic"
-              className="h-20 w-20 rounded-2xl"
-            />
-          </div>
-          <div className={cn("flex h-fit w-12 flex-wrap justify-center gap-1")}>
+    <div
+      className={cn(
+        "flex size-52 flex-col rounded-3xl bg-linear-to-bl from-indigo-200 to-indigo-700 p-4 text-white shadow-md dark:from-indigo-900 dark:to-indigo-950",
+        className,
+      )}
+    >
+      <div className="relative flex min-h-0 flex-1 flex-col justify-between">
+        <div className="flex gap-2">
+          <img src={coverUrl} alt="" className="size-20 shrink-0 rounded-2xl object-cover" />
+          <div className="flex ms-auto h-fit flex-wrap justify-end gap-0.5" aria-hidden>
             <Music2
               size={16}
-              className={cn("text-white transition-all", {
-                hidden: !play,
-                "delay-500 duration-1000 animate-in zoom-in direction-alternate-reverse repeat-infinite":
-                  play,
+              className={cn("transition-all", {
+                hidden: !playing,
+                "animate-in zoom-in repeat-infinite direction-alternate-reverse duration-1000 delay-500":
+                  playing,
               })}
             />
             <Music3
               size={14}
-              className={cn("text-white transition-all", {
-                hidden: !play,
-                "duration-1000 animate-in zoom-in direction-alternate-reverse repeat-infinite":
-                  play,
+              className={cn("transition-all", {
+                hidden: !playing,
+                "animate-in zoom-in repeat-infinite direction-alternate-reverse duration-1000":
+                  playing,
               })}
             />
             <Music
               size={18}
-              className={cn("text-white transition-all", {
-                hidden: !play,
-                "delay-300 duration-1000 animate-in zoom-in direction-alternate-reverse repeat-infinite":
-                  play,
+              className={cn("transition-all", {
+                hidden: !playing,
+                "animate-in zoom-in repeat-infinite direction-alternate-reverse duration-1000 delay-300":
+                  playing,
               })}
             />
           </div>
         </div>
-        <p title={title} className="line-clamp-1 w-full text-lg font-bold leading-none">
-          {title}
-        </p>
-        <p
-          title={artist}
-          className="-mt-6 line-clamp-1 text-xs font-semibold leading-none text-indigo-300"
-        >
-          {artist}
-        </p>
+        <div className="space-y-0.5">
+          <p className="line-clamp-1 text-sm font-semibold leading-tight">{track.title}</p>
+          <p className="line-clamp-1 text-xs font-medium text-indigo-200">{track.artist}</p>
+        </div>
       </div>
+
       <div className="mt-2 flex items-center justify-evenly">
-        <SkipBack
-          size={20}
-          className="cursor-pointer fill-white text-white hover:fill-gray-100 hover:text-gray-100 active:fill-gray-200 active:text-gray-200"
-          onClick={handlePrev}
-        />
-        <div onClick={handleClick}>
-          {!play ? (
-            <Play
-              size={25}
-              className="cursor-pointer fill-white text-white hover:fill-gray-100 hover:text-gray-100 active:fill-gray-200 active:text-gray-200"
-            />
+        <button
+          type="button"
+          aria-label="Previous track"
+          className="touch-manipulation flex min-h-11 min-w-11 items-center justify-center rounded-full"
+          onClick={() => setIndex((i) => (i - 1 + safeTracks.length) % safeTracks.length)}
+        >
+          <SkipBack className="size-5 fill-current" />
+        </button>
+        <button
+          type="button"
+          aria-label={playing ? "Pause" : "Play"}
+          className="touch-manipulation flex min-h-11 min-w-11 items-center justify-center rounded-full"
+          onClick={() => setPlaying((p) => !p)}
+        >
+          {playing ? (
+            <Pause className="size-6 fill-current" />
           ) : (
-            <Pause
-              size={25}
-              className="cursor-pointer fill-white text-white hover:fill-gray-100 hover:text-gray-100 active:fill-gray-200 active:text-gray-200"
-            />
+            <Play className="size-6 fill-current" />
           )}
-        </div>
-        <SkipForward
-          size={25}
-          className="cursor-pointer fill-white text-white hover:fill-gray-100 hover:text-gray-100 active:fill-gray-200 active:text-gray-200"
-          onClick={handleNext}
-        />
+        </button>
+        <button
+          type="button"
+          aria-label="Next track"
+          className="touch-manipulation flex min-h-11 min-w-11 items-center justify-center rounded-full"
+          onClick={() => setIndex((i) => (i + 1) % safeTracks.length)}
+        >
+          <SkipForward className="size-5 fill-current" />
+        </button>
       </div>
     </div>
   );
diff --git a/animata/widget/notes.stories.tsx b/animata/widget/notes.stories.tsx
index 0c49744e..7105b51c 100644
--- a/animata/widget/notes.stories.tsx
+++ b/animata/widget/notes.stories.tsx
@@ -4,16 +4,16 @@ import Notes from "@/animata/widget/notes";
 const meta = {
   title: "Widget/Notes",
   component: Notes,
-  parameters: {
-    layout: "centered",
-  },
+  parameters: { layout: "centered" },
   tags: ["autodocs"],
-  argTypes: {},
 } satisfies Meta<typeof Notes>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
+export const AboutJohn: Story = {
+  name: "About John",
   args: {},
 };
+
+export const Primary = AboutJohn;
diff --git a/animata/widget/notes.tsx b/animata/widget/notes.tsx
index 165b9fb1..6989c9c8 100644
--- a/animata/widget/notes.tsx
+++ b/animata/widget/notes.tsx
@@ -1,19 +1,52 @@
-export function NotesCard({ title, children }: { title?: string; children?: React.ReactNode }) {
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+export type NotesCardProps = {
+  className?: string;
+  title?: string;
+  children?: ReactNode;
+};
+
+export function NotesCard({ className, title = "Note", children }: NotesCardProps) {
   return (
-    <div className="h-64 w-48 rounded-3xl border bg-[#fced99] p-4 font-sans text-zinc-950 shadow-sm">
-      <div className="text-lg font-bold tracking-wide">{title}</div>
-      <div className="mt-3 flex flex-col gap-3 text-sm">{children}</div>
+    <div
+      className={cn(
+        "flex h-64 w-48 flex-col rounded-3xl border border-amber-200/80 bg-[#fced99] p-4 font-sans shadow-md dark:border-amber-900/40 dark:bg-amber-100/90",
+        className,
+      )}
+    >
+      <p className="shrink-0 text-[15px] font-semibold leading-snug text-zinc-950">{title}</p>
+      <div className="mt-2 flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto text-[13px] leading-snug text-zinc-800">
+        {children}
+      </div>
     </div>
   );
 }
 
-export default function Notes() {
+export type NotesProps = {
+  className?: string;
+  title?: string;
+  lines?: string[];
+};
+
+const DEFAULT_LINES = [
+  "Has worked with ABC for the last 10 years",
+  "Built two dozen web apps",
+  "Latest work is live in stores",
+  "A cool guy",
+];
+
+export default function Notes({
+  className,
+  title = "About John",
+  lines = DEFAULT_LINES,
+}: NotesProps) {
   return (
-    <NotesCard title="About John">
-      <div>Has worked with ABC for last 10 years</div>
-      <div>Developed over 2 dozens of web apps</div>
-      <div>His latest work is live on stores</div>
-      <div>A cool guy</div>
+    <NotesCard className={className} title={title}>
+      {lines.map((line) => (
+        <p key={line}>{line}</p>
+      ))}
     </NotesCard>
   );
 }
diff --git a/animata/widget/reminder-widget.stories.tsx b/animata/widget/reminder-widget.stories.tsx
index 4f7555a5..f86f3822 100644
--- a/animata/widget/reminder-widget.stories.tsx
+++ b/animata/widget/reminder-widget.stories.tsx
@@ -4,16 +4,18 @@ import ReminderWidget from "@/animata/widget/reminder-widget";
 const meta = {
   title: "Widget/Reminder Widget",
   component: ReminderWidget,
-  parameters: {
-    layout: "centered",
-  },
+  parameters: { layout: "centered" },
   tags: ["autodocs"],
-  argTypes: {},
 } satisfies Meta<typeof ReminderWidget>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
-  args: {},
+export const TripPacking: Story = {
+  name: "Trip packing",
+  args: {
+    title: "Packing",
+  },
 };
+
+export const Primary = TripPacking;
diff --git a/animata/widget/reminder-widget.tsx b/animata/widget/reminder-widget.tsx
index e85e9d7a..d0104272 100644
--- a/animata/widget/reminder-widget.tsx
+++ b/animata/widget/reminder-widget.tsx
@@ -1,57 +1,106 @@
 "use client";
-import { BellDot } from "lucide-react";
+
+import { Bell } from "lucide-react";
 import { useState } from "react";
 
 import { cn } from "@/lib/utils";
 
-const reminders = [
-  "Passport",
-  "Citizenship",
-  "birth certificate",
-  "License",
-  "key",
-  "mobile",
-  "laptop",
-  "wallet",
-  "watch",
+export type ReminderWidgetItem = {
+  id: string;
+  label: string;
+  done?: boolean;
+};
+
+export type ReminderWidgetProps = {
+  className?: string;
+  title?: string;
+  items?: ReminderWidgetItem[];
+};
+
+const DEFAULT_ITEMS: ReminderWidgetItem[] = [
+  { id: "passport", label: "Passport" },
+  { id: "citizenship", label: "Citizenship" },
+  { id: "birth-cert", label: "Birth certificate" },
+  { id: "license", label: "License" },
+  { id: "keys", label: "Keys" },
+  { id: "phone", label: "Phone" },
+  { id: "laptop", label: "Laptop" },
+  { id: "wallet", label: "Wallet" },
 ];
 
-export default function ReminderWidget() {
-  const [reminder, setReminder] = useState<string[]>(reminders);
+export default function ReminderWidget({
+  className,
+  title = "Packing",
+  items = DEFAULT_ITEMS,
+}: ReminderWidgetProps) {
+  const [rows, setRows] = useState(items);
+
+  const remaining = rows.filter((item) => !item.done).length;
 
-  const handleCheckboxChange = (data: string) => {
-    setReminder((prev) =>
-      prev.includes(data) ? prev.filter((remind) => remind !== data) : [...prev, data],
-    );
+  const toggle = (id: string) => {
+    setRows((prev) => prev.map((item) => (item.id === id ? { ...item, done: !item.done } : item)));
   };
 
   return (
-    <div className={cn("group h-80 w-52 rounded-3xl bg-zinc-900 p-4")}>
-      <div className="text-md flex items-center justify-between gap-2 font-bold text-blue-400">
-        <div className="flex items-center gap-2">
-          <BellDot color="#60a5fa" size={15} />
-          <p className="text-xl">Reminder</p>
-        </div>
-        <div className="flex h-4 w-4 items-center justify-center rounded-full bg-zinc-700 text-xs text-blue-400">
-          {reminder.length}
+    <div
+      className={cn(
+        "flex h-80 w-52 overflow-hidden relative flex-col rounded-3xl border border-border bg-card font-sans shadow-md",
+        className,
+      )}
+    >
+      <div className="flex p-4 pb-2 shrink-0 items-center justify-between gap-2">
+        <div className="flex min-w-0 items-center gap-2">
+          <Bell className="size-[15px] shrink-0 text-sky-500" strokeWidth={2} aria-hidden />
+          <p className="truncate text-[15px] font-semibold leading-snug text-foreground">{title}</p>
         </div>
+        <span className="flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-muted px-1.5 text-[13px] font-medium tabular-nums leading-none text-muted-foreground">
+          {remaining}
+        </span>
       </div>
-      <div className="mt-1 overflow-hidden">
-        {reminders.map((data) => (
-          <div
-            key={`item-${data}`}
-            onClick={() => handleCheckboxChange(data)}
-            className="flex cursor-pointer items-center gap-3 border-b border-gray-700 py-1"
-          >
-            <input
-              type="checkbox"
-              checked={!reminder.includes(data)}
-              className="h-3 w-3 appearance-none rounded-full border-2 border-gray-700 checked:bg-blue-500"
-            />
-            <p className="bg-transparent text-xs font-semibold capitalize text-white">{data}</p>
-          </div>
+
+      <ul className="px-4 pb-4 flex min-h-0 flex-1 flex-col overflow-y-auto">
+        {rows.map((item) => (
+          <li key={item.id} className="border-b border-border last:border-b-0">
+            <button
+              type="button"
+              role="checkbox"
+              aria-checked={item.done ?? false}
+              onClick={() => toggle(item.id)}
+              className="touch-manipulation flex min-h-11 w-full items-center gap-3 py-2 text-left"
+            >
+              <span
+                className={cn(
+                  "flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+                  item.done
+                    ? "border-sky-500 bg-sky-500"
+                    : "border-muted-foreground/40 bg-transparent",
+                )}
+                aria-hidden
+              >
+                {item.done ? (
+                  <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+                    <path
+                      d="M8.2 2.5L4.1 7.5 1.8 5.2"
+                      stroke="white"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                ) : null}
+              </span>
+              <span
+                className={cn(
+                  "min-w-0 flex-1 text-[15px] leading-snug capitalize",
+                  item.done ? "text-muted-foreground line-through" : "font-medium text-foreground",
+                )}
+              >
+                {item.label}
+              </span>
+            </button>
+          </li>
         ))}
-      </div>
+      </ul>
     </div>
   );
 }
diff --git a/animata/widget/reminder.stories.tsx b/animata/widget/reminder.stories.tsx
index 0ed49a24..a1308e30 100644
--- a/animata/widget/reminder.stories.tsx
+++ b/animata/widget/reminder.stories.tsx
@@ -4,18 +4,33 @@ import Reminder from "@/animata/widget/reminder";
 const meta = {
   title: "Widget/Reminder",
   component: Reminder,
-  parameters: {
-    layout: "centered",
-  },
+  parameters: { layout: "centered" },
   tags: ["autodocs"],
-  argTypes: {},
 } satisfies Meta<typeof Reminder>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
+export const StandupIn30: Story = {
+  name: "Standup in 30",
+  args: {
+    title: "Today",
+    buckets: [
+      { label: "Work", count: 2, className: "bg-violet-200 dark:bg-violet-500/35" },
+      { label: "Personal", count: 1, className: "bg-emerald-200 dark:bg-emerald-500/35" },
+    ],
+    nextLabel: "Engineering standup in 30 min",
+  },
+};
+
+export const WeekendErrands: Story = {
+  name: "Weekend errands",
   args: {
-    className: "",
+    title: "Saturday",
+    buckets: [
+      { label: "Home", count: 4, className: "bg-emerald-200 dark:bg-emerald-500/35" },
+      { label: "Shop", count: 2, className: "bg-amber-200 dark:bg-amber-500/35" },
+    ],
+    nextLabel: "Grocery pickup at 2:00 PM",
   },
 };
diff --git a/animata/widget/reminder.tsx b/animata/widget/reminder.tsx
index f64b64f8..1f30b410 100644
--- a/animata/widget/reminder.tsx
+++ b/animata/widget/reminder.tsx
@@ -2,28 +2,65 @@ import { ArrowRight } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-export default function Reminder({ className }: { className?: string }) {
+export type ReminderBucket = {
+  label: string;
+  count: number;
+  /** Tailwind classes for the bucket chip (e.g. `bg-violet-200 dark:bg-violet-500/35`). */
+  className?: string;
+};
+
+export type ReminderProps = {
+  className?: string;
+  title?: string;
+  buckets?: ReminderBucket[];
+  /** Next commitment — the primary glance line. */
+  nextLabel?: string;
+};
+
+const DEFAULT_BUCKETS: ReminderBucket[] = [
+  { label: "Work", count: 2, className: "bg-violet-200 dark:bg-violet-500/35" },
+  { label: "Home", count: 3, className: "bg-emerald-200 dark:bg-emerald-500/35" },
+];
+
+export default function Reminder({
+  className,
+  title = "Today",
+  buckets = DEFAULT_BUCKETS,
+  nextLabel = "Meeting in 30 min",
+}: ReminderProps) {
   return (
     <div
       className={cn(
-        "relative flex size-52 flex-col justify-between rounded-3xl border bg-background p-4 shadow-md dark:border-zinc-700",
+        "flex size-52 flex-col justify-between rounded-3xl border border-border bg-background p-4 shadow-md",
         className,
       )}
     >
-      <p className="text-center text-lg font-semibold text-foreground">Reminder</p>
+      <p className="text-center text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        {title}
+      </p>
 
-      <div className="flex items-center justify-between gap-x-3 p-2">
-        <div className="flex flex-1 flex-col items-center justify-center rounded-lg bg-purple-200 p-4 text-3xl font-semibold dark:bg-purple-400">
-          2<p className="border-t border-background pt-2 text-center text-base font-normal">Work</p>
-        </div>
-        <div className="flex flex-1 flex-col items-center justify-center rounded-lg bg-green-200 p-4 text-3xl font-semibold dark:bg-green-400">
-          3<p className="border-t border-background pt-2 text-center text-base font-normal">Home</p>
-        </div>
+      <div className="flex items-stretch justify-between gap-2">
+        {buckets.slice(0, 2).map((bucket) => (
+          <div
+            key={bucket.label}
+            className={cn(
+              "flex min-w-0 flex-1 flex-col items-center justify-center gap-1 rounded-xl px-2 py-3",
+              bucket.className,
+            )}
+          >
+            <span className="text-2xl font-semibold tabular-nums leading-none text-foreground">
+              {bucket.count}
+            </span>
+            <span className="w-full border-t border-border/60 pt-1.5 text-center text-xs font-medium text-muted-foreground">
+              {bucket.label}
+            </span>
+          </div>
+        ))}
       </div>
 
-      <div className="flex flex-row gap-1 text-muted-foreground">
-        <ArrowRight size={18} className="self-center" />
-        <p className="text-sm font-semibold">Meeting in 30 mins</p>
+      <div className="flex items-start gap-1.5 text-foreground">
+        <ArrowRight size={16} className="mt-0.5 shrink-0 text-muted-foreground" aria-hidden />
+        <p className="line-clamp-2 text-sm font-medium leading-snug">{nextLabel}</p>
       </div>
     </div>
   );
diff --git a/animata/widget/score-board.stories.tsx b/animata/widget/score-board.stories.tsx
index bd26b6b8..d9d076b4 100644
--- a/animata/widget/score-board.stories.tsx
+++ b/animata/widget/score-board.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import ScoreBoard, { testScoreBoardProps } from "@/animata/widget/score-board";
+import ScoreBoard from "@/animata/widget/score-board";
 
 const meta = {
   title: "Widget/Score Board",
@@ -15,5 +15,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
-  args: testScoreBoardProps,
+  args: {},
 };
diff --git a/animata/widget/score-board.tsx b/animata/widget/score-board.tsx
index 5143373d..25c27fe5 100644
--- a/animata/widget/score-board.tsx
+++ b/animata/widget/score-board.tsx
@@ -1,87 +1,74 @@
 import BarChart from "@/animata/graphs/bar-chart";
 
-interface ScoreBoardProps {
-  items: {
-    progress: number;
-    label: string;
-    className?: string;
-    containerClassName?: string;
-  }[];
-}
+import { cn } from "@/lib/utils";
+
+export type ScoreBoardItem = {
+  progress: number;
+  label: string;
+  className?: string;
+  containerClassName?: string;
+};
 
-export const testScoreBoardProps: ScoreBoardProps = {
-  items: [
-    {
-      label: "A",
-      progress: 34,
-      className: "rounded-md bg-green-500",
-    },
-    {
-      label: "B",
-      progress: 14,
-      className: "rounded-md bg-red-500",
-    },
-    {
-      label: "C",
-      progress: 34,
-      className: "rounded-md bg-green-500",
-    },
-    {
-      label: "D",
-      progress: 70,
-      className: "rounded-md bg-green-500",
-    },
-    {
-      label: "E",
-      progress: 52,
-      className: "rounded-md bg-green-500",
-    },
-    {
-      label: "F",
-      progress: 30,
-      className: "rounded-md bg-green-500",
-    },
-    {
-      label: "G",
-      progress: 37,
-      className: "rounded-md bg-green-500",
-    },
-    {
-      label: "H",
-      progress: 72,
-      className: "rounded-md bg-green-500",
-    },
-    {
-      label: "I",
-      progress: 42,
-      className: "rounded-md bg-green-500",
-    },
-  ],
+export type ScoreBoardProps = {
+  className?: string;
+  items?: ScoreBoardItem[];
+  statusLabel?: string;
+  statusTone?: "good" | "warning" | "neutral";
+  overallPercent?: number;
+  overallCaption?: string;
 };
 
+const DEFAULT_ITEMS: ScoreBoardItem[] = [
+  { label: "A", progress: 34, className: "rounded-md bg-green-500" },
+  { label: "B", progress: 14, className: "rounded-md bg-red-500" },
+  { label: "C", progress: 34, className: "rounded-md bg-green-500" },
+  { label: "D", progress: 70, className: "rounded-md bg-green-500" },
+  { label: "E", progress: 52, className: "rounded-md bg-green-500" },
+  { label: "F", progress: 30, className: "rounded-md bg-green-500" },
+  { label: "G", progress: 37, className: "rounded-md bg-green-500" },
+  { label: "H", progress: 72, className: "rounded-md bg-green-500" },
+  { label: "I", progress: 42, className: "rounded-md bg-green-500" },
+];
+
+const STATUS_TONE_CLASS = {
+  good: "text-emerald-600 dark:text-emerald-400",
+  warning: "text-amber-600 dark:text-amber-400",
+  neutral: "text-foreground",
+} as const;
+
 export default function ScoreBoard({
-  items = testScoreBoardProps.items,
-}: {
-  items: {
-    progress: number;
-    label: string;
-    className?: string;
-    containerClassName?: string;
-  }[];
-}) {
+  className,
+  items = DEFAULT_ITEMS,
+  statusLabel = "Good",
+  statusTone = "good",
+  overallPercent = 80,
+  overallCaption = "score, progress",
+}: ScoreBoardProps) {
   return (
-    <div className="group/board flex size-52 flex-col rounded-3xl border bg-background p-4 shadow-sm shadow-black/15 transition-shadow duration-700 dark:border-zinc-700">
-      <p className="text-base text-foreground">
-        Status:
-        <span className="font-semibold text-green-700 dark:text-green-500"> Good </span>
+    <div
+      className={cn(
+        "flex size-52 flex-col rounded-3xl border border-border bg-background p-4 font-sans shadow-md",
+        className,
+      )}
+    >
+      <p className="shrink-0 text-[15px] font-semibold leading-none text-foreground">
+        Status{" "}
+        <span className={cn("font-semibold", STATUS_TONE_CLASS[statusTone])}>{statusLabel}</span>
       </p>
-      <div className="w-full flex-1">
+
+      <div className="mt-2 min-h-0 w-full flex-1">
         <BarChart height={90} items={items} />
       </div>
-      <h5 className="mt-4 text-sm text-muted-foreground">Overall Progress</h5>
-      <p className="font-semibold text-foreground">
-        80% <span className="text-sm text-muted-foreground">(score, progress)</span>
-      </p>
+
+      <div className="mt-3 shrink-0">
+        <p className="text-[13px] leading-none text-muted-foreground">Overall progress</p>
+        <p className="mt-1 text-[22px] font-normal leading-none tabular-nums tracking-tight text-foreground">
+          {overallPercent}%
+          <span className="ml-1 text-[13px] font-normal text-muted-foreground">
+            ({overallCaption})
+          </span>
+        </p>
+      </div>
     </div>
   );
 }
diff --git a/animata/widget/security-alert.tsx b/animata/widget/security-alert.tsx
index d078fa16..2dfd6008 100644
--- a/animata/widget/security-alert.tsx
+++ b/animata/widget/security-alert.tsx
@@ -1,27 +1,57 @@
 import { TriangleAlert } from "lucide-react";
 
-const SecurityAlert = () => {
-  const riskValue = "139 532",
-    time = "30m",
-    numberOfIssue = 2;
+import { cn } from "@/lib/utils";
 
+export type SecurityAlertProps = {
+  className?: string;
+  title?: string;
+  riskValue?: string;
+  timeAgo?: string;
+  scanLabel?: string;
+  issueCount?: number;
+};
+
+export default function SecurityAlert({
+  className,
+  title = "Security at risk",
+  riskValue = "139,532",
+  timeAgo = "30m",
+  scanLabel = "Quick scan",
+  issueCount = 2,
+}: SecurityAlertProps) {
   return (
-    <div className="flex size-52 flex-col items-center gap-1 overflow-hidden rounded-3xl bg-black">
-      <div className="h-5 w-full bg-striped" />
-      <div className="flex h-full flex-col gap-1 px-4 pb-4">
-        <div className="mt-1 px-4 text-lg text-gray-300">Security is at Risk</div>
-        <div className="w-full text-center text-2xl font-bold text-white">{riskValue}</div>
-        <div className="my-1 flex w-full flex-1 items-center justify-center gap-2">
-          <div className="text-sm text-gray-400">{time} ago</div>
-          <div className="rounded-lg bg-zinc-600 px-2 py-1 text-sm text-gray-300">Quick scan</div>
+    <div
+      className={cn(
+        "flex size-52 flex-col overflow-hidden rounded-3xl bg-zinc-950 font-sans shadow-md",
+        className,
+      )}
+    >
+      <div className="h-1.5 w-full shrink-0 bg-striped" aria-hidden />
+
+      <div className="flex min-h-0 flex-1 flex-col p-4">
+        <p className="text-[15px] font-semibold leading-snug text-zinc-300">{title}</p>
+
+        <p className="mt-2 text-[22px] font-normal leading-none tabular-nums tracking-tight text-white">
+          {riskValue}
+        </p>
+
+        <div className="mt-3 flex items-center gap-2">
+          <p className="text-[13px] leading-none text-zinc-500">{timeAgo} ago</p>
+          <button
+            type="button"
+            className="touch-manipulation rounded-lg bg-zinc-800 px-2.5 py-1.5 text-[13px] font-medium leading-none text-zinc-200"
+          >
+            {scanLabel}
+          </button>
         </div>
-        <div className="mt-auto flex animate-blink-red items-center justify-center gap-2 rounded-2xl border-2 border-red-500 px-10 py-2 font-bold">
-          <TriangleAlert className="fill-red-500 stroke-red-800" />
-          <div className="text-red-500">{numberOfIssue} Items</div>
+
+        <div className="mt-auto flex min-h-11 animate-blink-red items-center justify-center gap-2 rounded-2xl border-2 border-red-500/90 px-4 py-2">
+          <TriangleAlert className="size-4 fill-red-500 stroke-red-900" aria-hidden />
+          <span className="text-[15px] font-medium leading-none text-red-500">
+            {issueCount} {issueCount === 1 ? "item" : "items"}
+          </span>
         </div>
       </div>
     </div>
   );
-};
-
-export default SecurityAlert;
+}
diff --git a/animata/widget/shopping-list.stories.tsx b/animata/widget/shopping-list.stories.tsx
index 2d3a8a05..1dfd1b88 100644
--- a/animata/widget/shopping-list.stories.tsx
+++ b/animata/widget/shopping-list.stories.tsx
@@ -4,18 +4,18 @@ import ShoppingList from "@/animata/widget/shopping-list";
 const meta = {
   title: "Widget/Shopping List",
   component: ShoppingList,
-  parameters: {
-    layout: "centered",
-  },
+  parameters: { layout: "centered" },
   tags: ["autodocs"],
-  argTypes: {},
 } satisfies Meta<typeof ShoppingList>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
+export const GroceryRun: Story = {
+  name: "Grocery run",
   args: {
     title: "Shopping list",
   },
 };
+
+export const Primary = GroceryRun;
diff --git a/animata/widget/shopping-list.tsx b/animata/widget/shopping-list.tsx
index 98750270..654f5781 100644
--- a/animata/widget/shopping-list.tsx
+++ b/animata/widget/shopping-list.tsx
@@ -1,73 +1,107 @@
+"use client";
+
+import { useState } from "react";
+
 import { cn } from "@/lib/utils";
 
-function Checkbox({ title, checked }: { title: string; checked?: boolean }) {
+export type ShoppingListItem = {
+  id: string;
+  title: string;
+  checked?: boolean;
+};
+
+export type ShoppingListProps = {
+  className?: string;
+  title?: string;
+  items?: ShoppingListItem[];
+};
+
+const DEFAULT_ITEMS: ShoppingListItem[] = [
+  { id: "milk", title: "Milk" },
+  { id: "eggs", title: "Eggs", checked: true },
+  { id: "pepper", title: "Ground pepper", checked: true },
+  { id: "spaghetti", title: "Spaghetti" },
+  { id: "butter", title: "Butter" },
+];
+
+function CheckIcon({ className }: { className?: string }) {
   return (
-    <div className="flex items-center">
-      <div
-        className={cn("rounded-md border-2 border-gray-300 text-white", {
-          "border-black bg-black": checked,
-        })}
-      >
-        <svg
-          width="15"
-          height="15"
-          viewBox="0 0 15 15"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
-            fill={checked ? "currentColor" : "none"}
-            fillRule="evenodd"
-            clipRule="evenodd"
-          />
-        </svg>
-      </div>
-      <div className="ms-2 text-sm text-gray-900">{title}</div>
-    </div>
+    <svg
+      className={className}
+      width="14"
+      height="14"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </svg>
   );
 }
 
-const list = [
-  {
-    title: "Milk",
-  },
-  {
-    title: "Eggs",
-    checked: true,
-  },
-  {
-    title: "Ground Pepper",
-    checked: true,
-  },
-  {
-    title: "Spaghetti",
-  },
-  {
-    title: "Butter",
-  },
-];
-
 export default function ShoppingList({
-  data = list,
-  title,
-}: {
-  title?: string;
-  data?: {
-    title: string;
-    checked?: boolean;
-  }[];
-}) {
+  className,
+  title = "Shopping list",
+  items = DEFAULT_ITEMS,
+}: ShoppingListProps) {
+  const [rows, setRows] = useState(items);
+
+  const toggle = (id: string) => {
+    setRows((prev) =>
+      prev.map((item) => (item.id === id ? { ...item, checked: !item.checked } : item)),
+    );
+  };
+
   return (
-    <div className="h-64 w-48 rounded-3xl border bg-white p-4 font-sans shadow-sm">
-      <div className="text-lg font-bold tracking-wide text-zinc-950">
-        {title || "Shopping list"}
-      </div>
-      <div className="mt-4 flex flex-col gap-4 text-sm">
-        {data.map((item, index) => (
-          <Checkbox key={index} title={item.title} checked={item.checked} />
+    <div
+      className={cn(
+        "flex h-64 w-48 flex-col relative overflow-hidden rounded-3xl border border-border bg-background font-sans shadow-md",
+        className,
+      )}
+    >
+      <p className="shrink-0 p-4 pb-2 text-[15px] font-semibold leading-snug text-foreground">
+        {title}
+      </p>
+
+      <ul className="px-4 pb-4 flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto">
+        {rows.map((item) => (
+          <li key={item.id}>
+            <button
+              type="button"
+              role="checkbox"
+              aria-checked={item.checked ?? false}
+              onClick={() => toggle(item.id)}
+              className="touch-manipulation flex min-h-11 w-full items-center gap-2.5 rounded-md py-0.5 text-left"
+            >
+              <span
+                className={cn(
+                  "flex size-5 shrink-0 items-center justify-center rounded-md border-2 transition-colors",
+                  item.checked
+                    ? "border-foreground bg-foreground text-background"
+                    : "border-muted-foreground/35 bg-transparent text-transparent",
+                )}
+                aria-hidden
+              >
+                <CheckIcon />
+              </span>
+              <span
+                className={cn(
+                  "min-w-0 flex-1 text-[15px] leading-snug",
+                  item.checked ? "text-muted-foreground line-through" : "text-foreground",
+                )}
+              >
+                {item.title}
+              </span>
+            </button>
+          </li>
         ))}
-      </div>
+      </ul>
     </div>
   );
 }
diff --git a/animata/widget/study-timer.stories.tsx b/animata/widget/study-timer.stories.tsx
index ec2dc5cc..6e6300c0 100644
--- a/animata/widget/study-timer.stories.tsx
+++ b/animata/widget/study-timer.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import StudyTimer, { testStudyTimerProps } from "@/animata/widget/study-timer";
+import StudyTimer from "@/animata/widget/study-timer";
 
 const meta = {
   title: "Widget/Study Timer",
@@ -16,5 +16,5 @@ export default meta;
 type Story = StoryObj<typeof StudyTimer>;
 
 export const Primary: Story = {
-  args: testStudyTimerProps,
+  args: {},
 };
diff --git a/animata/widget/study-timer.tsx b/animata/widget/study-timer.tsx
index e5bc57f4..a6169fa0 100644
--- a/animata/widget/study-timer.tsx
+++ b/animata/widget/study-timer.tsx
@@ -1,95 +1,98 @@
 import { GraduationCap, XCircle } from "lucide-react";
-import type React from "react";
 
 import { cn } from "@/lib/utils";
 
-export interface StudyTimerProps {
-  segments: Segment[];
-}
-
-interface Segment {
+export type StudyTimerSegment = {
   value: number;
   color: string;
-}
+};
 
-export const testStudyTimerProps: StudyTimerProps = {
-  segments: [
-    { value: 57, color: "orange" },
-    { value: 24, color: "pink" },
-    { value: 26, color: "yellow" },
-  ],
+export type StudyTimerProps = {
+  className?: string;
+  segments?: StudyTimerSegment[];
+  /** Shown in the focus badge (e.g. pomodoro count). */
+  sessionCount?: number;
 };
 
+const DEFAULT_SEGMENTS: StudyTimerSegment[] = [
+  { value: 57, color: "rgb(251 146 60)" },
+  { value: 24, color: "rgb(244 114 182)" },
+  { value: 26, color: "rgb(250 204 21)" },
+];
+
 const formatTime = (totalMinutes: number) => {
   const hours = Math.floor(totalMinutes / 60);
   const minutes = totalMinutes % 60;
-  const seconds = (totalMinutes * 60) % 60;
-
-  const formattedHours = hours.toString().padStart(2, "0");
-  const formattedMinutes = minutes.toString().padStart(2, "0");
-  const formattedSeconds = seconds.toString().padStart(2, "0");
-
-  return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
+  return [hours, minutes].map((n) => String(n).padStart(2, "0")).join(":");
 };
 
-const StudyTimer: React.FC<StudyTimerProps> = ({ segments = testStudyTimerProps.segments }) => {
+function SegmentBar({ segment, totalSum }: { segment: StudyTimerSegment; totalSum: number }) {
+  const widthPercent = totalSum > 0 ? (segment.value / totalSum) * 100 : 0;
+  return (
+    <div
+      className="h-full rounded-sm"
+      style={{ width: `${widthPercent}%`, backgroundColor: segment.color }}
+    />
+  );
+}
+
+export default function StudyTimer({
+  className,
+  segments = DEFAULT_SEGMENTS,
+  sessionCount = 21,
+}: StudyTimerProps) {
   const totalMinutes = segments.reduce((acc, segment) => acc + segment.value, 0);
   const time = formatTime(totalMinutes);
 
   return (
-    <div className="relative flex size-52 flex-col gap-1 rounded-3xl bg-zinc-900 p-4 text-white shadow-lg">
-      <div className="flex items-center justify-between p-2">
+    <div
+      className={cn(
+        "flex size-52 flex-col rounded-3xl bg-zinc-900 p-4 font-sans text-white shadow-md",
+        className,
+      )}
+    >
+      <div className="flex shrink-0 items-start justify-between">
         <button
+          type="button"
           className={cn(
-            "relative flex items-center justify-center px-4 py-2",
-            "duration-1000 before:absolute before:inset-0 before:animate-pulse before:rounded-3xl before:border-2 before:border-sky-600",
+            "relative flex min-h-9 min-w-9 items-center justify-center rounded-full",
+            "before:absolute before:inset-0 before:animate-pulse before:rounded-full before:border-2 before:border-sky-500/80",
           )}
+          aria-label="Study session"
         >
-          <GraduationCap size={18} className="text-white" />
+          <GraduationCap className="relative z-10 size-[18px]" strokeWidth={2} aria-hidden />
         </button>
-        <div className="flex cursor-pointer items-center justify-center space-x-0.5 rounded-full bg-yellow-600 px-2 py-1 font-bold text-black">
-          <XCircle size={10} className="fill-black text-yellow-600" />
-          <span className="text-xs font-bold">21</span>
+        <div className="inline-flex items-center gap-1 rounded-full bg-amber-400 px-2 py-1">
+          <XCircle className="size-3 fill-zinc-900 text-amber-400" aria-hidden />
+          <span className="text-[13px] font-medium tabular-nums leading-none text-zinc-900">
+            {sessionCount}
+          </span>
         </div>
       </div>
-      <div className="mt-2 p-2">
-        <div className="text-xl font-bold tracking-wider">{time}</div>
-        <div className="flex justify-start space-x-2 overflow-x-auto text-sm">
+
+      <div className="mt-3 shrink-0">
+        <p className="text-[22px] font-normal leading-none tabular-nums tracking-tight">{time}</p>
+        <div className="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-[13px] font-medium leading-none">
           {segments.map((segment, index) => (
             <span
               key={index}
-              className="flex items-center justify-center gap-2"
+              className="inline-flex items-center gap-2"
               style={{ color: segment.color }}
             >
-              {segment.value}m
-              {index !== segments.length - 1 && (
-                <div className="h-1 w-1 rounded-full border-2 border-gray-600 bg-gray-600" />
-              )}
+              <span className="tabular-nums">{segment.value}m</span>
+              {index !== segments.length - 1 ? (
+                <span className="size-1 rounded-full bg-zinc-600" aria-hidden />
+              ) : null}
             </span>
           ))}
         </div>
       </div>
-      <div className="flex flex-1 space-x-0.5">
+
+      <div className="mt-3 flex min-h-0 flex-1 gap-0.5">
         {segments.map((segment, index) => (
           <SegmentBar key={index} segment={segment} totalSum={totalMinutes} />
         ))}
       </div>
     </div>
   );
-};
-
-const SegmentBar: React.FC<{ segment: Segment; totalSum: number }> = ({ segment, totalSum }) => {
-  const widthPercent = (segment.value / totalSum) * 100;
-
-  return (
-    <div
-      className="h-full rounded-b-sm rounded-t-sm"
-      style={{
-        width: `${widthPercent}%`,
-        backgroundColor: segment.color,
-      }}
-    />
-  );
-};
-
-export default StudyTimer;
+}
diff --git a/animata/widget/vpn-widget.stories.tsx b/animata/widget/vpn-widget.stories.tsx
index 538065de..02913a39 100644
--- a/animata/widget/vpn-widget.stories.tsx
+++ b/animata/widget/vpn-widget.stories.tsx
@@ -1,39 +1,32 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import VpnWidget from "@/animata/widget/vpn-widget";
+import VpnConnection from "@/animata/widget/vpn-widget";
 
-const meta: Meta<typeof VpnWidget> = {
-  title: "Widget/Vpn Widget",
-  component: VpnWidget,
-  parameters: {
-    layout: "centered",
-  },
+const meta = {
+  title: "Widget/VPN Connection",
+  component: VpnConnection,
+  parameters: { layout: "centered" },
   tags: ["autodocs"],
-  argTypes: {
-    userName: { control: "text" },
-    latency: { control: "text" },
-    netSpeed: { control: "text" },
-    className: { control: "text" },
-  },
-};
+} satisfies Meta<typeof VpnConnection>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
+export const Connected: Story = {
+  name: "Connected",
   args: {
-    userName: "Animata",
-    latency: "5ms",
-    netSpeed: "10",
-    defaultConnected: false,
+    serverName: "Tokyo",
+    latency: "48 ms",
+    downloadMbps: "112.3",
+    defaultConnected: true,
   },
 };
 
-export const VpnWidgetStory: Story = {
+export const Disconnected: Story = {
+  name: "Disconnected",
   args: {
-    userName: "Animata",
-    latency: "5ms",
-    netSpeed: "15.75",
-    className: "",
-    defaultConnected: true,
+    serverName: "Frankfurt",
+    latency: "—",
+    downloadMbps: "0",
+    defaultConnected: false,
   },
 };
diff --git a/animata/widget/vpn-widget.tsx b/animata/widget/vpn-widget.tsx
index 0cf7ee7e..6b569e5a 100644
--- a/animata/widget/vpn-widget.tsx
+++ b/animata/widget/vpn-widget.tsx
@@ -1,106 +1,118 @@
 "use client";
+
 import { FlagIcon, ShieldBan, ShieldCheck } from "lucide-react";
 import { useState } from "react";
 
 import { cn } from "@/lib/utils";
 
-interface SlidingButtonProps {
-  initialConnected?: boolean;
+type SlidingButtonProps = {
+  connected: boolean;
+  onConnectedChange: (connected: boolean) => void;
   className?: string;
-}
-
-interface VpnConnectionProps {
-  userName?: string;
-  latency?: string;
-  netSpeed?: string;
-  className?: string;
-  defaultConnected?: boolean;
-}
-
-function SlidingButton({ initialConnected = false, className }: SlidingButtonProps) {
-  const [connected, setConnected] = useState(initialConnected);
+};
 
+function SlidingButton({ connected, onConnectedChange, className }: SlidingButtonProps) {
   return (
-    <div
+    <button
+      type="button"
+      role="switch"
+      aria-checked={connected}
       className={cn(
-        "relative flex w-full cursor-pointer items-center justify-between overflow-hidden rounded-2xl bg-gray-200/75 transition-colors",
+        "touch-manipulation relative flex min-h-11 w-full items-center justify-between overflow-hidden rounded-2xl bg-muted transition-colors",
         className,
       )}
-      onClick={() => setConnected(!connected)}
+      onClick={() => onConnectedChange(!connected)}
     >
-      <div className="flex h-12 w-8 items-center justify-center">
-        <div
-          className={cn("h-3 w-3 rounded-full bg-red-500 transition-opacity", {
-            "opacity-0 duration-300": connected,
+      <span className="flex h-11 w-8 items-center justify-center" aria-hidden>
+        <span
+          className={cn("size-2.5 rounded-full bg-red-500 transition-opacity", {
+            "opacity-0": connected,
             "opacity-100": !connected,
           })}
         />
-      </div>
-      <div
+      </span>
+      <span
         className={cn(
-          "absolute z-10 flex h-11 w-36 flex-1 flex-col items-center justify-center rounded-[14px] bg-white py-2 transition-colors duration-200 ease-in-out hover:bg-gray-50/95 active:bg-gray-50/70",
-          {
-            "left-0.5": connected,
-            "left-[34px]": !connected,
-          },
+          "absolute z-10 flex h-10 w-[8.75rem] flex-col items-center justify-center rounded-[14px] bg-background py-1 shadow-sm transition-[left] duration-200 ease-out",
+          connected ? "left-0.5" : "left-[34px]",
         )}
       >
-        <strong className="select-none text-sm text-black">
+        <span className="text-sm font-semibold text-foreground">
           {connected ? "Connected" : "Disconnected"}
-        </strong>
+        </span>
         <span
-          className={cn("-mt-1 inline-flex select-none items-center gap-1 text-xs font-semibold", {
-            "text-blue-700/50": connected,
-            "text-red-700/50": !connected,
+          className={cn("inline-flex items-center gap-1 text-xs font-medium", {
+            "text-sky-700 dark:text-sky-400": connected,
+            "text-red-700 dark:text-red-400": !connected,
           })}
         >
-          {connected ? <ShieldCheck size={12} /> : <ShieldBan size={12} />}
-          {connected ? "Secured" : "Not Secured"}
+          {connected ? <ShieldCheck size={12} aria-hidden /> : <ShieldBan size={12} aria-hidden />}
+          {connected ? "Secured" : "Not secured"}
         </span>
-      </div>
-      <div className="flex h-12 w-8 items-center justify-center">
-        <div
-          className={cn("h-3 w-3 rounded-full bg-green-500 transition-opacity", {
-            "opacity-0 duration-300": !connected,
-            "opacity-100 group-hover/vpn:animate-pulse": connected,
+      </span>
+      <span className="flex h-11 w-8 items-center justify-center" aria-hidden>
+        <span
+          className={cn("size-2.5 rounded-full bg-emerald-500 transition-opacity", {
+            "opacity-0": !connected,
+            "opacity-100": connected,
           })}
         />
-      </div>
-    </div>
+      </span>
+    </button>
   );
 }
 
+export type VpnConnectionProps = {
+  className?: string;
+  serverName?: string;
+  latency?: string;
+  downloadMbps?: string;
+  defaultConnected?: boolean;
+  connected?: boolean;
+  onConnectedChange?: (connected: boolean) => void;
+};
+
 export default function VpnConnection({
-  userName = "Animata",
-  latency = "53ms",
-  netSpeed = "57.4",
   className,
+  serverName = "Tokyo",
+  latency = "53 ms",
+  downloadMbps = "57.4",
   defaultConnected = false,
+  connected: controlledConnected,
+  onConnectedChange,
 }: VpnConnectionProps) {
+  const [internalConnected, setInternalConnected] = useState(defaultConnected);
+  const connected = controlledConnected ?? internalConnected;
+
+  const setConnected = (next: boolean) => {
+    if (controlledConnected === undefined) {
+      setInternalConnected(next);
+    }
+    onConnectedChange?.(next);
+  };
+
   return (
     <div className={className}>
-      <div className={cn("group/vpn flex size-52 flex-col rounded-3xl bg-blue-900 p-0.5")}>
-        <div className="flex items-center gap-2 px-4 pb-2 pt-4">
-          <FlagIcon size={24} className="fill-yellow-500 text-yellow-500" />
-          <h3 className={cn("text-xl font-semibold tracking-wide text-yellow-500")}>{userName}</h3>
+      <div className="flex size-52 flex-col rounded-3xl border border-sky-900/30 bg-sky-950 p-0.5 shadow-md">
+        <div className="flex items-center gap-2 px-3 pb-1.5 pt-3">
+          <FlagIcon className="size-5 fill-amber-400 text-amber-400" aria-hidden />
+          <p className="truncate text-sm font-semibold tracking-tight text-amber-400">
+            {serverName}
+          </p>
         </div>
-        <div
-          className={cn("group/vpn flex w-full flex-1 flex-col gap-1 rounded-[22px] bg-white p-3")}
-        >
-          <div
-            className={cn(
-              "inline-flex max-w-fit items-center justify-center gap-1 rounded-xl bg-green-100 px-2 text-sm font-semibold",
-            )}
-          >
-            <div className="animate-sl h-2 w-2 animate-pulse rounded-full bg-green-500" />
-            <h6 className="text-green-600">{latency}</h6>
+        <div className="flex min-h-0 flex-1 flex-col gap-2 rounded-[22px] bg-background p-3">
+          <div className="inline-flex max-w-fit items-center gap-1.5 rounded-lg bg-emerald-500/15 px-2 py-0.5">
+            <span className="size-2 animate-pulse rounded-full bg-emerald-500" aria-hidden />
+            <span className="text-xs font-medium tabular-nums text-emerald-700 dark:text-emerald-400">
+              {latency}
+            </span>
           </div>
-          <h2 className={cn("mt-2 text-4xl font-semibold text-zinc-900")}>
-            {netSpeed}
-            <sup className={cn("font-bold tracking-tighter text-gray-700/50")}>mb</sup>
-          </h2>
+          <p className="text-3xl font-semibold tabular-nums tracking-tight text-foreground">
+            {downloadMbps}
+            <span className="ml-0.5 text-sm font-medium text-muted-foreground">Mbps</span>
+          </p>
           <div className="mt-auto">
-            <SlidingButton initialConnected={defaultConnected} />
+            <SlidingButton connected={connected} onConnectedChange={setConnected} />
           </div>
         </div>
       </div>
diff --git a/animata/widget/water-tracker.stories.tsx b/animata/widget/water-tracker.stories.tsx
index a9e6789b..5b3c0514 100644
--- a/animata/widget/water-tracker.stories.tsx
+++ b/animata/widget/water-tracker.stories.tsx
@@ -4,18 +4,27 @@ import WaterTracker from "@/animata/widget/water-tracker";
 const meta = {
   title: "Widget/Water Tracker",
   component: WaterTracker,
-  parameters: {
-    layout: "centered",
-  },
+  parameters: { layout: "centered" },
   tags: ["autodocs"],
-  argTypes: {},
 } satisfies Meta<typeof WaterTracker>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
+export const MorningStart: Story = {
+  name: "Morning start",
+  args: {
+    dailyGoal: 2000,
+    defaultIntake: 500,
+    sipMl: 250,
+  },
+};
+
+export const AfternoonCatchUp: Story = {
+  name: "Afternoon catch-up",
   args: {
-    dailyGoal: 3000,
+    dailyGoal: 2500,
+    defaultIntake: 1400,
+    sipMl: 300,
   },
 };
diff --git a/animata/widget/water-tracker.tsx b/animata/widget/water-tracker.tsx
index 764b89fe..ced8ee74 100644
--- a/animata/widget/water-tracker.tsx
+++ b/animata/widget/water-tracker.tsx
@@ -1,72 +1,84 @@
 "use client";
+
 import { Droplet } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import { cn } from "@/lib/utils";
 
-interface WaterTrackerProps {
-  dailyGoal: number;
-}
-
-export default function WaterTracker({ dailyGoal = 5000 }: WaterTrackerProps) {
-  const [waterIntake, setWaterIntake] = useState(0);
+export type WaterTrackerProps = {
+  className?: string;
+  dailyGoal?: number;
+  sipMl?: number;
+  defaultIntake?: number;
+  intake?: number;
+  onIntakeChange?: (ml: number) => void;
+};
 
-  useEffect(() => {
-    setWaterIntake(1500);
-  }, []);
+export default function WaterTracker({
+  className,
+  dailyGoal = 2000,
+  sipMl = 250,
+  defaultIntake = 750,
+  intake: controlledIntake,
+  onIntakeChange,
+}: WaterTrackerProps) {
+  const [internalIntake, setInternalIntake] = useState(defaultIntake);
+  const intake = controlledIntake ?? internalIntake;
+  const atGoal = intake >= dailyGoal;
+  const progress = Math.min(100, (intake / dailyGoal) * 100);
 
-  const handleAddWater = () => {
-    setWaterIntake((prevIntake) => {
-      if (prevIntake + 250 <= dailyGoal) {
-        return prevIntake + 250;
-      }
-      return prevIntake;
-    });
+  const addWater = () => {
+    if (atGoal) return;
+    const next = Math.min(dailyGoal, intake + sipMl);
+    if (controlledIntake === undefined) {
+      setInternalIntake(next);
+    }
+    onIntakeChange?.(next);
   };
 
-  const progress = (waterIntake / dailyGoal) * 100;
-
   return (
-    <div className={cn("group relative flex size-52 rounded-3xl bg-gray-800")}>
-      <div className="flex flex-1 flex-col p-4">
-        <div className="flex items-center justify-center gap-1">
-          <Droplet className="fill-blue-500 text-blue-500" size={22} />
-          <p className="text-sm font-semibold text-white">Water</p>
+    <div
+      className={cn(
+        "relative flex size-52 overflow-hidden rounded-3xl border border-border bg-card font-sans shadow-md",
+        className,
+      )}
+    >
+      <div className="flex min-w-0 flex-1 flex-col p-4">
+        <div className="flex shrink-0 items-center gap-1.5">
+          <Droplet className="size-[15px] fill-sky-500 text-sky-500" aria-hidden />
+          <p className="text-[15px] font-semibold leading-none text-foreground">Water</p>
         </div>
-        <div className="flex flex-1 flex-col items-center justify-center">
-          <h1 className="text-xl font-bold text-white">{waterIntake}ml</h1>
-          <p className="font-sans text-xs text-gray-400">Today</p>
-        </div>
-        <div className="mb-2 flex justify-center">
-          <button
-            onClick={handleAddWater}
-            disabled={waterIntake >= dailyGoal}
-            className={cn(
-              "transform rounded-full bg-linear-to-r px-6 py-2 text-sm font-semibold text-white",
-              {
-                "cursor-not-allowed from-gray-600 to-gray-500 opacity-80": waterIntake >= dailyGoal,
-                "from-blue-500 to-blue-700 transition-transform hover:scale-105 hover:shadow-lg":
-                  waterIntake < dailyGoal,
-              },
-            )}
-          >
-            +250 ml
-          </button>
+
+        <div className="mt-3 flex flex-col gap-1">
+          <p className="text-[22px] font-normal leading-none tabular-nums tracking-tight text-foreground">
+            {intake.toLocaleString()}
+            <span className="text-[13px] font-medium text-muted-foreground"> ml</span>
+          </p>
+          <p className="text-[13px] leading-none text-muted-foreground">
+            of {dailyGoal.toLocaleString()} ml today
+          </p>
         </div>
+
+        <button
+          type="button"
+          onClick={addWater}
+          disabled={atGoal}
+          className={cn(
+            "touch-manipulation mt-auto min-h-11 w-full rounded-full text-[15px] font-medium leading-none transition-transform",
+            atGoal
+              ? "cursor-not-allowed bg-muted text-muted-foreground"
+              : "bg-sky-600 text-white hover:scale-[1.02] active:scale-[0.98]",
+          )}
+        >
+          +{sipMl} ml
+        </button>
       </div>
 
-      <div className="relative flex w-10 flex-col items-end">
-        <div className="absolute bottom-0 right-0 h-full w-10 overflow-hidden rounded-r-3xl border-l-2 border-gray-700 bg-gray-800">
-          <div
-            className={
-              "absolute bottom-0 right-0 w-full bg-linear-to-t from-blue-500 to-blue-700 transition-all duration-100 ease-out"
-            }
-            style={{
-              height: `${progress}%`,
-              "--progress-height": `${progress}%`,
-            }}
-          ></div>
-        </div>
+      <div className="relative w-10 shrink-0 border-l border-border bg-muted/30" aria-hidden>
+        <div
+          className="absolute inset-x-0 bottom-0 bg-linear-to-t from-sky-600 to-sky-400 transition-[height] duration-300 ease-out"
+          style={{ height: `${progress}%` }}
+        />
       </div>
     </div>
   );
diff --git a/animata/widget/weather-card.stories.tsx b/animata/widget/weather-card.stories.tsx
index 81736c33..fdb6c530 100644
--- a/animata/widget/weather-card.stories.tsx
+++ b/animata/widget/weather-card.stories.tsx
@@ -4,16 +4,31 @@ import WeatherCard from "@/animata/widget/weather-card";
 const meta = {
   title: "Widget/Weather Card",
   component: WeatherCard,
-  parameters: {
-    layout: "centered",
-  },
+  parameters: { layout: "centered" },
   tags: ["autodocs"],
-  argTypes: {},
 } satisfies Meta<typeof WeatherCard>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
-  args: {},
+export const TokyoMorning: Story = {
+  name: "Tokyo morning",
+  args: {
+    city: "Tokyo",
+    temperature: 19,
+    feelsLike: 21,
+    high: 24,
+    low: 9,
+  },
+};
+
+export const NycRain: Story = {
+  name: "NYC rain",
+  args: {
+    city: "New York",
+    temperature: 12,
+    feelsLike: 10,
+    high: 14,
+    low: 8,
+  },
 };
diff --git a/animata/widget/weather-card.tsx b/animata/widget/weather-card.tsx
index 0d92e82d..2d991904 100644
--- a/animata/widget/weather-card.tsx
+++ b/animata/widget/weather-card.tsx
@@ -1,25 +1,58 @@
 import { CircleArrowUp, CloudSunRain } from "lucide-react";
 
-export default function WeatherCard() {
+import { cn } from "@/lib/utils";
+
+export type WeatherCardProps = {
+  className?: string;
+  city?: string;
+  temperature?: number;
+  feelsLike?: number;
+  high?: number;
+  low?: number;
+};
+
+export default function WeatherCard({
+  className,
+  city = "Tokyo",
+  temperature = 19,
+  feelsLike = 21,
+  high = 24,
+  low = 9,
+}: WeatherCardProps) {
   return (
-    <div className="relative flex size-52 flex-col rounded-3xl bg-linear-to-r from-gray-200 to-gray-300 bg-clip-padding p-4 backdrop-blur-sm backdrop-filter dark:from-gray-700 dark:to-gray-900">
-      <div className="flex flex-1 flex-col gap-2 dark:text-white">
-        <p className="city opacity-70">Tokyo</p>
-        <div className="flex items-center">
-          <CloudSunRain className="h-10 w-10" />
-          <p className="text-5xl font-black">19&deg;</p>
+    <div
+      className={cn(
+        "flex size-52 flex-col rounded-3xl border border-border bg-linear-to-br from-muted/80 to-muted p-4 font-sans shadow-md",
+        className,
+      )}
+    >
+      <div className="flex min-h-0 flex-1 flex-col justify-start gap-2">
+        <p className="text-[15px] font-semibold leading-none text-foreground">{city}</p>
+        <div className="flex items-start gap-2">
+          <CloudSunRain
+            className="mt-1 size-8 shrink-0 text-foreground/75"
+            strokeWidth={1.75}
+            aria-hidden
+          />
+          <p className="text-[34px] font-normal leading-none tabular-nums tracking-tight text-foreground">
+            {temperature}&deg;
+          </p>
         </div>
-        <p className="feels-like opacity-70">Feels like 21&deg;</p>
+        <p className="text-[13px] leading-none text-muted-foreground">
+          Feels like <span className="tabular-nums">{feelsLike}&deg;</span>
+        </p>
       </div>
-      <div className="flex justify-between rounded-xl bg-gray-400/30 bg-clip-padding py-1 backdrop-blur-lg backdrop-filter">
-        <div className="flex items-center gap-1 px-2 text-orange-500 dark:text-orange-200">
-          <CircleArrowUp className="h-5 w-5" />
-          24&deg;
+      <div className="flex shrink-0 justify-between rounded-xl border border-border/60 bg-background/50 px-2.5 py-2 text-[13px] font-medium tabular-nums leading-none backdrop-blur-sm">
+        <div className="flex items-center gap-1 text-orange-600 dark:text-orange-300">
+          <CircleArrowUp className="size-3.5" strokeWidth={2} aria-hidden />
+          {high}&deg;
         </div>
-        <p className="text-black opacity-50">|</p>
-        <div className="flex items-center gap-1 px-3 text-green-800 dark:text-green-200">
-          <CircleArrowUp className="h-5 w-5 rotate-180" />
-          9&deg;
+        <span className="text-border/80" aria-hidden>
+          |
+        </span>
+        <div className="flex items-center gap-1 text-sky-700 dark:text-sky-300">
+          <CircleArrowUp className="size-3.5 rotate-180" strokeWidth={2} aria-hidden />
+          {low}&deg;
         </div>
       </div>
     </div>
diff --git a/animata/widget/weekly-progress.tsx b/animata/widget/weekly-progress.tsx
index dd67cb8f..4c1911fe 100644
--- a/animata/widget/weekly-progress.tsx
+++ b/animata/widget/weekly-progress.tsx
@@ -2,44 +2,71 @@ import { BookOpen } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-export default function WeeklyProgress() {
-  const days = ["M", "T", "W", "TH", "F", "S", "SU"];
+export type WeeklyProgressProps = {
+  className?: string;
+  author?: string;
+  title?: string;
+  percent?: number;
+};
+
+const DAYS = ["M", "T", "W", "TH", "F", "S", "SU"] as const;
+
+export default function WeeklyProgress({
+  className,
+  author = "Chris Dixon",
+  title = "Read Write Own",
+  percent = 30,
+}: WeeklyProgressProps) {
   return (
-    <div className={cn("group size-52 rounded-3xl bg-amber-100 p-4")}>
-      <div>
-        <p className="text-sm font-semibold text-gray-500">Chris Dixon</p>
-        <p className="text-lg font-bold text-black">Read Write Own</p>
+    <div
+      className={cn(
+        "flex size-52 flex-col rounded-3xl border border-border bg-amber-50 p-4 font-sans shadow-md dark:bg-amber-950/40",
+        className,
+      )}
+    >
+      <div className="shrink-0">
+        <p className="text-[13px] leading-none text-muted-foreground">{author}</p>
+        <p className="mt-1 text-[15px] font-semibold leading-snug text-foreground">{title}</p>
       </div>
-      <div className="mt-1 inline-flex items-center justify-around gap-2 rounded-full border-2 border-gray-300 px-2 py-1">
-        <BookOpen size={20} fill="orange" color="orange" className="top-4" />
-        <p className="text-sm font-bold text-black">30%</p>
+
+      <div className="mt-2 inline-flex w-fit items-center gap-2 rounded-full border border-border bg-background/60 px-2.5 py-1.5">
+        <BookOpen
+          className="size-4 text-amber-600 dark:text-amber-400"
+          strokeWidth={2}
+          aria-hidden
+        />
+        <p className="text-[13px] font-medium tabular-nums leading-none text-foreground">
+          {percent}%
+        </p>
       </div>
-      <div className="mt-2 flex flex-wrap justify-center">
-        {days.map((day, index) => (
+
+      <div className="mt-2 flex flex-wrap justify-start gap-0.5">
+        {DAYS.map((day, index) => (
           <svg
-            key={index}
-            width="42"
-            height="42"
+            key={day}
+            width="40"
+            height="40"
             viewBox="-25 -25 250 250"
-            version="1.1"
             xmlns="http://www.w3.org/2000/svg"
+            className="shrink-0"
             style={{ transform: "rotate(-90deg)" }}
+            aria-hidden
           >
             <circle
               r="90"
               cx="100"
               cy="100"
               fill="transparent"
-              stroke="#e0e0e0"
+              className="stroke-border"
               strokeWidth="16px"
               strokeDasharray="565.48px"
               strokeDashoffset="0"
-            ></circle>
+            />
             <circle
               r="90"
               cx="100"
               cy="100"
-              stroke="#ff8040"
+              className="stroke-amber-500"
               strokeWidth="16px"
               strokeLinecap="round"
               fill="transparent"
@@ -55,10 +82,9 @@ export default function WeeklyProgress() {
               />
             </circle>
             <text
-              className="text-6xl font-bold"
+              className="fill-foreground text-[56px] font-medium"
               x="100px"
               y="105px"
-              fill="black"
               dominantBaseline="middle"
               textAnchor="middle"
               style={{ transform: "rotate(90deg) translate(0px, -196px)" }}
diff --git a/app/(main)/_landing/stats-bento.tsx b/app/(main)/_landing/stats-bento.tsx
index 43efdf23..b391ade6 100644
--- a/app/(main)/_landing/stats-bento.tsx
+++ b/app/(main)/_landing/stats-bento.tsx
@@ -16,8 +16,6 @@ import { docsConfig } from "@/config/docs";
 import { siteStats } from "@/config/site-stats";
 import { cn } from "@/lib/utils";
 
-import { CardStackBento } from "./card-stack-bento";
-
 // Get component categories from the sidebar nav (skip Getting Started + Contributing)
 const categories = docsConfig.sidebarNav
   .filter((item) => item.title !== "Getting Started" && item.title !== "Contributing")
@@ -231,20 +229,22 @@ export default function StatsBento() {
                 </span>
               </div>
               {/* Category marquees */}
-              <div className="-mx-4 mt-3 mb-2 space-y-0.5 sm:-mx-5 sm:mb-0 lg:-mx-6">
+              <div
+                className="-mx-4 mt-3 mb-2 space-y-0.5 sm:-mx-5 sm:mb-0 lg:-mx-6"
+                aria-hidden="true"
+              >
                 <Marquee
                   pauseOnHover
                   applyMask={false}
                   className="[--duration:50s] [--gap:0.15rem]"
                 >
                   {categories.map((cat, i) => (
-                    <Link
+                    <div
                       key={`fwd-${i}`}
-                      href={cat.href}
-                      className="rounded-full border border-border bg-foreground/5 px-2 py-0.5 text-[10px] font-semibold text-foreground transition-colors hover:border-foreground/30 sm:px-2.5 sm:py-1 sm:text-[11px]"
+                      className="rounded-full border border-border bg-foreground/5 px-2 py-0.5 text-[10px] font-semibold text-foreground transition-colors sm:px-2.5 sm:py-1 sm:text-[11px]"
                     >
                       {cat.label}
-                    </Link>
+                    </div>
                   ))}
                 </Marquee>
                 <Marquee
@@ -254,13 +254,12 @@ export default function StatsBento() {
                   className="[--duration:55s] [--gap:0.15rem]"
                 >
                   {[...categories].reverse().map((cat, i) => (
-                    <Link
+                    <div
                       key={`rev-${i}`}
-                      href={cat.href}
-                      className="rounded-full border border-border bg-foreground/5 px-2 py-0.5 text-[10px] font-semibold text-foreground transition-colors hover:border-foreground/30 sm:px-2.5 sm:py-1 sm:text-[11px]"
+                      className="rounded-full border border-border bg-foreground/5 px-2 py-0.5 text-[10px] font-semibold text-foreground transition-colors sm:px-2.5 sm:py-1 sm:text-[11px]"
                     >
                       {cat.label}
-                    </Link>
+                    </div>
                   ))}
                 </Marquee>
               </div>
@@ -302,12 +301,6 @@ export default function StatsBento() {
           </BentoCard>
         </div>
 
-        <div className="mt-3 sm:mt-4">
-          <BentoCard className="min-h-[22rem] sm:min-h-[24rem]">
-            <CardStackBento />
-          </BentoCard>
-        </div>
-
         {/* Built with care — full width */}
         <div className="mt-3 sm:mt-4">
           <BentoCard className="">
diff --git a/app/demo/demo-experience.tsx b/app/demo/demo-experience.tsx
index 2cf71024..2955b0cf 100644
--- a/app/demo/demo-experience.tsx
+++ b/app/demo/demo-experience.tsx
@@ -1,7 +1,9 @@
 "use client";
 
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
 import {
+  CheckIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
   LayoutGridIcon,
@@ -21,7 +23,6 @@ import { Icons } from "@/components/icons";
 import {
   CommandEmpty,
   CommandGroup,
-  CommandInput,
   CommandItem,
   CommandList,
   Command as CommandRoot,
@@ -554,69 +555,76 @@ function DemoPicker({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogPortal>
-        <DialogOverlay className="bg-black/50 backdrop-blur-[3px] sm:bg-black/45" />
+        <DialogOverlay className="bg-black/50 backdrop-blur-[2px] sm:bg-black/40" />
         <DialogPrimitive.Content
           style={{ "--demo-accent": accentColor } as CSSProperties}
           aria-describedby={undefined}
           className={cn(
-            "demo-picker-shell fixed z-50 grid w-full gap-0 overflow-hidden border border-white/12 bg-[#141414]/96 text-white shadow-[0_28px_90px_-28px_rgb(0_0_0_/_0.88)] backdrop-blur-2xl outline-none",
-            "inset-x-0 bottom-0 top-auto max-h-[min(88svh,680px)] translate-x-0 translate-y-0 rounded-t-[28px] border-b-0",
+            "demo-picker-shell fixed z-50 flex w-full flex-col overflow-hidden border border-white/10 bg-[#141414] text-white shadow-[0_24px_80px_-32px_rgb(0_0_0_/_0.9)] outline-none",
+            "inset-x-0 bottom-0 top-auto max-h-[min(88svh,640px)] translate-x-0 translate-y-0 rounded-t-[20px] border-b-0",
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-bottom-4",
             "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-4",
-            "sm:inset-x-auto sm:bottom-auto sm:top-[50%] sm:left-[50%] sm:max-w-[min(92vw,28rem)] sm:translate-x-[-50%] sm:translate-y-[-50%] sm:rounded-[24px] sm:border-b",
+            "sm:inset-x-auto sm:bottom-auto sm:top-[50%] sm:left-[50%] sm:max-w-[min(92vw,24rem)] sm:translate-x-[-50%] sm:translate-y-[-50%] sm:rounded-[18px] sm:border-b",
             "sm:data-[state=closed]:slide-out-to-bottom-0 sm:data-[state=closed]:zoom-out-95 sm:data-[state=open]:slide-in-from-bottom-0 sm:data-[state=open]:zoom-in-95",
           )}
         >
           <div className="sm:hidden">
-            <div aria-hidden="true" className="mx-auto mt-2.5 h-1 w-10 rounded-full bg-white/18" />
+            <div aria-hidden="true" className="mx-auto mt-2 h-1 w-9 rounded-full bg-white/15" />
           </div>
 
-          <div className="flex items-start justify-between gap-3 border-b border-white/8 px-4 pb-3 pt-3 sm:pt-4">
-            <div className="min-w-0">
-              <DialogPrimitive.Title className="text-[15px] font-medium tracking-[-0.02em] text-white">
-                Browse demos
-              </DialogPrimitive.Title>
-              <DialogPrimitive.Description className="mt-0.5 text-[12px] text-white/45">
-                {DEMO_ITEMS.length} live {DEMO_ITEMS.length === 1 ? "experience" : "experiences"}
-              </DialogPrimitive.Description>
-            </div>
+          <div className="flex items-center justify-between gap-3 px-4 pb-3 pt-3.5 sm:pt-4">
+            <DialogPrimitive.Title className="text-[15px] font-medium tracking-[-0.01em] text-white">
+              Browse demos
+            </DialogPrimitive.Title>
+            <DialogPrimitive.Description className="sr-only">
+              Search and switch between live demo pages.
+            </DialogPrimitive.Description>
             <button
               type="button"
               aria-label="Close demo picker"
               onClick={() => onOpenChange(false)}
-              className="grid size-9 shrink-0 touch-manipulation place-items-center rounded-full text-white/55 transition-colors hover:bg-white/10 hover:text-white"
+              className="-mr-1 grid size-8 shrink-0 touch-manipulation place-items-center rounded-full text-white/45 transition-colors hover:bg-white/8 hover:text-white/75"
             >
               <XIcon aria-hidden="true" className="size-4" />
             </button>
           </div>
 
-          <CommandRoot className="bg-transparent">
-            <div className="px-3 pt-3">
-              <div className="demo-picker-search flex items-center gap-2 rounded-2xl border border-white/8 bg-white/[0.04] px-3">
-                <SearchIcon aria-hidden="true" className="size-4 shrink-0 text-white/35" />
-                <CommandInput
-                  placeholder="Search by name or category…"
-                  className="h-11 border-0 bg-transparent px-0 text-[15px] text-white placeholder:text-white/35 focus:ring-0"
-                />
-              </div>
+          <CommandRoot className="flex min-h-0 w-full flex-col bg-transparent">
+            <div
+              cmdk-input-wrapper=""
+              className="flex h-11 w-full shrink-0 items-center gap-2.5 border-y border-white/8 px-4"
+            >
+              <SearchIcon aria-hidden="true" className="size-4 shrink-0 text-white/30" />
+              <CommandPrimitive.Input
+                placeholder="Search demos…"
+                className="min-w-0 flex-1 bg-transparent text-[15px] text-white outline-none placeholder:text-white/35"
+              />
             </div>
 
-            <CommandList className="demo-picker-list max-h-[min(52svh,420px)] px-2 pb-2 pt-2">
-              <CommandEmpty className="rounded-2xl bg-white/[0.03] py-10 text-sm text-white/45">
-                No demos match that search.
+            <CommandList className="demo-picker-list max-h-[min(52svh,400px)] px-1.5 py-1 pb-3">
+              <CommandEmpty className="px-4 py-10 text-[14px] text-white/45">
+                Nothing matched that search.
               </CommandEmpty>
-              {DEMO_GROUPS.map((group) => (
+              {DEMO_GROUPS.map((group, groupIndex) => (
                 <CommandGroup
                   key={group.slug}
-                  heading={`${group.label} · ${group.items.length}`}
-                  className="pb-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:tracking-[0.12em] [&_[cmdk-group-heading]]:text-white/40"
+                  heading={group.label}
+                  className="demo-picker-group p-0 [&:not(:last-child)]:pb-4 [&_[cmdk-group-heading]]:sr-only [&_[cmdk-item]:not(:last-child)]:mb-1"
                 >
+                  <div
+                    aria-hidden="true"
+                    className={cn(
+                      "px-3 pb-1.5 text-[12px] font-medium text-white/38",
+                      groupIndex === 0 ? "pt-2.5" : "pt-3",
+                    )}
+                  >
+                    {group.label}
+                  </div>
                   {group.items.map((rawItem) => {
                     const flatIndex = getItemIndex(group.slug, rawItem.slug);
                     const entry = DEMO_ITEMS[flatIndex];
                     const isActive =
                       entry.slug === activeItem.slug && entry.group.slug === activeGroup.slug;
-                    const itemAccent = demoThemeColor(entry, group);
 
                     return (
                       <CommandItem
@@ -626,33 +634,18 @@ function DemoPicker({
                         onFocus={() => onPrefetch(entry)}
                         onSelect={() => onSelect(entry)}
                         className={cn(
-                          "demo-picker-item mx-0.5 cursor-pointer rounded-2xl px-3 py-2.5 aria-selected:bg-white/[0.07] data-[selected=true]:bg-white/[0.07]",
-                          isActive && "demo-picker-item-live bg-white/[0.05]",
+                          "demo-picker-item mx-0.5 cursor-pointer rounded-lg px-3 py-2.5 aria-selected:bg-white/[0.07] data-[selected=true]:bg-white/[0.07]",
+                          isActive && "demo-picker-item-live bg-white/[0.04]",
                         )}
-                        style={
-                          isActive ? ({ "--item-accent": itemAccent } as CSSProperties) : undefined
-                        }
                       >
-                        <span
-                          aria-hidden="true"
-                          className={cn(
-                            "mt-1.5 size-1.5 shrink-0 rounded-full bg-white/20",
-                            isActive &&
-                              "bg-[var(--item-accent)] shadow-[0_0_10px_color-mix(in_srgb,var(--item-accent)_70%,transparent)]",
-                          )}
-                        />
-                        <span className="min-w-0 flex-1">
-                          <span className="block truncate text-[13px] font-medium tracking-[-0.015em] text-white/92">
-                            {entry.label}
-                          </span>
-                          <span className="mt-0.5 block truncate text-[12px] leading-snug text-white/42">
-                            {group.phrase}
-                          </span>
+                        <span className="min-w-0 flex-1 truncate text-[14px] text-white/88">
+                          {entry.label}
                         </span>
                         {isActive ? (
-                          <span className="shrink-0 self-center rounded-full border border-white/10 bg-white/[0.06] px-2 py-0.5 text-[10px] font-medium text-white/72">
-                            live
-                          </span>
+                          <CheckIcon
+                            aria-hidden="true"
+                            className="size-3.5 shrink-0 text-white/45"
+                          />
                         ) : null}
                       </CommandItem>
                     );
@@ -661,15 +654,6 @@ function DemoPicker({
               ))}
             </CommandList>
           </CommandRoot>
-
-          <div className="border-t border-white/8 px-4 py-2.5">
-            <p className="text-center font-mono text-[10px] leading-relaxed text-white/35 sm:hidden">
-              Swipe screen edges · tap grid to browse
-            </p>
-            <p className="hidden text-center font-mono text-[10px] leading-relaxed text-white/35 sm:block">
-              H home · ← → cycle · . picker · R refresh · F fullscreen
-            </p>
-          </div>
         </DialogPrimitive.Content>
       </DialogPortal>
     </Dialog>
@@ -980,24 +964,8 @@ function DemoShellStyles() {
         isolation: isolate;
       }
 
-      .demo-picker-shell::before {
-        content: "";
-        pointer-events: none;
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        background:
-          linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent 22%),
-          radial-gradient(circle at 50% 0%, rgb(255 255 255 / 0.06), transparent 42%);
-      }
-
-      .demo-picker-search [cmdk-input-wrapper] {
-        border: 0;
-        padding: 0;
-      }
-
-      .demo-picker-search [cmdk-input-wrapper] svg {
-        display: none;
+      .demo-picker-group + .demo-picker-group {
+        border-top: 1px solid rgb(255 255 255 / 0.05);
       }
 
       .demo-picker-list {
@@ -1016,14 +984,10 @@ function DemoShellStyles() {
 
       .demo-picker-item {
         display: flex;
-        align-items: flex-start;
+        align-items: center;
         gap: 0.625rem;
       }
 
-      .demo-picker-item-live {
-        box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
-      }
-
       .demo-chrome-pill {
         min-height: 2.75rem;
       }
diff --git a/app/demo/generated/demo-sources.ts b/app/demo/generated/demo-sources.ts
index 7beb294d..d84fc855 100644
--- a/app/demo/generated/demo-sources.ts
+++ b/app/demo/generated/demo-sources.ts
@@ -642,17 +642,11 @@ export default function LaunchShift() {
               Superhuman
             </span>
 
-            <h1 className="mt-4 max-w-[16ch] text-balance text-[clamp(2.35rem,6.8vw,3.75rem)] font-semibold tracking-[-0.045em]">
-              <span
-                style={{ textBoxTrim: "trim-both" }}
-                className="block bg-linear-to-b leading-none from-white via-[#F5F5F3] to-[#A8A8A6] bg-clip-text text-transparent"
-              >
+            <h1 className="mt-5 max-w-[16ch] text-balance text-[clamp(2.35rem,6.8vw,3.75rem)] font-semibold leading-[1.05] tracking-[-0.045em]">
+              <span className="block bg-linear-to-b from-white via-[#F5F5F3] to-[#A8A8A6] bg-clip-text text-transparent">
                 Superpowers,
               </span>
-              <span
-                style={{ textBoxTrim: "trim-both" }}
-                className="-mt-5 block bg-linear-to-b leading-none from-white via-[#F5F5F3] to-[#A8A8A6] bg-clip-text text-transparent"
-              >
+              <span className="mt-1 block bg-linear-to-b from-white via-[#F5F5F3] to-[#A8A8A6] bg-clip-text text-transparent sm:mt-0 sm:-mt-3 md:-mt-4">
                 everywhere you work.
               </span>
             </h1>
@@ -753,17 +747,11 @@ export default function LaunchShift() {
 <span class="line"><span style="color:#24292E">              Superhuman</span></span>
 <span class="line"><span style="color:#24292E">            &#x3C;/</span><span style="color:#22863A">span</span><span style="color:#24292E">></span></span>
 <span class="line"></span>
-<span class="line"><span style="color:#24292E">            &#x3C;</span><span style="color:#22863A">h1</span><span style="color:#6F42C1"> className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"mt-4 max-w-[16ch] text-balance text-[clamp(2.35rem,6.8vw,3.75rem)] font-semibold tracking-[-0.045em]"</span><span style="color:#24292E">></span></span>
-<span class="line"><span style="color:#24292E">              &#x3C;</span><span style="color:#22863A">span</span></span>
-<span class="line"><span style="color:#6F42C1">                style</span><span style="color:#D73A49">=</span><span style="color:#24292E">{{ textBoxTrim: </span><span style="color:#032F62">"trim-both"</span><span style="color:#24292E"> }}</span></span>
-<span class="line"><span style="color:#6F42C1">                className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"block bg-linear-to-b leading-none from-white via-[#F5F5F3] to-[#A8A8A6] bg-clip-text text-transparent"</span></span>
-<span class="line"><span style="color:#24292E">              ></span></span>
+<span class="line"><span style="color:#24292E">            &#x3C;</span><span style="color:#22863A">h1</span><span style="color:#6F42C1"> className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"mt-5 max-w-[16ch] text-balance text-[clamp(2.35rem,6.8vw,3.75rem)] font-semibold leading-[1.05] tracking-[-0.045em]"</span><span style="color:#24292E">></span></span>
+<span class="line"><span style="color:#24292E">              &#x3C;</span><span style="color:#22863A">span</span><span style="color:#6F42C1"> className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"block bg-linear-to-b from-white via-[#F5F5F3] to-[#A8A8A6] bg-clip-text text-transparent"</span><span style="color:#24292E">></span></span>
 <span class="line"><span style="color:#24292E">                Superpowers,</span></span>
 <span class="line"><span style="color:#24292E">              &#x3C;/</span><span style="color:#22863A">span</span><span style="color:#24292E">></span></span>
-<span class="line"><span style="color:#24292E">              &#x3C;</span><span style="color:#22863A">span</span></span>
-<span class="line"><span style="color:#6F42C1">                style</span><span style="color:#D73A49">=</span><span style="color:#24292E">{{ textBoxTrim: </span><span style="color:#032F62">"trim-both"</span><span style="color:#24292E"> }}</span></span>
-<span class="line"><span style="color:#6F42C1">                className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"-mt-5 block bg-linear-to-b leading-none from-white via-[#F5F5F3] to-[#A8A8A6] bg-clip-text text-transparent"</span></span>
-<span class="line"><span style="color:#24292E">              ></span></span>
+<span class="line"><span style="color:#24292E">              &#x3C;</span><span style="color:#22863A">span</span><span style="color:#6F42C1"> className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"mt-1 block bg-linear-to-b from-white via-[#F5F5F3] to-[#A8A8A6] bg-clip-text text-transparent sm:mt-0 sm:-mt-3 md:-mt-4"</span><span style="color:#24292E">></span></span>
 <span class="line"><span style="color:#24292E">                everywhere you work.</span></span>
 <span class="line"><span style="color:#24292E">              &#x3C;/</span><span style="color:#22863A">span</span><span style="color:#24292E">></span></span>
 <span class="line"><span style="color:#24292E">            &#x3C;/</span><span style="color:#22863A">h1</span><span style="color:#24292E">></span></span>
@@ -864,17 +852,11 @@ export default function LaunchShift() {
 <span class="line"><span style="color:#E1E4E8">              Superhuman</span></span>
 <span class="line"><span style="color:#E1E4E8">            &#x3C;/</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">></span></span>
 <span class="line"></span>
-<span class="line"><span style="color:#E1E4E8">            &#x3C;</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"mt-4 max-w-[16ch] text-balance text-[clamp(2.35rem,6.8vw,3.75rem)] font-semibold tracking-[-0.045em]"</span><span style="color:#E1E4E8">></span></span>
-<span class="line"><span style="color:#E1E4E8">              &#x3C;</span><span style="color:#85E89D">span</span></span>
-<span class="line"><span style="color:#B392F0">                style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{ textBoxTrim: </span><span style="color:#9ECBFF">"trim-both"</span><span style="color:#E1E4E8"> }}</span></span>
-<span class="line"><span style="color:#B392F0">                className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"block bg-linear-to-b leading-none from-white via-[#F5F5F3] to-[#A8A8A6] bg-clip-text text-transparent"</span></span>
-<span class="line"><span style="color:#E1E4E8">              ></span></span>
+<span class="line"><span style="color:#E1E4E8">            &#x3C;</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"mt-5 max-w-[16ch] text-balance text-[clamp(2.35rem,6.8vw,3.75rem)] font-semibold leading-[1.05] tracking-[-0.045em]"</span><span style="color:#E1E4E8">></span></span>
+<span class="line"><span style="color:#E1E4E8">              &#x3C;</span><span style="color:#85E89D">span</span><span style="color:#B392F0"> className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"block bg-linear-to-b from-white via-[#F5F5F3] to-[#A8A8A6] bg-clip-text text-transparent"</span><span style="color:#E1E4E8">></span></span>
 <span class="line"><span style="color:#E1E4E8">                Superpowers,</span></span>
 <span class="line"><span style="color:#E1E4E8">              &#x3C;/</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">></span></span>
-<span class="line"><span style="color:#E1E4E8">              &#x3C;</span><span style="color:#85E89D">span</span></span>
-<span class="line"><span style="color:#B392F0">                style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{ textBoxTrim: </span><span style="color:#9ECBFF">"trim-both"</span><span style="color:#E1E4E8"> }}</span></span>
-<span class="line"><span style="color:#B392F0">                className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"-mt-5 block bg-linear-to-b leading-none from-white via-[#F5F5F3] to-[#A8A8A6] bg-clip-text text-transparent"</span></span>
-<span class="line"><span style="color:#E1E4E8">              ></span></span>
+<span class="line"><span style="color:#E1E4E8">              &#x3C;</span><span style="color:#85E89D">span</span><span style="color:#B392F0"> className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"mt-1 block bg-linear-to-b from-white via-[#F5F5F3] to-[#A8A8A6] bg-clip-text text-transparent sm:mt-0 sm:-mt-3 md:-mt-4"</span><span style="color:#E1E4E8">></span></span>
 <span class="line"><span style="color:#E1E4E8">                everywhere you work.</span></span>
 <span class="line"><span style="color:#E1E4E8">              &#x3C;/</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">></span></span>
 <span class="line"><span style="color:#E1E4E8">            &#x3C;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">></span></span>
@@ -2811,7 +2793,7 @@ function PrintStack() {
     <CardStack.Frame className="absolute inset-0 overflow-visible">
       <CardStack.LiveRegion />
       <CardStack.Trigger aria-label="Show next photo" className="absolute inset-0 block text-left">
-        <CardStack.Viewport className="size-full overflow-visible !min-h-0 !pt-0">
+        <CardStack.Viewport className="absolute inset-0 overflow-visible !min-h-0 pt-[14%] sm:pt-0">
           <CardStack.List>
             {(item, index, layer) => (
               <CardStack.Card
@@ -2820,7 +2802,7 @@ function PrintStack() {
                 stackIndex={index}
                 className="!inset-x-0 !top-0 !h-fit !w-full gap-0 overflow-visible rounded-none !bg-transparent p-0 shadow-none ring-0"
               >
-                <figure className="relative aspect-[4/5] size-full overflow-hidden bg-black/5">
+                <figure className="relative aspect-[4/5] w-full overflow-hidden bg-black/5">
                   <img
                     src={item.image}
                     alt={\`\${PHOTOGRAPHER.studio} — \${item.title}\`}
@@ -2861,8 +2843,12 @@ function PrintProof({
         </div>
 
         <div aria-hidden="true" className={cn("w-full shrink-0", STACK_PEEK)} />
-        <div className="relative aspect-[4/5] w-full shrink-0 overflow-visible">
-          <PrintStack />
+        <div className="relative w-full shrink-0">
+          <div className="relative w-full overflow-visible pb-[125%] sm:aspect-[4/5] sm:pb-0">
+            <div className="absolute inset-0 overflow-visible">
+              <PrintStack />
+            </div>
+          </div>
         </div>
       </div>
     </figure>
@@ -2888,7 +2874,7 @@ function PortfolioLayout({
         </div>
       </div>
 
-      <div className="w-full min-w-0 md:flex md:min-h-0 md:flex-[3] md:basis-0 md:flex-col md:justify-end md:@container/print md:[container-type:size]">
+      <div className="w-full min-w-0 shrink-0 md:flex md:min-h-0 md:flex-[3] md:basis-0 md:flex-col md:justify-end md:@container/print md:[container-type:size]">
         <PrintProof stackRef={stackRef} captionRef={captionRef} />
       </div>
     </div>
@@ -2904,7 +2890,7 @@ export default function PhotographerPortfolio() {
   return (
     <>
       <section
-        className="relative isolate min-h-svh overflow-x-hidden overflow-y-auto md:h-svh md:overflow-hidden"
+        className="relative isolate min-h-svh overflow-x-hidden md:h-svh md:overflow-hidden"
         style={{ backgroundColor: CANVAS, color: INK, fontFamily: FONT }}
       >
         <TrailingImage
@@ -3205,7 +3191,7 @@ export default function PhotographerPortfolio() {
 <span class="line"><span style="color:#24292E">    &#x3C;</span><span style="color:#005CC5">CardStack.Frame</span><span style="color:#6F42C1"> className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"absolute inset-0 overflow-visible"</span><span style="color:#24292E">></span></span>
 <span class="line"><span style="color:#24292E">      &#x3C;</span><span style="color:#005CC5">CardStack.LiveRegion</span><span style="color:#24292E"> /></span></span>
 <span class="line"><span style="color:#24292E">      &#x3C;</span><span style="color:#005CC5">CardStack.Trigger</span><span style="color:#6F42C1"> aria-label</span><span style="color:#D73A49">=</span><span style="color:#032F62">"Show next photo"</span><span style="color:#6F42C1"> className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"absolute inset-0 block text-left"</span><span style="color:#24292E">></span></span>
-<span class="line"><span style="color:#24292E">        &#x3C;</span><span style="color:#005CC5">CardStack.Viewport</span><span style="color:#6F42C1"> className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"size-full overflow-visible !min-h-0 !pt-0"</span><span style="color:#24292E">></span></span>
+<span class="line"><span style="color:#24292E">        &#x3C;</span><span style="color:#005CC5">CardStack.Viewport</span><span style="color:#6F42C1"> className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"absolute inset-0 overflow-visible !min-h-0 pt-[14%] sm:pt-0"</span><span style="color:#24292E">></span></span>
 <span class="line"><span style="color:#24292E">          &#x3C;</span><span style="color:#005CC5">CardStack.List</span><span style="color:#24292E">></span></span>
 <span class="line"><span style="color:#24292E">            {(</span><span style="color:#E36209">item</span><span style="color:#24292E">, </span><span style="color:#E36209">index</span><span style="color:#24292E">, </span><span style="color:#E36209">layer</span><span style="color:#24292E">) </span><span style="color:#D73A49">=></span><span style="color:#24292E"> (</span></span>
 <span class="line"><span style="color:#24292E">              &#x3C;</span><span style="color:#005CC5">CardStack.Card</span></span>
@@ -3214,7 +3200,7 @@ export default function PhotographerPortfolio() {
 <span class="line"><span style="color:#6F42C1">                stackIndex</span><span style="color:#D73A49">=</span><span style="color:#24292E">{index}</span></span>
 <span class="line"><span style="color:#6F42C1">                className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"!inset-x-0 !top-0 !h-fit !w-full gap-0 overflow-visible rounded-none !bg-transparent p-0 shadow-none ring-0"</span></span>
 <span class="line"><span style="color:#24292E">              ></span></span>
-<span class="line"><span style="color:#24292E">                &#x3C;</span><span style="color:#22863A">figure</span><span style="color:#6F42C1"> className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"relative aspect-[4/5] size-full overflow-hidden bg-black/5"</span><span style="color:#24292E">></span></span>
+<span class="line"><span style="color:#24292E">                &#x3C;</span><span style="color:#22863A">figure</span><span style="color:#6F42C1"> className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"relative aspect-[4/5] w-full overflow-hidden bg-black/5"</span><span style="color:#24292E">></span></span>
 <span class="line"><span style="color:#24292E">                  &#x3C;</span><span style="color:#22863A">img</span></span>
 <span class="line"><span style="color:#6F42C1">                    src</span><span style="color:#D73A49">=</span><span style="color:#24292E">{item.image}</span></span>
 <span class="line"><span style="color:#6F42C1">                    alt</span><span style="color:#D73A49">=</span><span style="color:#24292E">{</span><span style="color:#032F62">\`\${</span><span style="color:#005CC5">PHOTOGRAPHER</span><span style="color:#032F62">.</span><span style="color:#24292E">studio</span><span style="color:#032F62">} — \${</span><span style="color:#24292E">item</span><span style="color:#032F62">.</span><span style="color:#24292E">title</span><span style="color:#032F62">}\`</span><span style="color:#24292E">}</span></span>
@@ -3255,8 +3241,12 @@ export default function PhotographerPortfolio() {
 <span class="line"><span style="color:#24292E">        &#x3C;/</span><span style="color:#22863A">div</span><span style="color:#24292E">></span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#24292E">        &#x3C;</span><span style="color:#22863A">div</span><span style="color:#6F42C1"> aria-hidden</span><span style="color:#D73A49">=</span><span style="color:#032F62">"true"</span><span style="color:#6F42C1"> className</span><span style="color:#D73A49">=</span><span style="color:#24292E">{</span><span style="color:#6F42C1">cn</span><span style="color:#24292E">(</span><span style="color:#032F62">"w-full shrink-0"</span><span style="color:#24292E">, </span><span style="color:#005CC5">STACK_PEEK</span><span style="color:#24292E">)} /></span></span>
-<span class="line"><span style="color:#24292E">        &#x3C;</span><span style="color:#22863A">div</span><span style="color:#6F42C1"> className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"relative aspect-[4/5] w-full shrink-0 overflow-visible"</span><span style="color:#24292E">></span></span>
-<span class="line"><span style="color:#24292E">          &#x3C;</span><span style="color:#005CC5">PrintStack</span><span style="color:#24292E"> /></span></span>
+<span class="line"><span style="color:#24292E">        &#x3C;</span><span style="color:#22863A">div</span><span style="color:#6F42C1"> className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"relative w-full shrink-0"</span><span style="color:#24292E">></span></span>
+<span class="line"><span style="color:#24292E">          &#x3C;</span><span style="color:#22863A">div</span><span style="color:#6F42C1"> className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"relative w-full overflow-visible pb-[125%] sm:aspect-[4/5] sm:pb-0"</span><span style="color:#24292E">></span></span>
+<span class="line"><span style="color:#24292E">            &#x3C;</span><span style="color:#22863A">div</span><span style="color:#6F42C1"> className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"absolute inset-0 overflow-visible"</span><span style="color:#24292E">></span></span>
+<span class="line"><span style="color:#24292E">              &#x3C;</span><span style="color:#005CC5">PrintStack</span><span style="color:#24292E"> /></span></span>
+<span class="line"><span style="color:#24292E">            &#x3C;/</span><span style="color:#22863A">div</span><span style="color:#24292E">></span></span>
+<span class="line"><span style="color:#24292E">          &#x3C;/</span><span style="color:#22863A">div</span><span style="color:#24292E">></span></span>
 <span class="line"><span style="color:#24292E">        &#x3C;/</span><span style="color:#22863A">div</span><span style="color:#24292E">></span></span>
 <span class="line"><span style="color:#24292E">      &#x3C;/</span><span style="color:#22863A">div</span><span style="color:#24292E">></span></span>
 <span class="line"><span style="color:#24292E">    &#x3C;/</span><span style="color:#22863A">figure</span><span style="color:#24292E">></span></span>
@@ -3282,7 +3272,7 @@ export default function PhotographerPortfolio() {
 <span class="line"><span style="color:#24292E">        &#x3C;/</span><span style="color:#22863A">div</span><span style="color:#24292E">></span></span>
 <span class="line"><span style="color:#24292E">      &#x3C;/</span><span style="color:#22863A">div</span><span style="color:#24292E">></span></span>
 <span class="line"></span>
-<span class="line"><span style="color:#24292E">      &#x3C;</span><span style="color:#22863A">div</span><span style="color:#6F42C1"> className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"w-full min-w-0 md:flex md:min-h-0 md:flex-[3] md:basis-0 md:flex-col md:justify-end md:@container/print md:[container-type:size]"</span><span style="color:#24292E">></span></span>
+<span class="line"><span style="color:#24292E">      &#x3C;</span><span style="color:#22863A">div</span><span style="color:#6F42C1"> className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"w-full min-w-0 shrink-0 md:flex md:min-h-0 md:flex-[3] md:basis-0 md:flex-col md:justify-end md:@container/print md:[container-type:size]"</span><span style="color:#24292E">></span></span>
 <span class="line"><span style="color:#24292E">        &#x3C;</span><span style="color:#005CC5">PrintProof</span><span style="color:#6F42C1"> stackRef</span><span style="color:#D73A49">=</span><span style="color:#24292E">{stackRef} </span><span style="color:#6F42C1">captionRef</span><span style="color:#D73A49">=</span><span style="color:#24292E">{captionRef} /></span></span>
 <span class="line"><span style="color:#24292E">      &#x3C;/</span><span style="color:#22863A">div</span><span style="color:#24292E">></span></span>
 <span class="line"><span style="color:#24292E">    &#x3C;/</span><span style="color:#22863A">div</span><span style="color:#24292E">></span></span>
@@ -3298,7 +3288,7 @@ export default function PhotographerPortfolio() {
 <span class="line"><span style="color:#D73A49">  return</span><span style="color:#24292E"> (</span></span>
 <span class="line"><span style="color:#24292E">    &#x3C;></span></span>
 <span class="line"><span style="color:#24292E">      &#x3C;</span><span style="color:#22863A">section</span></span>
-<span class="line"><span style="color:#6F42C1">        className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"relative isolate min-h-svh overflow-x-hidden overflow-y-auto md:h-svh md:overflow-hidden"</span></span>
+<span class="line"><span style="color:#6F42C1">        className</span><span style="color:#D73A49">=</span><span style="color:#032F62">"relative isolate min-h-svh overflow-x-hidden md:h-svh md:overflow-hidden"</span></span>
 <span class="line"><span style="color:#6F42C1">        style</span><span style="color:#D73A49">=</span><span style="color:#24292E">{{ backgroundColor: </span><span style="color:#005CC5">CANVAS</span><span style="color:#24292E">, color: </span><span style="color:#005CC5">INK</span><span style="color:#24292E">, fontFamily: </span><span style="color:#005CC5">FONT</span><span style="color:#24292E"> }}</span></span>
 <span class="line"><span style="color:#24292E">      ></span></span>
 <span class="line"><span style="color:#24292E">        &#x3C;</span><span style="color:#005CC5">TrailingImage</span></span>
@@ -3599,7 +3589,7 @@ export default function PhotographerPortfolio() {
 <span class="line"><span style="color:#E1E4E8">    &#x3C;</span><span style="color:#79B8FF">CardStack.Frame</span><span style="color:#B392F0"> className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"absolute inset-0 overflow-visible"</span><span style="color:#E1E4E8">></span></span>
 <span class="line"><span style="color:#E1E4E8">      &#x3C;</span><span style="color:#79B8FF">CardStack.LiveRegion</span><span style="color:#E1E4E8"> /></span></span>
 <span class="line"><span style="color:#E1E4E8">      &#x3C;</span><span style="color:#79B8FF">CardStack.Trigger</span><span style="color:#B392F0"> aria-label</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"Show next photo"</span><span style="color:#B392F0"> className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"absolute inset-0 block text-left"</span><span style="color:#E1E4E8">></span></span>
-<span class="line"><span style="color:#E1E4E8">        &#x3C;</span><span style="color:#79B8FF">CardStack.Viewport</span><span style="color:#B392F0"> className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"size-full overflow-visible !min-h-0 !pt-0"</span><span style="color:#E1E4E8">></span></span>
+<span class="line"><span style="color:#E1E4E8">        &#x3C;</span><span style="color:#79B8FF">CardStack.Viewport</span><span style="color:#B392F0"> className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"absolute inset-0 overflow-visible !min-h-0 pt-[14%] sm:pt-0"</span><span style="color:#E1E4E8">></span></span>
 <span class="line"><span style="color:#E1E4E8">          &#x3C;</span><span style="color:#79B8FF">CardStack.List</span><span style="color:#E1E4E8">></span></span>
 <span class="line"><span style="color:#E1E4E8">            {(</span><span style="color:#FFAB70">item</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">index</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">layer</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">=></span><span style="color:#E1E4E8"> (</span></span>
 <span class="line"><span style="color:#E1E4E8">              &#x3C;</span><span style="color:#79B8FF">CardStack.Card</span></span>
@@ -3608,7 +3598,7 @@ export default function PhotographerPortfolio() {
 <span class="line"><span style="color:#B392F0">                stackIndex</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{index}</span></span>
 <span class="line"><span style="color:#B392F0">                className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"!inset-x-0 !top-0 !h-fit !w-full gap-0 overflow-visible rounded-none !bg-transparent p-0 shadow-none ring-0"</span></span>
 <span class="line"><span style="color:#E1E4E8">              ></span></span>
-<span class="line"><span style="color:#E1E4E8">                &#x3C;</span><span style="color:#85E89D">figure</span><span style="color:#B392F0"> className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"relative aspect-[4/5] size-full overflow-hidden bg-black/5"</span><span style="color:#E1E4E8">></span></span>
+<span class="line"><span style="color:#E1E4E8">                &#x3C;</span><span style="color:#85E89D">figure</span><span style="color:#B392F0"> className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"relative aspect-[4/5] w-full overflow-hidden bg-black/5"</span><span style="color:#E1E4E8">></span></span>
 <span class="line"><span style="color:#E1E4E8">                  &#x3C;</span><span style="color:#85E89D">img</span></span>
 <span class="line"><span style="color:#B392F0">                    src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{item.image}</span></span>
 <span class="line"><span style="color:#B392F0">                    alt</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#9ECBFF">\`\${</span><span style="color:#79B8FF">PHOTOGRAPHER</span><span style="color:#9ECBFF">.</span><span style="color:#E1E4E8">studio</span><span style="color:#9ECBFF">} — \${</span><span style="color:#E1E4E8">item</span><span style="color:#9ECBFF">.</span><span style="color:#E1E4E8">title</span><span style="color:#9ECBFF">}\`</span><span style="color:#E1E4E8">}</span></span>
@@ -3649,8 +3639,12 @@ export default function PhotographerPortfolio() {
 <span class="line"><span style="color:#E1E4E8">        &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#E1E4E8">        &#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> aria-hidden</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"true"</span><span style="color:#B392F0"> className</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">cn</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">"w-full shrink-0"</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">STACK_PEEK</span><span style="color:#E1E4E8">)} /></span></span>
-<span class="line"><span style="color:#E1E4E8">        &#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"relative aspect-[4/5] w-full shrink-0 overflow-visible"</span><span style="color:#E1E4E8">></span></span>
-<span class="line"><span style="color:#E1E4E8">          &#x3C;</span><span style="color:#79B8FF">PrintStack</span><span style="color:#E1E4E8"> /></span></span>
+<span class="line"><span style="color:#E1E4E8">        &#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"relative w-full shrink-0"</span><span style="color:#E1E4E8">></span></span>
+<span class="line"><span style="color:#E1E4E8">          &#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"relative w-full overflow-visible pb-[125%] sm:aspect-[4/5] sm:pb-0"</span><span style="color:#E1E4E8">></span></span>
+<span class="line"><span style="color:#E1E4E8">            &#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"absolute inset-0 overflow-visible"</span><span style="color:#E1E4E8">></span></span>
+<span class="line"><span style="color:#E1E4E8">              &#x3C;</span><span style="color:#79B8FF">PrintStack</span><span style="color:#E1E4E8"> /></span></span>
+<span class="line"><span style="color:#E1E4E8">            &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
+<span class="line"><span style="color:#E1E4E8">          &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
 <span class="line"><span style="color:#E1E4E8">        &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
 <span class="line"><span style="color:#E1E4E8">      &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
 <span class="line"><span style="color:#E1E4E8">    &#x3C;/</span><span style="color:#85E89D">figure</span><span style="color:#E1E4E8">></span></span>
@@ -3676,7 +3670,7 @@ export default function PhotographerPortfolio() {
 <span class="line"><span style="color:#E1E4E8">        &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
 <span class="line"><span style="color:#E1E4E8">      &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
 <span class="line"></span>
-<span class="line"><span style="color:#E1E4E8">      &#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"w-full min-w-0 md:flex md:min-h-0 md:flex-[3] md:basis-0 md:flex-col md:justify-end md:@container/print md:[container-type:size]"</span><span style="color:#E1E4E8">></span></span>
+<span class="line"><span style="color:#E1E4E8">      &#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"w-full min-w-0 shrink-0 md:flex md:min-h-0 md:flex-[3] md:basis-0 md:flex-col md:justify-end md:@container/print md:[container-type:size]"</span><span style="color:#E1E4E8">></span></span>
 <span class="line"><span style="color:#E1E4E8">        &#x3C;</span><span style="color:#79B8FF">PrintProof</span><span style="color:#B392F0"> stackRef</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{stackRef} </span><span style="color:#B392F0">captionRef</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{captionRef} /></span></span>
 <span class="line"><span style="color:#E1E4E8">      &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
 <span class="line"><span style="color:#E1E4E8">    &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
@@ -3692,7 +3686,7 @@ export default function PhotographerPortfolio() {
 <span class="line"><span style="color:#F97583">  return</span><span style="color:#E1E4E8"> (</span></span>
 <span class="line"><span style="color:#E1E4E8">    &#x3C;></span></span>
 <span class="line"><span style="color:#E1E4E8">      &#x3C;</span><span style="color:#85E89D">section</span></span>
-<span class="line"><span style="color:#B392F0">        className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"relative isolate min-h-svh overflow-x-hidden overflow-y-auto md:h-svh md:overflow-hidden"</span></span>
+<span class="line"><span style="color:#B392F0">        className</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"relative isolate min-h-svh overflow-x-hidden md:h-svh md:overflow-hidden"</span></span>
 <span class="line"><span style="color:#B392F0">        style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{ backgroundColor: </span><span style="color:#79B8FF">CANVAS</span><span style="color:#E1E4E8">, color: </span><span style="color:#79B8FF">INK</span><span style="color:#E1E4E8">, fontFamily: </span><span style="color:#79B8FF">FONT</span><span style="color:#E1E4E8"> }}</span></span>
 <span class="line"><span style="color:#E1E4E8">      ></span></span>
 <span class="line"><span style="color:#E1E4E8">        &#x3C;</span><span style="color:#79B8FF">TrailingImage</span></span>
diff --git a/app/demo/library/browse/cinema-row-notes.tsx b/app/demo/library/browse/cinema-row-notes.tsx
index 179e38fa..06344dc4 100644
--- a/app/demo/library/browse/cinema-row-notes.tsx
+++ b/app/demo/library/browse/cinema-row-notes.tsx
@@ -72,16 +72,15 @@ export function CinemaRowNotes() {
         id="demo-notes-title"
         eyebrow="Recipe"
         title="Stream browse"
-        description="Apple TV-style layout: gradient hero with staggered premiere copy, a scrolling poster rail, then a craft panel with twin vertical still columns. TMDB art — demo only."
+        description="Apple TV-style page: gradient hero, scrolling poster rail, craft panel with two vertical still columns. TMDB posters, demo only."
       />
 
       <DemoNotes.Section id="concept" index={1} title="Concept">
         <DemoNotes.Prose>
           <p>
-            Three bands on one page. The hero is type on a violet radial scrim — eyebrow, title,
-            tagline, runtime, and CTAs stagger in after load. Below that, premieres scroll
-            horizontally. The craft panel pairs short copy with two still columns drifting in
-            opposite directions.
+            Three bands stacked on one page. Hero copy sits on a violet radial scrim. Eyebrow,
+            title, tagline, runtime, and CTAs stagger in after load. Premieres scroll sideways
+            underneath. The craft panel is short copy plus two still columns moving opposite ways.
           </p>
         </DemoNotes.Prose>
       </DemoNotes.Section>
@@ -91,9 +90,9 @@ export function CinemaRowNotes() {
           <p>
             <code>WaveReveal</code> (<code>mode="word"</code>) on the hero title.{" "}
             <code>Marquee</code> on the premieres rail and both still columns (
-            <code>pauseOnHover</code>, <code>applyMask={"{false}"}</code> — local masks instead).
-            Hero rise/fall and delay math live in the demo file as <code>cinema-hero-rise</code>{" "}
-            plus <code>heroSequenceDelays()</code>.
+            <code>pauseOnHover</code>, <code>applyMask={"{false}"}</code>; we use local masks
+            instead). Hero rise/fall and delay math live in the demo file as{" "}
+            <code>cinema-hero-rise</code> plus <code>heroSequenceDelays()</code>.
           </p>
         </DemoNotes.Prose>
         <DemoNotes.ComponentLinks demoKey={DEMO_KEY} />
@@ -102,9 +101,9 @@ export function CinemaRowNotes() {
       <DemoNotes.Section id="build" index={3} title="How it's built">
         <DemoNotes.Prose>
           <p>
-            <code>heroSequenceDelays()</code> derives every entrance offset from the title word
-            count and <code>WaveReveal</code> timing — eyebrow through the premieres rail share one
-            sequence. <code>cinema-hero-rise</code> is a local keyframe (blur +{" "}
+            <code>heroSequenceDelays()</code> works out every entrance offset from the title word
+            count and <code>WaveReveal</code> timing. Eyebrow through the premieres rail all share
+            one sequence. <code>cinema-hero-rise</code> is a local keyframe (blur +{" "}
             <code>translateY</code>) on everything except the title words.
           </p>
           <p>
@@ -128,7 +127,7 @@ export function CinemaRowNotes() {
         <DemoNotes.Code caption="Hero delay sequence + WaveReveal">
           {HERO_SEQUENCE_SNIPPET}
         </DemoNotes.Code>
-        <DemoNotes.Code caption="Premieres rail — custom edge mask">
+        <DemoNotes.Code caption="Premieres rail, custom edge mask">
           {PREMIERES_SNIPPET}
         </DemoNotes.Code>
         <DemoNotes.Code caption="Craft panel still columns">{STILLS_SNIPPET}</DemoNotes.Code>
diff --git a/app/demo/library/footer/footer-wordmark-notes.tsx b/app/demo/library/footer/footer-wordmark-notes.tsx
index dae320c0..425d28fa 100644
--- a/app/demo/library/footer/footer-wordmark-notes.tsx
+++ b/app/demo/library/footer/footer-wordmark-notes.tsx
@@ -43,7 +43,7 @@ export function FooterWordmarkNotes() {
             The type sits in the field. It doesn&apos;t float on top like a heading.
           </p>
           <p>
-            Not a clone — same hierarchy. One blue family in <code>oklch</code>, Syne 800 on the
+            Not a clone, but same hierarchy. One blue family in <code>oklch</code>, Syne 800 on the
             wordmark, IBM Plex on the links. Lucien uses a static texture; we put boids behind the
             gradient at low opacity instead.
           </p>
@@ -52,7 +52,7 @@ export function FooterWordmarkNotes() {
 
       <DemoNotes.Section id="components" index={2} title="Components used">
         <DemoNotes.Prose>
-          <p>Two Animata pieces — boids and SiblingFocusNav. The rest is layout and CSS.</p>
+          <p>Two Animata pieces: boids and SiblingFocusNav. The rest is layout and CSS.</p>
         </DemoNotes.Prose>
         <DemoNotes.ComponentLinks demoKey={DEMO_KEY} />
         <DemoNotes.Prose>
@@ -66,7 +66,7 @@ export function FooterWordmarkNotes() {
         <DemoNotes.Prose>
           <p>
             The wordmark is <strong>SVG</strong> <code>&lt;text&gt;</code>, not a styled heading.
-            That&apos;s the trick for edge-to-edge scaling — no clipping, no fighting{" "}
+            That&apos;s what makes edge-to-edge scaling work. No clipping, no fighting{" "}
             <code>clamp()</code> on a single HTML line.
           </p>
           <p>
@@ -90,7 +90,7 @@ export function FooterWordmarkNotes() {
       <DemoNotes.Section id="source" index={4} title="Full source">
         <DemoNotes.Prose>
           <p>
-            Pulled from the demo file at build time. Copy what you need below — component docs are
+            Pulled from the demo file at build time. Copy what you need below. Component docs are
             linked above.
           </p>
         </DemoNotes.Prose>
diff --git a/app/demo/library/hero/launch-shift-notes.tsx b/app/demo/library/hero/launch-shift-notes.tsx
index 3394c0f2..55633749 100644
--- a/app/demo/library/hero/launch-shift-notes.tsx
+++ b/app/demo/library/hero/launch-shift-notes.tsx
@@ -30,8 +30,8 @@ export function LaunchShiftNotes() {
       <DemoNotes.Header
         id="demo-notes-title"
         eyebrow="Recipe"
-        title="Superhuman · platform hero"
-        description="The Grammarly → Superhuman rebrand hero from superhuman.com. Not affiliated; same headline and subhead, local layout."
+        title="Superhuman platform hero"
+        description="The Grammarly to Superhuman rebrand hero from superhuman.com. Not affiliated; same headline and subhead, local layout."
       />
 
       <DemoNotes.Section id="concept" index={1} title="Concept">
@@ -47,8 +47,8 @@ export function LaunchShiftNotes() {
           </p>
           <p>
             Black field, warm off-white body text, violet on the badge. Headline fades white to
-            gray, two lines so the gradient doesn&apos;t muddy the second row. Boids behind a
-            vignette for edge motion.
+            gray, split across two lines so the gradient doesn&apos;t muddy the second row. Boids
+            behind a vignette for edge motion.
           </p>
         </DemoNotes.Prose>
       </DemoNotes.Section>
diff --git a/app/demo/library/hero/launch-shift.tsx b/app/demo/library/hero/launch-shift.tsx
index f1e6d946..b00d1241 100644
--- a/app/demo/library/hero/launch-shift.tsx
+++ b/app/demo/library/hero/launch-shift.tsx
@@ -66,17 +66,11 @@ export default function LaunchShift() {
               Superhuman
             </span>
 
-            <h1 className="mt-4 max-w-[16ch] text-balance text-[clamp(2.35rem,6.8vw,3.75rem)] font-semibold tracking-[-0.045em]">
-              <span
-                style={{ textBoxTrim: "trim-both" }}
-                className="block bg-linear-to-b leading-none from-white via-[#F5F5F3] to-[#A8A8A6] bg-clip-text text-transparent"
-              >
+            <h1 className="mt-5 max-w-[16ch] text-balance text-[clamp(2.35rem,6.8vw,3.75rem)] font-semibold leading-[1.05] tracking-[-0.045em]">
+              <span className="block bg-linear-to-b from-white via-[#F5F5F3] to-[#A8A8A6] bg-clip-text text-transparent">
                 Superpowers,
               </span>
-              <span
-                style={{ textBoxTrim: "trim-both" }}
-                className="-mt-5 block bg-linear-to-b leading-none from-white via-[#F5F5F3] to-[#A8A8A6] bg-clip-text text-transparent"
-              >
+              <span className="mt-1 block bg-linear-to-b from-white via-[#F5F5F3] to-[#A8A8A6] bg-clip-text text-transparent sm:mt-0 sm:-mt-3 md:-mt-4">
                 everywhere you work.
               </span>
             </h1>
diff --git a/app/demo/library/hero/photographer-portfolio-notes.tsx b/app/demo/library/hero/photographer-portfolio-notes.tsx
index 65d3ab05..8e9ff783 100644
--- a/app/demo/library/hero/photographer-portfolio-notes.tsx
+++ b/app/demo/library/hero/photographer-portfolio-notes.tsx
@@ -14,7 +14,7 @@ const TRAIL_EXCLUDE_SNIPPET = `<TrailingImage
   excludeRefs={[heroRef, captionRef]}
 />`;
 
-const LAYOUT_SNIPPET = `{/* mobile: column stack · desktop: 2:3 row, both pinned to bottom */}
+const LAYOUT_SNIPPET = `{/* mobile: column stack; desktop: 2:3 row, both pinned to bottom */}
 <div className="flex flex-col gap-8 md:h-full md:flex-1 md:flex-row md:gap-6">
   <div className="md:flex md:flex-[2] md:flex-col md:justify-end">{/* hero */}</div>
 
@@ -59,15 +59,15 @@ export function PhotographerPortfolioNotes() {
       <DemoNotes.Section id="concept" index={1} title="Concept">
         <DemoNotes.Prose>
           <p>
-            Fake site for Maya, a wedding photographer. White page, black type, not much else — name
-            and contact in the bottom-left, a tall stack of prints on the right. On phone the stack
-            goes full width; on desktop it sits on the right edge. Wedding stills from Lummi follow
-            the cursor behind everything.
+            Fake site for Maya, a wedding photographer. White page, black type, not much else. Name
+            and contact sit in the bottom-left; a tall stack of prints fills the right. On phone the
+            stack goes full width; on desktop it hugs the right edge. Wedding stills from Lummi
+            follow the cursor behind everything.
           </p>
           <p>
             The first thing you see is not the page. <code>SplitReveal</code> covers the screen,
             loads every image, and ticks progress on the center seam. When the batch finishes, the
-            halves slide apart. The layout was already there — just hidden.
+            halves slide apart. The layout was already there, just hidden.
           </p>
           <p>
             Whichever print is on top gets corner brackets, like a viewfinder. The rest are plain
@@ -79,14 +79,14 @@ export function PhotographerPortfolioNotes() {
       <DemoNotes.Section id="components" index={2} title="Components used">
         <DemoNotes.Prose>
           <p>
-            <code>SplitReveal</code> sits next to the page as a fixed overlay — pass{" "}
+            <code>SplitReveal</code> sits next to the page as a fixed overlay. Pass{" "}
             <code>images</code>, wire <code>onComplete</code>, done. We skipped the{" "}
             <code>.Content</code> wrapper on purpose; the real layout mounts normally underneath.
           </p>
           <p>
             <code>CardStack</code> advances the portfolio. Autoplay only starts after the preloader
             clears. <code>PrintCaption</code> mirrors the top frame with fake shutter metadata.
-            Camera and map pin icons are Lucide Animated — they only move on hover so the hero stays
+            Camera and map pin icons are Lucide Animated. They only move on hover so the hero stays
             quiet.
           </p>
           <p>
@@ -100,8 +100,8 @@ export function PhotographerPortfolioNotes() {
       <DemoNotes.Section id="build" index={3} title="How it's built">
         <DemoNotes.Prose>
           <p>
-            All image URLs live in <code>LUMMI_ASSETS</code> — six stack frames, twelve for trails,
-            one avatar — cropped through a shared <code>lummi()</code> helper.{" "}
+            All image URLs live in <code>LUMMI_ASSETS</code>: six stack frames, twelve for trails,
+            one avatar. All cropped through a shared <code>lummi()</code> helper.{" "}
             <code>PRELOAD_IMAGES</code> dedupes before SplitReveal sees them.
           </p>
           <p>
@@ -112,26 +112,26 @@ export function PhotographerPortfolioNotes() {
           <p>
             Print width was the annoying part. We tried JS measurement first; on desktop the caption
             and stack kept drifting out of sync. Switched to a size container on the print column
-            and capped width with <code>min(100cqw, calc((100cqh - 4.5rem) * 8 / 11))</code> — 4:5
-            frame plus a 10% peek strip (<code>aspect-[8/1]</code>) that fits the viewport height.
-            No <code>ResizeObserver</code>.
+            and capped width with <code>min(100cqw, calc((100cqh - 4.5rem) * 8 / 11))</code> for a
+            4:5 frame plus a 10% peek strip (<code>aspect-[8/1]</code>) that fits the viewport
+            height. No <code>ResizeObserver</code>.
           </p>
           <p>
             Caption had a white fill at one point. It fought the page background and made the
-            metadata feel like a sticker — dropped it; caption and page share the same canvas now.
+            metadata feel like a sticker. Dropped it; caption and page share the same canvas now.
           </p>
           <p>
-            For trails we first excluded the whole stack. Looked too clean — nothing ever crossed
-            the prints. Narrowed it to the hero and caption wrappers only.
+            For trails we first excluded the whole stack. Looked too clean; nothing ever crossed the
+            prints. Narrowed it to the hero and caption wrappers only.
           </p>
         </DemoNotes.Prose>
-        <DemoNotes.Code caption="Responsive print column — container query sizing">
+        <DemoNotes.Code caption="Responsive print column, container query sizing">
           {LAYOUT_SNIPPET}
         </DemoNotes.Code>
         <DemoNotes.Code caption="SplitReveal as a sibling overlay">
           {PRELOADER_SNIPPET}
         </DemoNotes.Code>
-        <DemoNotes.Code caption="Trail layer — exclude text wrappers">
+        <DemoNotes.Code caption="Trail layer, exclude text wrappers">
           {TRAIL_EXCLUDE_SNIPPET}
         </DemoNotes.Code>
       </DemoNotes.Section>
@@ -139,7 +139,7 @@ export function PhotographerPortfolioNotes() {
       <DemoNotes.Section id="credits" index={4} title="Credits">
         <DemoNotes.Prose>
           <p>
-            Photos from <a href="https://www.lummi.ai">Lummi</a> — wedding and event searches. IDs
+            Photos from <a href="https://www.lummi.ai">Lummi</a>, wedding and event searches. IDs
             are in <code>LUMMI_ASSETS</code>. Fine for demos; use your own shots for anything real.
           </p>
           <p>
diff --git a/app/demo/library/hero/photographer-portfolio.tsx b/app/demo/library/hero/photographer-portfolio.tsx
index 6215abec..876a4e2e 100644
--- a/app/demo/library/hero/photographer-portfolio.tsx
+++ b/app/demo/library/hero/photographer-portfolio.tsx
@@ -247,7 +247,7 @@ function PrintStack() {
     <CardStack.Frame className="absolute inset-0 overflow-visible">
       <CardStack.LiveRegion />
       <CardStack.Trigger aria-label="Show next photo" className="absolute inset-0 block text-left">
-        <CardStack.Viewport className="size-full overflow-visible !min-h-0 !pt-0">
+        <CardStack.Viewport className="absolute inset-0 overflow-visible !min-h-0 pt-[14%] sm:pt-0">
           <CardStack.List>
             {(item, index, layer) => (
               <CardStack.Card
@@ -256,7 +256,7 @@ function PrintStack() {
                 stackIndex={index}
                 className="!inset-x-0 !top-0 !h-fit !w-full gap-0 overflow-visible rounded-none !bg-transparent p-0 shadow-none ring-0"
               >
-                <figure className="relative aspect-[4/5] size-full overflow-hidden bg-black/5">
+                <figure className="relative aspect-[4/5] w-full overflow-hidden bg-black/5">
                   <img
                     src={item.image}
                     alt={`${PHOTOGRAPHER.studio} — ${item.title}`}
@@ -297,8 +297,12 @@ function PrintProof({
         </div>
 
         <div aria-hidden="true" className={cn("w-full shrink-0", STACK_PEEK)} />
-        <div className="relative aspect-[4/5] w-full shrink-0 overflow-visible">
-          <PrintStack />
+        <div className="relative w-full shrink-0">
+          <div className="relative w-full overflow-visible pb-[125%] sm:aspect-[4/5] sm:pb-0">
+            <div className="absolute inset-0 overflow-visible">
+              <PrintStack />
+            </div>
+          </div>
         </div>
       </div>
     </figure>
@@ -324,7 +328,7 @@ function PortfolioLayout({
         </div>
       </div>
 
-      <div className="w-full min-w-0 md:flex md:min-h-0 md:flex-[3] md:basis-0 md:flex-col md:justify-end md:@container/print md:[container-type:size]">
+      <div className="w-full min-w-0 shrink-0 md:flex md:min-h-0 md:flex-[3] md:basis-0 md:flex-col md:justify-end md:@container/print md:[container-type:size]">
         <PrintProof stackRef={stackRef} captionRef={captionRef} />
       </div>
     </div>
@@ -340,7 +344,7 @@ export default function PhotographerPortfolio() {
   return (
     <>
       <section
-        className="relative isolate min-h-svh overflow-x-hidden overflow-y-auto md:h-svh md:overflow-hidden"
+        className="relative isolate min-h-svh overflow-x-hidden md:h-svh md:overflow-hidden"
         style={{ backgroundColor: CANVAS, color: INK, fontFamily: FONT }}
       >
         <TrailingImage
diff --git a/components/component-list-item.tsx b/components/component-list-item.tsx
index 10423a59..c7f25aee 100644
--- a/components/component-list-item.tsx
+++ b/components/component-list-item.tsx
@@ -104,7 +104,13 @@ export default function ComponentListItem({
   const [forceUpdate, setForceUpdate] = useState(0);
   const Component = lazy && Reflect.has(lazyList, copyId) ? lazyList[copyId] : null;
   return (
-    <div {...props} className={cn("group/component component-list-item relative", className)}>
+    <div
+      {...props}
+      className={cn(
+        "group/component grid grid-rows-[auto_1fr_auto] component-list-item relative",
+        className,
+      )}
+    >
       <Actions copyId={copyId} href={href} onRefresh={() => setForceUpdate((prev) => prev + 1)} />
       <div
         key={`component-list-item-${copyId}-${forceUpdate}`}
diff --git a/components/mdx-components.tsx b/components/mdx-components.tsx
index 88c50d27..f1b8c399 100644
--- a/components/mdx-components.tsx
+++ b/components/mdx-components.tsx
@@ -27,6 +27,7 @@ import { AnimataRenderer } from "@/components/dynamic-animata";
 import { FrameworkDocs } from "@/components/framework-docs";
 import { InView } from "@/components/in-view";
 import PreviewContainer from "@/components/preview-container";
+import { PropsTable } from "@/components/props-table";
 import { RegistryInstall } from "@/components/registry-install";
 import {
   Accordion,
@@ -279,6 +280,7 @@ const components = {
   ComponentExample,
   ComponentSource,
   RegistryInstall,
+  PropsTable,
   AspectRatio,
   CodeBlockWrapper: ({ ...props }) => <CodeBlockWrapper className="rounded-md border" {...props} />,
   Step: ({ className, ...props }: ComponentProps<"h3">) => (
diff --git a/components/props-table.tsx b/components/props-table.tsx
new file mode 100644
index 00000000..462a3f72
--- /dev/null
+++ b/components/props-table.tsx
@@ -0,0 +1,115 @@
+import type { ReactNode } from "react";
+
+import { inlineCodeClassName } from "@/lib/inline-code";
+import { cn } from "@/lib/utils";
+
+function CodeCell({ children }: { children: ReactNode }) {
+  if (children == null || children === "" || children === "—" || children === "-") {
+    return <span className="text-muted-foreground">—</span>;
+  }
+
+  return <code className={cn(inlineCodeClassName, "font-normal")}>{children}</code>;
+}
+
+export interface PropsTableRowProps {
+  /** Prop name as exported from the component (no backticks). */
+  prop: string;
+  /** Type expression as shown in docs (no backticks). */
+  type: string;
+  /** Default value as shown in docs; omit or use — when none. */
+  default?: string;
+  /** When true, shows a Required badge instead of a default cell emphasis. */
+  required?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function PropsTableRow({
+  prop,
+  type,
+  default: defaultValue,
+  required,
+  children,
+  className,
+}: PropsTableRowProps) {
+  return (
+    <tr className={cn("border-b border-border last:border-0", className)}>
+      <th
+        scope="row"
+        className="w-[1%] whitespace-nowrap px-4 py-3 text-left align-top font-medium text-foreground"
+      >
+        <CodeCell>{prop}</CodeCell>
+      </th>
+      <td className="w-[1%] whitespace-nowrap px-4 py-3 align-top text-muted-foreground">
+        <CodeCell>{type}</CodeCell>
+      </td>
+      <td className="w-[1%] whitespace-nowrap px-4 py-3 align-top">
+        {required ? (
+          <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            Required
+          </span>
+        ) : (
+          <CodeCell>{defaultValue ?? "—"}</CodeCell>
+        )}
+      </td>
+      <td className="min-w-[12rem] px-4 py-3 align-top text-[0.9375rem] leading-relaxed text-muted-foreground">
+        {children}
+      </td>
+    </tr>
+  );
+}
+
+export interface PropsTableProps {
+  children: ReactNode;
+  /** Optional subheading above the table (e.g. compound part name). */
+  title?: string;
+  className?: string;
+}
+
+export function PropsTable({ children, title, className }: PropsTableProps) {
+  return (
+    <figure className={cn("my-6", className)}>
+      {title ? (
+        <figcaption className="mb-3 font-heading text-base font-semibold tracking-tight text-foreground">
+          {title}
+        </figcaption>
+      ) : null}
+      <div className="overflow-x-auto rounded-lg border border-border bg-card/40">
+        <table className="w-full min-w-[36rem] border-collapse text-sm">
+          <caption className="sr-only">{title ? `${title} props` : "Component props"}</caption>
+          <thead>
+            <tr className="border-b border-border bg-muted/40">
+              <th
+                scope="col"
+                className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-muted-foreground"
+              >
+                Prop
+              </th>
+              <th
+                scope="col"
+                className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-muted-foreground"
+              >
+                Type
+              </th>
+              <th
+                scope="col"
+                className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-muted-foreground"
+              >
+                Default
+              </th>
+              <th
+                scope="col"
+                className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-muted-foreground"
+              >
+                Description
+              </th>
+            </tr>
+          </thead>
+          <tbody>{children}</tbody>
+        </table>
+      </div>
+    </figure>
+  );
+}
+
+PropsTable.Row = PropsTableRow;
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
index 2cecd910..0bc19908 100644
--- a/components/ui/command.tsx
+++ b/components/ui/command.tsx
@@ -35,16 +35,27 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
   )
 }
 
+interface CommandInputProps
+  extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> {
+  wrapperClassName?: string
+  hideIcon?: boolean
+}
+
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+  CommandInputProps
+>(({ className, wrapperClassName, hideIcon, ...props }, ref) => (
+  <div
+    className={cn("flex min-w-0 flex-1 items-center border-b px-3", wrapperClassName)}
+    cmdk-input-wrapper=""
+  >
+    {hideIcon ? null : (
+      <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    )}
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 min-w-0 flex-1 rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
diff --git a/config/docs.ts b/config/docs.ts
index b1af981c..7786ee5d 100644
--- a/config/docs.ts
+++ b/config/docs.ts
@@ -48,6 +48,7 @@ const sidebarNav: SidebarNavItem[] = [
         href: "/docs/changelog",
         items: [
           { title: "Overview", href: "/docs/changelog", items: [] },
+          { title: "June 2026", href: "/docs/changelog/2026-06", items: [] },
           { title: "May 2026", href: "/docs/changelog/2026-05", items: [] },
           { title: "April 2026", href: "/docs/changelog/2026-04", items: [] },
           { title: "March 2026", href: "/docs/changelog/2026-03", items: [] },
diff --git a/content/docs/card/card-spread.mdx b/content/docs/card/card-spread.mdx
index c9615d37..03e37d53 100644
--- a/content/docs/card/card-spread.mdx
+++ b/content/docs/card/card-spread.mdx
@@ -1,7 +1,8 @@
 ---
 title: Card Spread
-description: A stack of cards that will reveal on hover and spread on click.
-author: YourTwitterUsername
+description: A stacked deck of widget cards with a subtle hover peek and a click-to-spread throw animation.
+author: sudhashrestha
+labels: ["requires interaction", "click", "hover"]
 ---
 
 <ComponentPreview name="card-card-spread--primary" />
@@ -33,6 +34,18 @@ Open the newly created file and paste the following code:
 
 </Steps>
 
+## Usage
+
+The stack has three states:
+
+1. **Deck** — all cards share one origin (transform-only, no absolute fan layout).
+2. **Hover** — a light vertical peek on the outer layer; spread motion is unchanged.
+3. **Click** — cards throw into their spread positions with a custom `--ease-throw` curve; collapse uses a separate ease-out gather.
+
+Toggle with click or <kbd>Enter</kbd> / <kbd>Space</kbd> when the stage is focused. The demo composes Notes, Shopping List, and related widget cards — swap in your own `w-48` tiles as needed.
+
+Motion is CSS-only: an inner wrapper handles spread/collapse; an outer wrapper handles hover peek so the two never fight for `transform`.
+
 ## Credits
 
 Built by [sudha](https://github.com/sudhashrestha)
diff --git a/content/docs/card/collab-card.mdx b/content/docs/card/collab-card.mdx
new file mode 100644
index 00000000..3828e755
--- /dev/null
+++ b/content/docs/card/collab-card.mdx
@@ -0,0 +1,134 @@
+---
+title: Collab Card
+description: Bento tile for realtime collaboration—not a generic card. Live presence, selection frame, teammate cursors.
+labels: ["bento", "collaboration", "animated"]
+---
+
+<ComponentPreview name="card-collab-card--primary" />
+
+A bento feature tile for realtime collaboration, not a general-purpose card. Put it in a wide cell on your marketing site or product landing when you're selling live editing, shared canvases, or co-authored docs. Skip it for heroes and for slots where collaboration isn't the point.
+
+Out of the box it looks like Figma multiplayer: live status and an avatar stack up top, a blue dashed frame with corner handles around the greeting, and two named pills with cursors that drift and flash a click ring. Change the strings and `collaborators` tuple for Linear, Notion, or whatever tool you're echoing.
+
+## Installation
+
+### CLI
+
+<RegistryInstall category="card" name="collab-card" />
+
+### Manual
+
+<Steps>
+
+<Step>Run the following command</Step>
+
+This creates `collab-card.tsx` in `components/animata/card`.
+
+```bash
+mkdir -p components/animata/card && touch components/animata/card/collab-card.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the file and paste:
+
+```jsx file=<rootDir>/animata/card/collab-card.tsx
+
+```
+
+</Steps>
+
+## When to use
+
+Feature grids and bento rows about multiplayer editing, shared canvases, co-authored docs, or live presence. One host cursor runs the frame edge; two teammate cursors sit on their pills. If your users know Figma, they'll read it instantly.
+
+## When not to use
+
+Solo flows—the card implies other people in the file. Tight grid cells—the greeting is sized in `cqi`, so give the tile at least half a row of height. Pages with no collaboration story—the motion promises co-editing; don't leave that hanging.
+
+## How it works
+
+The root is a container query (`@container`). Spacing, type, frame padding, and cursor offsets use `cqi`, so everything scales with the card width. No breakpoint ladder, no `ResizeObserver`.
+
+Animation is CSS only. The host cursor loops the dashed frame. Collaborator cursors wobble beside their pills; a masked `conic-gradient` draws the click burst on a delay. Put a `text-*` class on the cursor wrapper and both pointer and burst pick it up through `currentColor`.
+
+With `prefers-reduced-motion: reduce`, animations stop. Cursors and bursts stay visible at rest so the card still reads offline.
+
+Defaults borrow Figma's `#0D99FF` frame and the usual violet/coral collaborator colors. Background glows use `color-mix(in oklch, …)` on the dark canvas.
+
+## Reskinning
+
+```tsx
+// Figma — default
+<CollabCard />
+
+// Linear — issue assignment
+<CollabCard
+  greeting="ENG-204"
+  eyebrow="Now collaborating"
+  intro="assigned to"
+  liveLabel="Live · 2 editing"
+  collaborators={[
+    { name: "Karri", pill: "bg-[#5E6AD2]", cursor: "text-[#5E6AD2]" },
+    { name: "Tuomas", pill: "bg-[#EB5688]", cursor: "text-[#EB5688]" },
+  ]}
+/>
+
+// Notion — wiki co-editors
+<CollabCard
+  greeting="Team wiki"
+  eyebrow="Live editors"
+  intro="with"
+  conjunction="+"
+  collaborators={[
+    { name: "Ivan", pill: "bg-[#2F3437]", cursor: "text-[#2F3437]" },
+    { name: "Simon", pill: "bg-[#E0AE51]", pillText: "text-[#1f1f1f]", cursor: "text-[#E0AE51]" },
+  ]}
+/>
+```
+
+## Props
+
+<PropsTable>
+  <PropsTable.Row prop="greeting" type="string" default='"hello!"'>
+    Text inside the dashed frame.
+  </PropsTable.Row>
+  <PropsTable.Row prop="eyebrow" type="string" default='"Now in multiplayer"'>
+    Line above the frame.
+  </PropsTable.Row>
+  <PropsTable.Row prop="intro" type="string" default='"editing"'>
+    Copy before the first pill.
+  </PropsTable.Row>
+  <PropsTable.Row prop="conjunction" type="string" default='"&"'>
+    Between the two pills.
+  </PropsTable.Row>
+  <PropsTable.Row prop="trailing" type="string" default='""'>
+    After the second pill; omitted when empty.
+  </PropsTable.Row>
+  <PropsTable.Row prop="liveLabel" type="string" default='"Live · 4 editing"'>
+    Next to the green live dot.
+  </PropsTable.Row>
+  <PropsTable.Row prop="presenceColors" type="string[]" default="Figma swatches">
+    Hex fills for stack avatars, left to right.
+  </PropsTable.Row>
+  <PropsTable.Row prop="extraCount" type="number" default="2">
+    Shown as +N on the avatar stack.
+  </PropsTable.Row>
+  <PropsTable.Row prop="collaborators" type="[Collaborator, Collaborator]" default="Dylan + Evan">
+    name, pill, optional pillText, and cursor per person.
+  </PropsTable.Row>
+  <PropsTable.Row prop="backgroundUrl" type="string">
+    Cover image; without it, dark canvas and dot grid.
+  </PropsTable.Row>
+  <PropsTable.Row prop="className" type="string">
+    On the outer wrapper (size, radius).
+  </PropsTable.Row>
+</PropsTable>
+
+## Accessibility
+
+Cursors and bursts are `aria-hidden`. Screen readers still get the greeting, eyebrow, and names from visible text.
+
+Reduced motion turns animations off; layout stays the same.
+
+The frame is a dashed `border`, not a background image, so it holds up in forced-colors mode.
diff --git a/content/docs/changelog/2026-06.mdx b/content/docs/changelog/2026-06.mdx
new file mode 100644
index 00000000..dac01abc
--- /dev/null
+++ b/content/docs/changelog/2026-06.mdx
@@ -0,0 +1,72 @@
+---
+title: June 2026
+description: Widget glance polish, Card Spread and Collab Card, and catalog cleanup.
+date: 2026-06-01
+---
+
+Wave 1 widgets got Apple-style type hierarchy and props-driven demos. Card Spread was rebuilt for deck, peek, and throw-on-click motion. Four oversized widgets left the public catalog, and the internal widget standards doc was removed from contributing.
+
+## Improved components
+
+<ChangeLogComponents>
+  <ChangeLogEntry href="/docs/widget/reminder">
+    <h3>Reminder</h3>
+    <p>Glance typography, toggleable rows, and theme tokens — use on home-screen–style boards where quick task completion matters.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/widget/weather-card">
+    <h3>Weather Card</h3>
+    <p>Props for city, conditions, and highs/lows with a compact square layout for dashboards and marketing bentos.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/widget/water-tracker">
+    <h3>Water Tracker</h3>
+    <p>Configurable goal and fill level with clearer hierarchy for health and habit apps.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/widget/vpn-widget">
+    <h3>VPN Widget</h3>
+    <p>Sliding connect control with labeled states — fits security or connectivity glance tiles.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/widget/delivery-card">
+    <h3>Delivery Card</h3>
+    <p>Transit progress, arrival time, and location in a dark tile suited to order-tracking UIs.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/widget/alarm-clock">
+    <h3>Alarm Clock</h3>
+    <p>Toggleable alarms with schedule labels — for clock or morning-routine widget grids.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/widget/calendar-event">
+    <h3>Calendar Event</h3>
+    <p>Dot-and-chip event rows with default data — drop into calendar or agenda previews.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/widget/music-widget">
+    <h3>Music Widget</h3>
+    <p>Track list, cover art, and transport controls for media player mockups.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/widget/shopping-list">
+    <h3>Shopping List</h3>
+    <p>Interactive checkboxes and configurable items — grocery or errand list tiles.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/widget/notes">
+    <h3>Notes</h3>
+    <p>Line-based note content with the yellow sticky treatment — quick memo widgets.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/widget/fund-widget">
+    <h3>Fund Widget</h3>
+    <p>Chart scaled into the square `size-52` shell for finance glance layouts.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/widget/calorie-counter">
+    <h3>Calorie Counter</h3>
+    <p>Tall donut summary with flex layout instead of absolute positioning — nutrition dashboards.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/card/card-spread">
+    <h3>Card Spread</h3>
+    <p>Stacked deck with a subtle hover peek and click-to-spread throw easing. Use when you want several related cards in one compact stack that expands on demand.</p>
+  </ChangeLogEntry>
+  <ChangeLogEntry href="/docs/card/collab-card">
+    <h3>Collab Card</h3>
+    <p>Bento-sized multiplayer feature card with live presence, a Figma-style selection frame, and animated teammate cursors — reskin with props for Linear, Notion, or your own co-editing story.</p>
+  </ChangeLogEntry>
+</ChangeLogComponents>
+
+## Documentation
+
+Unpublished Calendar Widget, Music Stack Interaction, Team Clock, and Video Chat from the docs and shadcn registry so the widget overview lists only glance-sized tiles. Removed the internal widget catalog standards page from contributing. Added `useIsMobile` for responsive docs and demo behavior. Widget overview now tracks published entries only and places Fund Widget in the square section.
diff --git a/content/docs/changelog/index.mdx b/content/docs/changelog/index.mdx
index cfbc52d1..d8341b61 100644
--- a/content/docs/changelog/index.mdx
+++ b/content/docs/changelog/index.mdx
@@ -8,13 +8,13 @@ New components, bug fixes, and infrastructure changes, going back to the beta la
 
 ## Recent releases
 
-### [May 2026](/docs/changelog/2026-05)
+### [June 2026](/docs/changelog/2026-06)
 
-[Boids Ecosystem](/docs/background/boids-ecosystem), [Sibling Focus Nav](/docs/container/sibling-focus-nav), live demos at `/demo`, and Tailwind CSS 4.3 with a shadcn/ui registry refresh.
+Wave 1 widget glance polish, [Card Spread](/docs/card/card-spread) throw motion, and catalog cleanup for published widgets only.
 
-### [April 2026](/docs/changelog/2026-04)
+### [May 2026](/docs/changelog/2026-05)
 
-19 new text animation presets built on a shared WAAPI runtime. shadcn registry went live — every component became installable via URLs like `https://animata.design/r/{category}/{name}.json`. Announcement ribbon was added, and the site was revamped for speed and accessibility.
+[Boids Ecosystem](/docs/background/boids-ecosystem), [Sibling Focus Nav](/docs/container/sibling-focus-nav), live demos at `/demo`, and Tailwind CSS 4.3 with a shadcn/ui registry refresh.
 
 ---
 
@@ -22,6 +22,7 @@ New components, bug fixes, and infrastructure changes, going back to the beta la
 
 | Month | Highlights |
 |---|---|
+| [June 2026](/docs/changelog/2026-06) | Widget glance polish, Card Spread, unpublished four oversized widgets |
 | [May 2026](/docs/changelog/2026-05) | Tailwind 4.3, Boids Ecosystem, Sibling Focus Nav, live demos, docs typography |
 | [April 2026](/docs/changelog/2026-04) | 19 text animation presets, shadcn registry, announcement ribbon, site revamp |
 | [March 2026](/docs/changelog/2026-03) | Next.js 16, Tailwind v4, Storybook 10, Biome |
diff --git a/content/docs/contributing/components.mdx b/content/docs/contributing/components.mdx
index 5021e5ae..49dcf008 100644
--- a/content/docs/contributing/components.mdx
+++ b/content/docs/contributing/components.mdx
@@ -50,6 +50,42 @@ Simply open the `config/docs.ts` file and paste the new entry in the `docsConfig
 
 The script above generates a placeholder documentation file for the new component. You can find the file in the `content/docs/{type}` directory. Update it with the relevant information about the component you are creating and remove the placeholder content.
 
+### Props tables
+
+Document the component API with `<PropsTable>` and `<PropsTable.Row>` — not a markdown pipe table. See `content/docs/card/collab-card.mdx` for a full example.
+
+```mdx
+## Props
+
+<PropsTable>
+  <PropsTable.Row prop="className" type="string">
+    Classes on the root element.
+  </PropsTable.Row>
+</PropsTable>
+```
+
+For two exported components in one doc (e.g. `DebugGrid` and `DebugSurface`), use `title` on each table: `<PropsTable title="DebugGrid">`.
+
+### Manual install steps (`<Steps>` / `<Step>`)
+
+`<Step>` renders an `<h3>`. In MDX, put a **blank line** after `<Steps>`, after each `</Step>`, and before fenced code blocks. Otherwise MDX wraps steps in `<p>` and you get invalid HTML (`<p>` cannot contain `<h3>`) and hydration errors.
+
+````mdx
+<Steps>
+
+<Step>Install dependencies</Step>
+
+```bash
+npm install lucide-react
+```
+
+<Step>Run the following command</Step>
+
+Your prose here…
+
+</Steps>
+````
+
 ## Proposing pull requests
 
 - **Making changes**: implement your bug fix or feature and write stories to cover different use cases. Then commit your changes, push your bug fix/feature branch to the origin (your forked repo) and open a pull request to the upstream (the repository you originally forked)‘s main branch.
diff --git a/content/docs/widget/alarm-clock.mdx b/content/docs/widget/alarm-clock.mdx
index 71d96111..ca02f999 100644
--- a/content/docs/widget/alarm-clock.mdx
+++ b/content/docs/widget/alarm-clock.mdx
@@ -1,11 +1,15 @@
 ---
 title: Alarm Clock
-description: It is a alarm clock
+description: Toggle one or two alarms on a compact card — built for a morning routine glance.
 labels: ["requires interaction", "toggle"]
 author: Sumingurung9
 ---
 
-<ComponentPreview name="widget-alarm-clock--primary" />
+<ComponentPreview name="widget-alarm-clock--weekday-routine" />
+
+## How it works
+
+Each entry in `alarms` needs `time`, `schedule`, and a stable `id` for toggle state. `defaultEnabledIds` sets which alarms start on. The list is capped at two rows so the tile stays readable; add more alarms in your app screen, not on the widget.
 
 ## Installation
 
diff --git a/content/docs/widget/calendar-event.mdx b/content/docs/widget/calendar-event.mdx
index 4f97a524..58349471 100644
--- a/content/docs/widget/calendar-event.mdx
+++ b/content/docs/widget/calendar-event.mdx
@@ -1,10 +1,23 @@
 ---
 title: Calendar event
-description: Calendar event widget
+description: Show today’s date plus the next events — built for a calendar home-screen widget.
 author: Sumin Gurung
 ---
 
-<ComponentPreview name="widget-calendar-event--primary" />
+<ComponentPreview name="widget-calendar-event--workday-glance" />
+
+## How it works
+
+Pass an `events` array with `title`, `time`, and optional `variant` (`violet`, `cyan`, `emerald`, `amber`, `rose`) for chip colors. `maxVisible` controls how many rows fit before a “+N more” footer. Override `date` when you are not showing “today”.
+
+```tsx
+<CalendarEvent
+  events={[
+    { title: "Design critique", time: "10:00 – 10:45", variant: "violet" },
+    { title: "Lunch", time: "12:30 – 1:15", variant: "cyan" },
+  ]}
+/>
+```
 
 ## Installation
 
@@ -15,6 +28,7 @@ author: Sumin Gurung
 ### Manual
 
 <Steps>
+
 <Step>Run the following command</Step>
 
 It will create a new file called `calendar-event.tsx` inside the `components/animata/widget` directory.
diff --git a/content/docs/widget/calendar-widget.mdx b/content/docs/widget/calendar-widget.mdx
index b1e34200..523580b3 100644
--- a/content/docs/widget/calendar-widget.mdx
+++ b/content/docs/widget/calendar-widget.mdx
@@ -2,6 +2,7 @@
 title: Calendar Widget
 description: calendar widget is calender like widget with smooth animations and cool effects
 author: anshu_code
+published: false
 ---
 
 <ComponentPreview name="widget-calendar-widget--primary" />
diff --git a/content/docs/widget/delivery-card.mdx b/content/docs/widget/delivery-card.mdx
index fcf028b0..ba76e5ef 100644
--- a/content/docs/widget/delivery-card.mdx
+++ b/content/docs/widget/delivery-card.mdx
@@ -1,10 +1,14 @@
 ---
 title: Delivery Card
-description: This card helps user to track their orders.
+description: Show delivery ETA, status, and route progress on a single home-screen tile.
 author: sanjaya22780
 ---
 
-<ComponentPreview name="widget-delivery-card--primary" />
+<ComponentPreview name="widget-delivery-card--out-for-delivery" />
+
+## How it works
+
+Pass `progress` (0–100), `arrivalTime`, `location`, and `timeAgo` from your order API. Progress drives the truck marker along a simple bar. Set `simulateProgress` only in demos — it cycles progress on an interval so Storybook feels alive without surprising production embeds.
 
 ## Installation
 
@@ -15,6 +19,7 @@ author: sanjaya22780
 ### Manual
 
 <Steps>
+
 <Step>Install dependencies</Step>
 
 ```bash
diff --git a/content/docs/widget/index.mdx b/content/docs/widget/index.mdx
index a438b656..b9e7c5e0 100644
--- a/content/docs/widget/index.mdx
+++ b/content/docs/widget/index.mdx
@@ -14,6 +14,7 @@ import DeliveryCard from "@/animata/widget/delivery-card";
 import DirectionCard from "@/animata/widget/direction-card";
 import ExpenseTracker from "@/animata/widget/expense-tracker";
 import FlightWidget from "@/animata/widget/flight-widget";
+import FundWidget from "@/animata/widget/fund-widget";
 import LiveScore from "@/animata/widget/live-score";
 import MobileDetail from "@/animata/widget/mobile-detail";
 import MusicWidget from "@/animata/widget/music-widget";
@@ -100,6 +101,14 @@ import WeeklyProgress from "@/animata/widget/weekly-progress";
 
   </ComponentListItem>
 
+  <ComponentListItem copyId="fund-widget">
+    <FundWidget />
+    ```tsx file=<rootDir>/animata/widget/fund-widget.tsx copyId="fund-widget"
+
+    ````
+
+  </ComponentListItem>
+
   <ComponentListItem copyId="mobile-detail">
     <MobileDetail />
     ```tsx file=<rootDir>/animata/widget/mobile-detail.tsx copyId="mobile-detail"
diff --git a/content/docs/widget/music-stack-interaction.mdx b/content/docs/widget/music-stack-interaction.mdx
index 4fbaf5c0..6f474398 100644
--- a/content/docs/widget/music-stack-interaction.mdx
+++ b/content/docs/widget/music-stack-interaction.mdx
@@ -2,6 +2,7 @@
 title: Music Stack Interaction
 description: widget for Music stack and unstacking
 author: Mahlawat2001
+published: false
 ---
 
 <ComponentPreview name="widget-music-stack-interaction--primary" />
diff --git a/content/docs/widget/reminder.mdx b/content/docs/widget/reminder.mdx
index 90b9127c..af68d39b 100644
--- a/content/docs/widget/reminder.mdx
+++ b/content/docs/widget/reminder.mdx
@@ -1,10 +1,14 @@
 ---
 title: Reminder
-description: A reminder widget shows notifications for important tasks
+description: Glance at open tasks by list and see what is coming up next.
 author: ll4xmii
 ---
 
-<ComponentPreview name="widget-reminder--primary" />
+<ComponentPreview name="widget-reminder--standup-in-30" />
+
+## How it works
+
+The card is a fixed `size-52` tile. Pass `buckets` for the two summary counts (work, home, or any labels you define) and `nextLabel` for the single line people read first — usually the next meeting or errand. Styling stays in your story or app; the primitive only handles layout.
 
 ## Installation
 
@@ -15,6 +19,7 @@ author: ll4xmii
 ### Manual
 
 <Steps>
+
 <Step>Run the following command</Step>
 
 It will create a new file called `reminder.tsx` inside the `components/animata/widget` directory.
diff --git a/content/docs/widget/team-clock.mdx b/content/docs/widget/team-clock.mdx
index 44f0cdb2..0bd78371 100644
--- a/content/docs/widget/team-clock.mdx
+++ b/content/docs/widget/team-clock.mdx
@@ -2,6 +2,7 @@
 title: Team Clock
 description: A customizable, animated clock displaying multiple time zones for remote teams.
 author: arjuncodess
+published: false
 ---
 
 <ComponentPreview name="widget-team-clock--primary" />
diff --git a/content/docs/widget/video-chat.mdx b/content/docs/widget/video-chat.mdx
index 3409013f..a640c438 100644
--- a/content/docs/widget/video-chat.mdx
+++ b/content/docs/widget/video-chat.mdx
@@ -3,6 +3,7 @@ title: Video Chat
 description: Video chat in real-time
 labels: ["requires interaction", "click"]
 author: AashishKatila
+published: false
 ---
 
 <ComponentPreview name="widget-video-chat--primary" />
diff --git a/content/docs/widget/vpn-widget.mdx b/content/docs/widget/vpn-widget.mdx
index ef0a6f27..b376c409 100644
--- a/content/docs/widget/vpn-widget.mdx
+++ b/content/docs/widget/vpn-widget.mdx
@@ -1,10 +1,14 @@
 ---
 title: VPN Connection
-description: Shows the Vpn Connectivity
+description: See server, speed, and connection status at a glance — with a slide-to-connect control.
 labels: ["requires interaction", "click"]
 ---
 
-<ComponentPreview name="widget-vpn-widget--primary" />
+<ComponentPreview name="widget-vpn-widget--connected" />
+
+## How it works
+
+`serverName`, `latency`, and `downloadMbps` are display-only. Connection state is uncontrolled (`defaultConnected`) or controlled (`connected` + `onConnectedChange`). The toggle is a real `role="switch"` button with a 44px hit area, not a hover-only chip.
 
 ## Installation
 
@@ -15,10 +19,13 @@ labels: ["requires interaction", "click"]
 ### Manual
 
 <Steps>
+
 <Step>Install dependencies</Step>
+
 ```bash
 npm install lucide-react
 ```
+
 <Step>Run the following command</Step>
 
 It will create a new file called `vpn-widget.tsx` inside the `components/animata/widget` directory.
diff --git a/content/docs/widget/water-tracker.mdx b/content/docs/widget/water-tracker.mdx
index 05f59f17..55d72c6d 100644
--- a/content/docs/widget/water-tracker.mdx
+++ b/content/docs/widget/water-tracker.mdx
@@ -1,11 +1,15 @@
 ---
 title: Water Tracker
-description: Water tracker
+description: Track daily water intake with a glanceable fill bar and one-tap top-ups.
 labels: ["requires interaction", "click"]
 author: Sumingurung9
 ---
 
-<ComponentPreview name="widget-water-tracker--primary" />
+<ComponentPreview name="widget-water-tracker--morning-start" />
+
+## How it works
+
+`dailyGoal` and `sipMl` set the target and increment size. Use `defaultIntake` for an uncontrolled demo, or `intake` with `onIntakeChange` when your app owns hydration state. The right edge is a CSS height transition — no chart library — so the tile stays lightweight for bento grids.
 
 ## Installation
 
@@ -16,6 +20,7 @@ author: Sumingurung9
 ### Manual
 
 <Steps>
+
 <Step>Install dependencies</Step>
 
 ```bash
diff --git a/content/docs/widget/weather-card.mdx b/content/docs/widget/weather-card.mdx
index 1dcf1bff..d1a99837 100644
--- a/content/docs/widget/weather-card.mdx
+++ b/content/docs/widget/weather-card.mdx
@@ -1,10 +1,14 @@
 ---
 title: Weather Card
-description: A cool weather widget
+description: Current temperature, feels-like, and today’s high/low for any city.
 author: AdashBaral
 ---
 
-<ComponentPreview name="widget-weather-card--primary" />
+<ComponentPreview name="widget-weather-card--tokyo-morning" />
+
+## How it works
+
+All content is props — `city`, `temperature`, `feelsLike`, `high`, `low` — wired to your weather API in the parent. Typography uses three levels: city label, hero degree, and footer hi/lo. The card uses theme tokens so light and dark modes stay legible without custom hex per theme.
 
 ## Installation
 
@@ -17,7 +21,10 @@ author: AdashBaral
 <Steps>
 
 <Step>Install dependencies</Step>
-```bash npm install lucide-react ```
+
+```bash
+npm install lucide-react
+```
 
 <Step>Run the following command</Step>
 
diff --git a/hooks/use-mobile.tsx b/hooks/use-mobile.tsx
new file mode 100644
index 00000000..502fd323
--- /dev/null
+++ b/hooks/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}
diff --git a/lib/inline-code.ts b/lib/inline-code.ts
index 1421bc23..01b775bd 100644
--- a/lib/inline-code.ts
+++ b/lib/inline-code.ts
@@ -17,8 +17,8 @@ const inlineCodeDark = {
   boxShadow: "inset 0 1px 0 0 hsl(0 0% 100% / 0.05), 0 1px 2px hsl(0 0% 0% / 0.34)",
 } as const;
 
-/** Keep tokens on one line — asymmetric pad + trailing margin for prose gaps. */
-const inlineCodeWhitespaceClasses = "whitespace-nowrap ms-[0.06em] me-[0.32em]";
+/** Keep inline code on one line. */
+const inlineCodeWhitespaceClasses = "whitespace-nowrap";
 
 /** Rich inline chip — gradient fill, hairline border, inset highlight. */
 export const inlineCodeClassName = cn(
diff --git a/package.json b/package.json
index a6ae9b3a..7f2ae44b 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "lint": "biome check .",
     "lint:fix": "biome check --fix .",
     "validate:demos": "node ./scripts/validate-demo-registry.js",
+    "validate:registry": "node ./scripts/validate-registry-install.js",
+    "validate:registry:build": "node ./scripts/validate-registry-install.js --build",
     "format": "biome format --write .",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build -o public/preview",
@@ -53,7 +55,7 @@
     "lucide-react": "^0.475.0",
     "mdast-util-toc": "^7.1.0",
     "motion": "^12.38.0",
-    "next": "^16.1.5",
+    "next": "^16.2.6",
     "next-mdx-remote": "^6.0.0",
     "next-themes": "^0.4.6",
     "nuqs": "^2.8.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 31a1ea7e..5da95fdd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -111,8 +111,8 @@ importers:
         specifier: ^12.38.0
         version: 12.38.0(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       next:
-        specifier: ^16.1.5
-        version: 16.2.4(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+        specifier: ^16.2.6
+        version: 16.2.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       next-mdx-remote:
         specifier: ^6.0.0
         version: 6.0.0(@types/react@19.2.14)(react@19.2.5)
@@ -121,7 +121,7 @@ importers:
         version: 0.4.6(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       nuqs:
         specifier: ^2.8.9
-        version: 2.8.9(next@16.2.4(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react@19.2.5)
+        version: 2.8.9(next@16.2.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react@19.2.5)
       ora:
         specifier: ^8.0.1
         version: 8.2.0
@@ -209,7 +209,7 @@ importers:
         version: 10.3.5(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))
       '@storybook/nextjs':
         specifier: ^10.2.15
-        version: 10.3.5(esbuild@0.17.19)(next@16.2.4(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(type-fest@2.19.0)(typescript@5.9.3)(webpack-hot-middleware@2.26.1)(webpack@5.106.2(esbuild@0.17.19))
+        version: 10.3.5(esbuild@0.17.19)(next@16.2.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(type-fest@2.19.0)(typescript@5.9.3)(webpack-hot-middleware@2.26.1)(webpack@5.106.2(esbuild@0.17.19))
       '@storybook/react':
         specifier: ^10.2.15
         version: 10.3.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(typescript@5.9.3)
@@ -281,6 +281,10 @@ packages:
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/code-frame@7.29.7':
+    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/compat-data@7.29.0':
     resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
     engines: {node: '>=6.9.0'}
@@ -368,6 +372,10 @@ packages:
     resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-option@7.27.1':
     resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
     engines: {node: '>=6.9.0'}
@@ -830,6 +838,10 @@ packages:
     resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.28.6':
     resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
     engines: {node: '>=6.9.0'}
@@ -1804,57 +1816,57 @@ packages:
       '@types/react': '>=16'
       react: '>=16'
 
-  '@next/env@16.2.4':
-    resolution: {integrity: sha512-dKkkOzOSwFYe5RX6y26fZgkSpVAlIOJKQHIiydQcrWH6y/97+RceSOAdjZ14Qa3zLduVUy0TXcn+EiM6t4rPgw==}
+  '@next/env@16.2.6':
+    resolution: {integrity: sha512-gd8HoHN4ufj73WmR3JmVolrpJR47ILK6LouP5xElPglaVxir6e1a7VzvTvDWkOoPXT9rkkTzyCxBu4yeZfZwcw==}
 
-  '@next/swc-darwin-arm64@16.2.4':
-    resolution: {integrity: sha512-OXTFFox5EKN1Ym08vfrz+OXxmCcEjT4SFMbNRsWZE99dMqt2Kcusl5MqPXcW232RYkMLQTy0hqgAMEsfEd/l2A==}
+  '@next/swc-darwin-arm64@16.2.6':
+    resolution: {integrity: sha512-ZJGkkcNfYgrrMkqOdZ7zoLa1TOy0qpcMfk/z4Mh/FKUz40gVO+HNQWqmLxf67Z5WB64DRp0dhEbyHfel+6sJUg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@16.2.4':
-    resolution: {integrity: sha512-XhpVnUfmYWvD3YrXu55XdcAkQtOnvaI6wtQa8fuF5fGoKoxIUZ0kWPtcOfqJEWngFF/lOS9l3+O9CcownhiQxQ==}
+  '@next/swc-darwin-x64@16.2.6':
+    resolution: {integrity: sha512-v/YLBHIY132Ced3puBJ7YJKw1lqsCrgcNo2aRJlCEyQrrCeRJlvGlnmxhPxNQI3KE3N1DN5r9TPNPvka3nq5RQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@16.2.4':
-    resolution: {integrity: sha512-Mx/tjlNA3G8kg14QvuGAJ4xBwPk1tUHq56JxZ8CXnZwz1Etz714soCEzGQQzVMz4bEnGPowzkV6Xrp6wAkEWOQ==}
+  '@next/swc-linux-arm64-gnu@16.2.6':
+    resolution: {integrity: sha512-RPOvqlYBbcQjkz9VQQDZ2T2bARIjXZV1KFlt+V2Mr6SW/e4I9fcKsaA0hdyf2FHoTlsV2xnBd5Y912rP/1Ce6w==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@next/swc-linux-arm64-musl@16.2.4':
-    resolution: {integrity: sha512-iVMMp14514u7Nup2umQS03nT/bN9HurK8ufylC3FZNykrwjtx7V1A7+4kvhbDSCeonTVqV3Txnv0Lu+m2oDXNg==}
+  '@next/swc-linux-arm64-musl@16.2.6':
+    resolution: {integrity: sha512-URUTu1+dMkxJsPFgm+OeEvq9wf5sujw0EvgYy80TDGHTSLTnIHeqb0Eu8A3sC95IRgjejQL+kC4mw+4yPxiAXA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@next/swc-linux-x64-gnu@16.2.4':
-    resolution: {integrity: sha512-EZOvm1aQWgnI/N/xcWOlnS3RQBk0VtVav5Zo7n4p0A7UKyTDx047k8opDbXgBpHl4CulRqRfbw3QrX2w5UOXMQ==}
+  '@next/swc-linux-x64-gnu@16.2.6':
+    resolution: {integrity: sha512-DOj182mPV8G3UkrayLoREM5YEYI+Dk5wv7Ox9xl1fFibAELEsFD0lDPfHIeILlutMMfdyhlzYPELG3peuKaurw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@next/swc-linux-x64-musl@16.2.4':
-    resolution: {integrity: sha512-h9FxsngCm9cTBf71AR4fGznDEDx1hS7+kSEiIRjq5kO1oXWm07DxVGZjCvk0SGx7TSjlUqhI8oOyz7NfwAdPoA==}
+  '@next/swc-linux-x64-musl@16.2.6':
+    resolution: {integrity: sha512-HKQ5SP/V/ub73UvF7n/zeJlxk2kLmtL7Wzrg4WfmkjmNos5onJ2tKu7yZOPdL18A6Svfn3max29ym+ry7NkK4g==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@next/swc-win32-arm64-msvc@16.2.4':
-    resolution: {integrity: sha512-3NdJV5OXMSOeJYijX+bjaLge3mJBlh4ybydbT4GFoB/2hAojWHtMhl3CYlYoMrjPuodp0nzFVi4Tj2+WaMg+Ow==}
+  '@next/swc-win32-arm64-msvc@16.2.6':
+    resolution: {integrity: sha512-LZXpTlPyS5v7HhSmnvsLGP3iIYgYOBnc8r8ArlT55sGHV89bR2HlDdBjWQ+PY6SJMmk8TuVGFuxalnP3k/0Dwg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@16.2.4':
-    resolution: {integrity: sha512-kMVGgsqhO5YTYODD9IPGGhA6iprWidQckK3LmPeW08PIFENRmgfb4MjXHO+p//d+ts2rpjvK5gXWzXSMrPl9cw==}
+  '@next/swc-win32-x64-msvc@16.2.6':
+    resolution: {integrity: sha512-F0+4i0h9J6C4eE3EAPWsoCk7UW/dbzOjyzxY0qnDUOYFu6FFmdZ6l97/XdV3/Nz3VYyO7UWjyEJUXkGqcoXfMA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -2693,7 +2705,7 @@ packages:
 
   '@tsparticles/basic@3.9.1':
     resolution: {integrity: sha512-ijr2dHMx0IQHqhKW3qA8tfwrR2XYbbWYdaJMQuBo2CkwBVIhZ76U+H20Y492j/NXpd1FUnt2aC0l4CEVGVGdeQ==}
-    deprecated: tsParticles v4 is out, please upgrade for better performances and more features
+    deprecated: Please update to version 4.1.1
 
   '@tsparticles/engine@3.9.1':
     resolution: {integrity: sha512-DpdgAhWMZ3Eh2gyxik8FXS6BKZ8vyea+Eu5BC4epsahqTGY9V3JGGJcXC6lRJx6cPMAx1A0FaQAojPF3v6rkmQ==}
@@ -3232,8 +3244,8 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  baseline-browser-mapping@2.10.21:
-    resolution: {integrity: sha512-Q+rUQ7Uz8AHM7DEaNdwvfFCTq7a43lNTzuS94eiWqwyxfV/wJv+oUivef51T91mmRY4d4A1u9rcSvkeufCVXlA==}
+  baseline-browser-mapping@2.10.33:
+    resolution: {integrity: sha512-bA6+tcSLpz2tIEdDXZPpPTIuxBcC4+w6SieaYyfigIa4h8GlFxbA17v22Vx3JUtuZQj9SgOsnbK+aTBzyDyEuw==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
@@ -3322,8 +3334,8 @@ packages:
   camel-case@4.1.2:
     resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
 
-  caniuse-lite@1.0.30001790:
-    resolution: {integrity: sha512-bOoxfJPyYo+ds6W0YfptaCWbFnJYjh2Y1Eow5lRv+vI2u8ganPZqNm1JwNh0t2ELQCqIWg4B3dWEusgAmsoyOw==}
+  caniuse-lite@1.0.30001793:
+    resolution: {integrity: sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==}
 
   case-sensitive-paths-webpack-plugin@2.4.0:
     resolution: {integrity: sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==}
@@ -4862,8 +4874,8 @@ packages:
       react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
       react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
-  next@16.2.4:
-    resolution: {integrity: sha512-kPvz56wF5frc+FxlHI5qnklCzbq53HTwORaWBGdT0vNoKh1Aya9XC8aPauH4NJxqtzbWsS5mAbctm4cr+EkQ2Q==}
+  next@16.2.6:
+    resolution: {integrity: sha512-qOVgKJg1+At15NpeUP+eJgCHvTCgXsogweq87Ri/Ix7PkqQHg4sdaXmSFqKlgaIXE4kW0g25LE68W87UANlHtw==}
     engines: {node: '>=20.9.0'}
     hasBin: true
     peerDependencies:
@@ -5516,6 +5528,11 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  semver@7.8.1:
+    resolution: {integrity: sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -6189,6 +6206,12 @@ snapshots:
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
+  '@babel/code-frame@7.29.7':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.29.7
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
   '@babel/compat-data@7.29.0': {}
 
   '@babel/core@7.29.0':
@@ -6322,6 +6345,8 @@ snapshots:
 
   '@babel/helper-validator-identifier@7.28.5': {}
 
+  '@babel/helper-validator-identifier@7.29.7': {}
+
   '@babel/helper-validator-option@7.27.1': {}
 
   '@babel/helper-wrap-function@7.28.6':
@@ -6909,6 +6934,8 @@ snapshots:
 
   '@babel/runtime@7.29.2': {}
 
+  '@babel/runtime@7.29.7': {}
+
   '@babel/template@7.28.6':
     dependencies:
       '@babel/code-frame': 7.29.0
@@ -7608,30 +7635,30 @@ snapshots:
       '@types/react': 19.2.14
       react: 19.2.5
 
-  '@next/env@16.2.4': {}
+  '@next/env@16.2.6': {}
 
-  '@next/swc-darwin-arm64@16.2.4':
+  '@next/swc-darwin-arm64@16.2.6':
     optional: true
 
-  '@next/swc-darwin-x64@16.2.4':
+  '@next/swc-darwin-x64@16.2.6':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@16.2.4':
+  '@next/swc-linux-arm64-gnu@16.2.6':
     optional: true
 
-  '@next/swc-linux-arm64-musl@16.2.4':
+  '@next/swc-linux-arm64-musl@16.2.6':
     optional: true
 
-  '@next/swc-linux-x64-gnu@16.2.4':
+  '@next/swc-linux-x64-gnu@16.2.6':
     optional: true
 
-  '@next/swc-linux-x64-musl@16.2.4':
+  '@next/swc-linux-x64-musl@16.2.6':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@16.2.4':
+  '@next/swc-win32-arm64-msvc@16.2.6':
     optional: true
 
-  '@next/swc-win32-x64-msvc@16.2.4':
+  '@next/swc-win32-x64-msvc@16.2.6':
     optional: true
 
   '@opentelemetry/api-logs@0.208.0':
@@ -8311,7 +8338,7 @@ snapshots:
       react: 19.2.5
       react-dom: 19.2.5(react@19.2.5)
 
-  '@storybook/nextjs@10.3.5(esbuild@0.17.19)(next@16.2.4(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(type-fest@2.19.0)(typescript@5.9.3)(webpack-hot-middleware@2.26.1)(webpack@5.106.2(esbuild@0.17.19))':
+  '@storybook/nextjs@10.3.5(esbuild@0.17.19)(next@16.2.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(storybook@10.3.5(@testing-library/dom@10.4.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(type-fest@2.19.0)(typescript@5.9.3)(webpack-hot-middleware@2.26.1)(webpack@5.106.2(esbuild@0.17.19))':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.29.0)
@@ -8335,7 +8362,7 @@ snapshots:
       css-loader: 6.11.0(webpack@5.106.2(esbuild@0.17.19))
       image-size: 2.0.2
       loader-utils: 3.3.1
-      next: 16.2.4(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      next: 16.2.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       node-polyfill-webpack-plugin: 2.0.1(webpack@5.106.2(esbuild@0.17.19))
       postcss: 8.5.15
       postcss-loader: 8.2.1(postcss@8.5.15)(typescript@5.9.3)(webpack@5.106.2(esbuild@0.17.19))
@@ -8508,8 +8535,8 @@ snapshots:
 
   '@testing-library/dom@10.4.1':
     dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/runtime': 7.29.2
+      '@babel/code-frame': 7.29.7
+      '@babel/runtime': 7.29.7
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
       dom-accessibility-api: 0.5.16
@@ -9196,7 +9223,7 @@ snapshots:
 
   base64-js@1.5.1: {}
 
-  baseline-browser-mapping@2.10.21: {}
+  baseline-browser-mapping@2.10.33: {}
 
   big.js@5.2.2: {}
 
@@ -9265,8 +9292,8 @@ snapshots:
 
   browserslist@4.28.2:
     dependencies:
-      baseline-browser-mapping: 2.10.21
-      caniuse-lite: 1.0.30001790
+      baseline-browser-mapping: 2.10.33
+      caniuse-lite: 1.0.30001793
       electron-to-chromium: 1.5.344
       node-releases: 2.0.38
       update-browserslist-db: 1.2.3(browserslist@4.28.2)
@@ -9310,7 +9337,7 @@ snapshots:
       pascal-case: 3.1.2
       tslib: 2.8.1
 
-  caniuse-lite@1.0.30001790: {}
+  caniuse-lite@1.0.30001793: {}
 
   case-sensitive-paths-webpack-plugin@2.4.0: {}
 
@@ -11201,25 +11228,25 @@ snapshots:
       react: 19.2.5
       react-dom: 19.2.5(react@19.2.5)
 
-  next@16.2.4(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5):
+  next@16.2.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5):
     dependencies:
-      '@next/env': 16.2.4
+      '@next/env': 16.2.6
       '@swc/helpers': 0.5.15
-      baseline-browser-mapping: 2.10.21
-      caniuse-lite: 1.0.30001790
+      baseline-browser-mapping: 2.10.33
+      caniuse-lite: 1.0.30001793
       postcss: 8.4.31
       react: 19.2.5
       react-dom: 19.2.5(react@19.2.5)
       styled-jsx: 5.1.6(@babel/core@7.29.0)(react@19.2.5)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 16.2.4
-      '@next/swc-darwin-x64': 16.2.4
-      '@next/swc-linux-arm64-gnu': 16.2.4
-      '@next/swc-linux-arm64-musl': 16.2.4
-      '@next/swc-linux-x64-gnu': 16.2.4
-      '@next/swc-linux-x64-musl': 16.2.4
-      '@next/swc-win32-arm64-msvc': 16.2.4
-      '@next/swc-win32-x64-msvc': 16.2.4
+      '@next/swc-darwin-arm64': 16.2.6
+      '@next/swc-darwin-x64': 16.2.6
+      '@next/swc-linux-arm64-gnu': 16.2.6
+      '@next/swc-linux-arm64-musl': 16.2.6
+      '@next/swc-linux-x64-gnu': 16.2.6
+      '@next/swc-linux-x64-musl': 16.2.6
+      '@next/swc-win32-arm64-msvc': 16.2.6
+      '@next/swc-win32-x64-msvc': 16.2.6
       '@opentelemetry/api': 1.9.1
       sharp: 0.34.5
     transitivePeerDependencies:
@@ -11272,12 +11299,12 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  nuqs@2.8.9(next@16.2.4(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react@19.2.5):
+  nuqs@2.8.9(next@16.2.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react@19.2.5):
     dependencies:
       '@standard-schema/spec': 1.0.0
       react: 19.2.5
     optionalDependencies:
-      next: 16.2.4(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      next: 16.2.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
 
   object-inspect@1.13.4: {}
 
@@ -11985,6 +12012,8 @@ snapshots:
 
   semver@7.7.4: {}
 
+  semver@7.8.1: {}
+
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
@@ -12033,7 +12062,7 @@ snapshots:
     dependencies:
       '@img/colour': 1.1.0
       detect-libc: 2.1.2
-      semver: 7.7.4
+      semver: 7.8.1
     optionalDependencies:
       '@img/sharp-darwin-arm64': 0.34.5
       '@img/sharp-darwin-x64': 0.34.5
diff --git a/scripts/build-docs-markdown.js b/scripts/build-docs-markdown.js
index f91ec5ba..4db61901 100644
--- a/scripts/build-docs-markdown.js
+++ b/scripts/build-docs-markdown.js
@@ -59,8 +59,55 @@ function resolveSourceBlocks(mdx) {
   });
 }
 
+function readJsxAttr(attrs, name) {
+  const quoted = attrs.match(new RegExp(`\\b${name}=(?:"([^"]*)"|'([^']*)')`));
+  if (quoted) return quoted[1] ?? quoted[2] ?? "";
+  if (new RegExp(`\\b${name}\\b`).test(attrs) && !attrs.includes(`${name}=`)) return true;
+  return undefined;
+}
+
+function escapeTableCell(value) {
+  return String(value).replace(/\\/g, "\\\\").replace(/\|/g, "\\|").replace(/\n+/g, " ").trim();
+}
+
+function serializePropsTableBlock(_match, title, body) {
+  const rows = [];
+  const rowRe = /<PropsTable\.Row\s+([^>]+)>\s*([\s\S]*?)\s*<\/PropsTable\.Row>/g;
+  for (const rowMatch of body.matchAll(rowRe)) {
+    const attrs = rowMatch[1];
+    const description = rowMatch[2].trim();
+    const prop = readJsxAttr(attrs, "prop");
+    const type = readJsxAttr(attrs, "type");
+    const required = readJsxAttr(attrs, "required") === true;
+    const defaultValue = readJsxAttr(attrs, "default");
+
+    let defaultCell = "—";
+    if (required) defaultCell = "Required";
+    else if (defaultValue !== undefined && defaultValue !== "")
+      defaultCell = `\`${escapeTableCell(defaultValue)}\``;
+
+    rows.push(
+      `| \`${escapeTableCell(prop)}\` | \`${escapeTableCell(type)}\` | ${defaultCell} | ${escapeTableCell(description)} |`,
+    );
+  }
+
+  if (rows.length === 0) return "";
+
+  const header = title ? `### ${title}\n\n` : "";
+  return `${header}| Prop | Type | Default | Description |
+|---|---|---|---|
+${rows.join("\n")}`;
+}
+
+function serializePropsTables(mdx) {
+  return mdx.replace(
+    /<PropsTable(?:\s+title="([^"]*)")?\s*>([\s\S]*?)<\/PropsTable>/g,
+    serializePropsTableBlock,
+  );
+}
+
 function stripJsx(mdx, { siteUrl }) {
-  return mdx
+  const stripped = mdx
     .replace(/<ComponentPreview[^/>]*\/>/g, "")
     .replace(
       /<RegistryInstall\s+category="([^"]+)"\s+name="([^"]+)"\s*\/>/g,
@@ -69,7 +116,9 @@ function stripJsx(mdx, { siteUrl }) {
     .replace(/<Step>([\s\S]*?)<\/Step>/g, "**$1**")
     .replace(/<Steps>\s*/g, "")
     .replace(/\s*<\/Steps>/g, "")
-    .replace(/\{" "\}/g, " ")
+    .replace(/\{" "\}/g, " ");
+
+  return serializePropsTables(stripped)
     .replace(/\n{3,}/g, "\n\n")
     .trim();
 }
diff --git a/scripts/validate-registry-install.js b/scripts/validate-registry-install.js
new file mode 100644
index 00000000..115a9aae
--- /dev/null
+++ b/scripts/validate-registry-install.js
@@ -0,0 +1,355 @@
+import { execSync } from "node:child_process";
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+const REGISTRY_DIR = path.join(ROOT, "public", "r");
+const SITE_URL = (process.env.NEXT_PUBLIC_APP_URL || "https://animata.design").replace(/\/$/, "");
+
+/** Representative installs — one dry-run per bundle shape. */
+const INSTALL_FIXTURES = [
+  {
+    id: "simple",
+    label: "single file, no npm deps",
+    item: "preloader/split-reveal.json",
+    expectFiles: ["components/animata/preloader/split-reveal.tsx"],
+    expectDeps: [],
+  },
+  {
+    id: "doc-bundled-shapes",
+    label: "mdx bundled file refs + shape imports",
+    item: "card/card-stack.json",
+    expectFiles: [
+      "components/animata/card/card-stack.tsx",
+      "components/shapes/card-stack-mask-defs.tsx",
+    ],
+    expectDeps: ["lucide-react", "motion"],
+  },
+  {
+    id: "co-located-shared",
+    label: "co-located helper rewritten to ./shared",
+    item: "tabs/fluid-tabs.json",
+    expectFiles: ["components/animata/tabs/fluid-tabs.tsx", "components/animata/tabs/shared.ts"],
+    expectDeps: ["lucide-react", "motion"],
+  },
+  {
+    id: "bundled-hook",
+    label: "bundled hook from @/hooks import",
+    item: "image/trailing-image.json",
+    expectFiles: ["components/animata/image/trailing-image.tsx", "hooks/use-mouse-position.ts"],
+    expectDeps: ["motion"],
+  },
+  {
+    id: "registry-dependencies",
+    label: "registryDependencies resolve to sibling items",
+    item: "card/card-spread.json",
+    localizeDeps: true,
+    expectFiles: [
+      "components/animata/card/card-spread.tsx",
+      "components/animata/widget/notes.tsx",
+      "components/animata/widget/shopping-list.tsx",
+    ],
+    expectDeps: [],
+  },
+];
+
+let failed = false;
+
+function error(message) {
+  console.error(`[registry-install] ${message}`);
+  failed = true;
+}
+
+function info(message) {
+  console.log(`[registry-install] ${message}`);
+}
+
+function walkRegistryJson(dir, acc = []) {
+  if (!fs.existsSync(dir)) return acc;
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      walkRegistryJson(full, acc);
+    } else if (entry.isFile() && entry.name.endsWith(".json")) {
+      acc.push(full);
+    }
+  }
+  return acc;
+}
+
+function registryUrlToLocalPath(url) {
+  const prefix = `${SITE_URL}/r/`;
+  if (!url.startsWith(prefix)) return null;
+  return path.join(REGISTRY_DIR, url.slice(prefix.length));
+}
+
+function localizeRegistryItem(itemPath) {
+  const raw = JSON.parse(fs.readFileSync(itemPath, "utf8"));
+  if (!raw.registryDependencies?.length) return itemPath;
+
+  const localized = structuredClone(raw);
+  localized.registryDependencies = raw.registryDependencies.map((dep) => {
+    const local = registryUrlToLocalPath(dep);
+    if (!local) return dep;
+    if (!fs.existsSync(local)) {
+      error(
+        `missing local registry dependency for ${path.relative(REGISTRY_DIR, itemPath)}: ${dep}`,
+      );
+      return dep;
+    }
+    return local;
+  });
+
+  const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "animata-registry-"));
+  const outPath = path.join(tmpDir, path.basename(itemPath));
+  fs.writeFileSync(outPath, `${JSON.stringify(localized, null, 2)}\n`);
+  return outPath;
+}
+
+function validateRegistryJsonStatic(jsonPath) {
+  const rel = path.relative(REGISTRY_DIR, jsonPath);
+  let item;
+
+  try {
+    item = JSON.parse(fs.readFileSync(jsonPath, "utf8"));
+  } catch {
+    error(`${rel}: invalid JSON`);
+    return;
+  }
+
+  if (!item.name || !item.type) {
+    error(`${rel}: missing name or type`);
+  }
+
+  if (!Array.isArray(item.files) || item.files.length === 0) {
+    error(`${rel}: files array is empty`);
+    return;
+  }
+
+  const paths = new Set();
+  for (const file of item.files) {
+    if (
+      !file.path ||
+      !file.type ||
+      typeof file.content !== "string" ||
+      file.content.trim() === ""
+    ) {
+      error(`${rel}: file entry missing path, type, or content`);
+      continue;
+    }
+    if (paths.has(file.path)) {
+      error(`${rel}: duplicate file path ${file.path}`);
+    }
+    paths.add(file.path);
+  }
+
+  for (const dep of item.registryDependencies ?? []) {
+    const local = registryUrlToLocalPath(dep);
+    if (local && !fs.existsSync(local)) {
+      error(`${rel}: registryDependency not found locally — ${dep}`);
+    }
+  }
+}
+
+function createShadcnWorkspace() {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), "animata-shadcn-"));
+
+  fs.writeFileSync(
+    path.join(dir, "package.json"),
+    `${JSON.stringify({ name: "animata-registry-install-test", private: true, type: "module", version: "0.0.0" }, null, 2)}\n`,
+  );
+
+  fs.writeFileSync(
+    path.join(dir, "tsconfig.json"),
+    `${JSON.stringify(
+      {
+        compilerOptions: {
+          target: "ES2017",
+          lib: ["dom", "dom.iterable", "esnext"],
+          allowJs: true,
+          skipLibCheck: true,
+          strict: true,
+          noEmit: true,
+          esModuleInterop: true,
+          module: "esnext",
+          moduleResolution: "bundler",
+          jsx: "preserve",
+          paths: { "@/*": ["./*"] },
+        },
+        include: ["**/*.ts", "**/*.tsx"],
+      },
+      null,
+      2,
+    )}\n`,
+  );
+
+  fs.mkdirSync(path.join(dir, "app"), { recursive: true });
+  fs.mkdirSync(path.join(dir, "lib"), { recursive: true });
+  fs.writeFileSync(path.join(dir, "app", "globals.css"), '@import "tailwindcss";\n');
+  fs.writeFileSync(
+    path.join(dir, "lib", "utils.ts"),
+    'export function cn(...inputs: Array<string | false | null | undefined>) {\n  return inputs.filter(Boolean).join(" ");\n}\n',
+  );
+
+  fs.writeFileSync(
+    path.join(dir, "components.json"),
+    `${JSON.stringify(
+      {
+        $schema: "https://ui.shadcn.com/schema.json",
+        style: "new-york",
+        rsc: true,
+        tsx: true,
+        tailwind: {
+          css: "app/globals.css",
+          baseColor: "stone",
+          cssVariables: true,
+          prefix: "",
+        },
+        aliases: {
+          components: "@/components",
+          utils: "@/lib/utils",
+        },
+      },
+      null,
+      2,
+    )}\n`,
+  );
+
+  return dir;
+}
+
+function parseDryRunOutput(output) {
+  const files = [];
+  const deps = [];
+  let inDeps = false;
+
+  for (const line of output.split("\n")) {
+    const fileMatch = line.match(/^│ \+ (.+?) {2}create$/);
+    if (fileMatch) {
+      files.push(fileMatch[1].trim());
+      continue;
+    }
+
+    if (line.includes("├ Dependencies")) {
+      inDeps = true;
+      continue;
+    }
+
+    if (inDeps) {
+      const depMatch = line.match(/^│ \+ (.+)$/);
+      if (depMatch) {
+        deps.push(depMatch[1].trim().split("@")[0]);
+        continue;
+      }
+      if (line.includes("├ Files") || line.includes("│  ") || line.startsWith("└")) {
+        inDeps = false;
+      }
+    }
+  }
+
+  return { files, deps };
+}
+
+function runShadcnDryRun(workspaceDir, registryItemPath) {
+  const command = `npx shadcn@latest add -y --dry-run ${JSON.stringify(registryItemPath)}`;
+
+  try {
+    const output = execSync(command, {
+      cwd: workspaceDir,
+      encoding: "utf8",
+      stdio: ["ignore", "pipe", "pipe"],
+      timeout: 120_000,
+      env: { ...process.env, CI: "true" },
+    });
+    return { ok: true, output };
+  } catch (err) {
+    const stdout = err.stdout?.toString?.() ?? "";
+    const stderr = err.stderr?.toString?.() ?? "";
+    return { ok: false, output: `${stdout}\n${stderr}`.trim() };
+  }
+}
+
+function assertFixtureInstall(fixture, workspaceDir) {
+  const itemPath = path.join(REGISTRY_DIR, fixture.item);
+  if (!fs.existsSync(itemPath)) {
+    error(`fixture ${fixture.id}: missing ${fixture.item}`);
+    return;
+  }
+
+  const installPath = fixture.localizeDeps ? localizeRegistryItem(itemPath) : itemPath;
+  const result = runShadcnDryRun(workspaceDir, installPath);
+
+  if (!result.ok) {
+    error(`fixture ${fixture.id} (${fixture.label}): shadcn dry-run failed\n${result.output}`);
+    return;
+  }
+
+  const { files, deps } = parseDryRunOutput(result.output);
+
+  for (const expected of fixture.expectFiles) {
+    if (!files.includes(expected)) {
+      error(
+        `fixture ${fixture.id}: expected file "${expected}" in dry-run output. Got: ${files.join(", ") || "(none)"}`,
+      );
+    }
+  }
+
+  for (const expectedDep of fixture.expectDeps) {
+    if (!deps.includes(expectedDep)) {
+      error(
+        `fixture ${fixture.id}: expected npm dep "${expectedDep}". Got: ${deps.join(", ") || "(none)"}`,
+      );
+    }
+  }
+
+  info(`fixture ${fixture.id} OK — ${files.length} file(s), ${deps.length} npm dep(s)`);
+}
+
+function main() {
+  if (process.argv.includes("--build")) {
+    execSync("node ./scripts/build-registry.js", { cwd: ROOT, stdio: "inherit" });
+  }
+
+  if (!fs.existsSync(REGISTRY_DIR)) {
+    error(`registry output missing at ${REGISTRY_DIR} — run node scripts/build-registry.js first`);
+    process.exit(1);
+  }
+
+  const registryFiles = walkRegistryJson(REGISTRY_DIR);
+  if (registryFiles.length === 0) {
+    error("no registry JSON files found");
+    process.exit(1);
+  }
+
+  info(`static validation — ${registryFiles.length} item(s)`);
+  for (const jsonPath of registryFiles) {
+    validateRegistryJsonStatic(jsonPath);
+  }
+
+  if (failed) {
+    process.exit(1);
+  }
+
+  info(`shadcn dry-run — ${INSTALL_FIXTURES.length} fixture(s)`);
+  const workspaceDir = createShadcnWorkspace();
+
+  try {
+    for (const fixture of INSTALL_FIXTURES) {
+      assertFixtureInstall(fixture, workspaceDir);
+    }
+  } finally {
+    fs.rmSync(workspaceDir, { recursive: true, force: true });
+  }
+
+  if (failed) {
+    process.exit(1);
+  }
+
+  info(
+    `OK — ${registryFiles.length} registry item(s), ${INSTALL_FIXTURES.length} install fixture(s)`,
+  );
+}
+
+main();