From 86e336904beedcd6e22d173ea7e624519ebb6faa Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 12:25:15 +0200
Subject: [PATCH 01/35] feat(ui): add blueprint hero illustrations

---
 apps/ui/app/page.tsx                        |  41 ++++---
 apps/ui/app/particles/page.tsx              |  39 +++++--
 apps/ui/app/particles/search-field.tsx      |  13 +--
 apps/ui/components/blueprint-drawing.tsx    |  17 +++
 apps/ui/components/page-hero.tsx            |  20 ++++
 apps/ui/components/particles-blueprint.tsx  | 120 ++++++++++++++++++++
 apps/ui/components/primitives-blueprint.tsx |  91 +++++++++++++++
 7 files changed, 298 insertions(+), 43 deletions(-)
 create mode 100644 apps/ui/components/blueprint-drawing.tsx
 create mode 100644 apps/ui/components/page-hero.tsx
 create mode 100644 apps/ui/components/particles-blueprint.tsx
 create mode 100644 apps/ui/components/primitives-blueprint.tsx

diff --git a/apps/ui/app/page.tsx b/apps/ui/app/page.tsx
index 4e706d5ba3..d561cd32c6 100644
--- a/apps/ui/app/page.tsx
+++ b/apps/ui/app/page.tsx
@@ -1,5 +1,4 @@
 import {
-  PageHeader,
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@coss/ui/shared/page-header";
@@ -18,6 +17,8 @@ import {
 } from "@/registry/default/ui/card";
 import { particles } from "@/registry/registry-particles";
 import { getCategoryThumbnail } from "@/components/category-thumbnails";
+import { PageHero } from "@/components/page-hero";
+import { PrimitivesBlueprint } from "@/components/primitives-blueprint";
 import { categories } from "@/config/categories";
 import { PAGES_NEW } from "@/lib/docs";
 
@@ -32,26 +33,24 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <>
-      <div className="container w-full">
-        <PageHeader className="max-w-2xl *:items-start *:text-left">
-          <PageHeaderHeading>
-            A new, modern UI component library built on top of Base UI.
-          </PageHeaderHeading>
-          <PageHeaderDescription>{description}</PageHeaderDescription>
-          <div className="mt-2 flex gap-2">
-            <Button render={<Link href="/docs" />} size="lg">
-              Get started
-            </Button>
-            <Button
-              render={<Link href="/particles" />}
-              size="lg"
-              variant="outline"
-            >
-              Browse {particleCount} particles
-            </Button>
-          </div>
-        </PageHeader>
-      </div>
+      <PageHero illustration={<PrimitivesBlueprint />}>
+        <PageHeaderHeading>
+          A new, modern UI component library built on top of Base UI.
+        </PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
+        <div className="mt-1 flex flex-wrap gap-2">
+          <Button render={<Link href="/docs" />} size="lg">
+            Get started
+          </Button>
+          <Button
+            render={<Link href="/particles" />}
+            size="lg"
+            variant="outline"
+          >
+            Browse {particleCount} particles
+          </Button>
+        </div>
+      </PageHero>
       <div className="relative before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-border/64">
         <div
           aria-hidden="true"
diff --git a/apps/ui/app/particles/page.tsx b/apps/ui/app/particles/page.tsx
index e6a41b197d..6dd012f26c 100644
--- a/apps/ui/app/particles/page.tsx
+++ b/apps/ui/app/particles/page.tsx
@@ -1,14 +1,17 @@
 import {
-  PageHeader,
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@coss/ui/shared/page-header";
 import type { Metadata } from "next";
+import Link from "next/link";
 import { Suspense } from "react";
+import { Button } from "@/registry/default/ui/button";
 import { isValidRegistryCategory } from "@/registry/registry-categories";
 import { particles } from "@/registry/registry-particles";
 import { ParticlesDisplay } from "./particles-display";
 import SearchContainer from "./search-container";
+import { PageHero } from "@/components/page-hero";
+import { ParticlesBlueprint } from "@/components/particles-blueprint";
 
 const particleCount = particles.length;
 
@@ -58,19 +61,31 @@ export default function Page({
   searchParams: Promise<{ tags?: string }>;
 }) {
   return (
-    <div className="container w-full">
-      <PageHeader className="*:pb-8!">
+    <>
+      <PageHero illustration={<ParticlesBlueprint />}>
         <PageHeaderHeading>Browse Particles</PageHeaderHeading>
-        <PageHeaderDescription className="max-w-2xl">
+        <PageHeaderDescription className="max-w-lg text-pretty">
           {description}
         </PageHeaderDescription>
-      </PageHeader>
-      <Suspense>
-        <SearchContainer />
-      </Suspense>
-      <Suspense>
-        <ParticlesDisplayServer searchParams={searchParams} />
-      </Suspense>
-    </div>
+        <div className="mt-1 flex flex-wrap gap-2">
+          <Button render={<Link href="#particles" />} size="lg">
+            Explore {particleCount} particles
+          </Button>
+          <Button render={<Link href="/docs" />} size="lg" variant="outline">
+            Read the docs
+          </Button>
+        </div>
+      </PageHero>
+      <div className="border-t pt-8 md:pt-12">
+        <div className="container w-full scroll-mt-24" id="particles">
+          <Suspense>
+            <SearchContainer />
+          </Suspense>
+          <Suspense>
+            <ParticlesDisplayServer searchParams={searchParams} />
+          </Suspense>
+        </div>
+      </div>
+    </>
   );
 }
diff --git a/apps/ui/app/particles/search-field.tsx b/apps/ui/app/particles/search-field.tsx
index eaa3e06730..339dc8ab24 100644
--- a/apps/ui/app/particles/search-field.tsx
+++ b/apps/ui/app/particles/search-field.tsx
@@ -3,7 +3,7 @@
 import { LabelIcon, Search01Icon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import * as React from "react";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { Index } from "@/registry/__index__";
 import {
   Combobox,
@@ -43,14 +43,7 @@ export default function SearchField({
   onItemsChange,
   items,
 }: SearchFieldProps) {
-  const [open, setOpen] = useState(selectedItems.length === 0);
-
-  // Keep popup open when no selection is made
-  useEffect(() => {
-    if (selectedItems.length === 0) {
-      setOpen(true);
-    }
-  }, [selectedItems.length]);
+  const [open, setOpen] = useState(false);
 
   const groupedItems = useMemo(() => {
     const selectedValues = selectedItems.map((item) => item.value);
@@ -170,7 +163,7 @@ export default function SearchField({
                 ))}
                 <ComboboxChipsInput
                   aria-label="Search components"
-                  autoFocus
+                  placeholder="Filter by component or category…"
                   size="lg"
                 />
               </>
diff --git a/apps/ui/components/blueprint-drawing.tsx b/apps/ui/components/blueprint-drawing.tsx
new file mode 100644
index 0000000000..1b1e0aebdf
--- /dev/null
+++ b/apps/ui/components/blueprint-drawing.tsx
@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+
+export function BlueprintDrawing({ children }: { children: ReactNode }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-auto w-full overflow-visible font-sans text-foreground [font-optical-sizing:auto] [font-synthesis:none] [font-variation-settings:'GEOM'_25]"
+      fill="none"
+      focusable="false"
+      stroke="currentColor"
+      strokeWidth="0.8"
+      viewBox="0 0 560 440"
+    >
+      {children}
+    </svg>
+  );
+}
diff --git a/apps/ui/components/page-hero.tsx b/apps/ui/components/page-hero.tsx
new file mode 100644
index 0000000000..793ed8c48c
--- /dev/null
+++ b/apps/ui/components/page-hero.tsx
@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+
+export function PageHero({
+  children,
+  illustration,
+}: {
+  children: ReactNode;
+  illustration: ReactNode;
+}) {
+  return (
+    <section className="container grid w-full items-center gap-6 py-10 md:py-14 lg:grid-cols-2 lg:gap-10 lg:py-16 xl:gap-16">
+      <div className="flex min-w-0 flex-col items-start gap-5 [font-optical-sizing:auto] [font-synthesis:none] [&_h1]:text-balance [&_h1]:text-4xl [&_h1]:leading-[1.08] [&_h1]:[font-variation-settings:'GEOM'_50] lg:[&_h1]:text-5xl xl:[&_h1]:text-[3.5rem]">
+        {children}
+      </div>
+      <div className="pointer-events-none mx-auto w-full max-w-140 select-none max-lg:max-w-112">
+        {illustration}
+      </div>
+    </section>
+  );
+}
diff --git a/apps/ui/components/particles-blueprint.tsx b/apps/ui/components/particles-blueprint.tsx
new file mode 100644
index 0000000000..46ca0b6753
--- /dev/null
+++ b/apps/ui/components/particles-blueprint.tsx
@@ -0,0 +1,120 @@
+import { BlueprintDrawing } from "./blueprint-drawing";
+
+export function ParticlesBlueprint() {
+  return (
+    <BlueprintDrawing>
+      <g opacity="0.065" strokeWidth="0.6">
+        <path d="M180 160H444M180 184H444M180 208H444M180 232H444M180 256H444M180 280H444M180 304H444M180 328H444" />
+        <path d="M204 136V352M228 136V352M252 136V352M276 136V352M300 136V352M324 136V352M348 136V352M372 136V352M396 136V352M420 136V352" />
+      </g>
+
+      <g opacity="0.27" strokeWidth="0.6">
+        <path d="M104 160H453M104 324H453M204 140V363M428 140V363" />
+        <path d="M320 88V155M428 88V155" />
+        <path d="M320 137V184M428 137V184" strokeDasharray="3 5" />
+        <path d="M302 188H443M302 232H443" strokeDasharray="3 5" />
+        <path d="M122 178V244M302 178V244" />
+        <path d="M195 151L213 169M419 315L437 333" />
+        <path d="M113 160H131M122 151V169M419 160H437M428 151V169" />
+      </g>
+
+      <g opacity="0.37" strokeWidth="0.7">
+        <path
+          d="M204 182V176A16 16 0 0 1 220 160H412A16 16 0 0 1 428 176V248M204 240V308A16 16 0 0 0 220 324H228"
+          strokeDasharray="4 5"
+        />
+        <path d="M320 184H428M320 180V188M428 180V188" />
+        <path d="M327 210H360M355 205L360 210L355 215" />
+        <path d="M374 141V168M369 163L374 168L379 163" />
+      </g>
+
+      <g opacity="0.48" strokeWidth="0.65">
+        <path d="M204 354H428M204 349V359M428 349V359" />
+        <path d="M201 357L207 351M425 357L431 351" />
+        <path d="M320 87H428M320 83V91M428 83V91" />
+        <path d="M99 188V232M95 188H103M95 232H103" />
+        <path d="M96 191L102 185M96 235L102 229" />
+      </g>
+
+      <g strokeWidth="0.95">
+        <rect
+          fill="var(--color-sidebar)"
+          height="44"
+          rx="9"
+          strokeOpacity="0.85"
+          width="180"
+          x="122"
+          y="188"
+        />
+        <rect height="20" opacity="0.78" rx="4" width="20" x="136" y="200" />
+        <path d="M142 204V216M150 204V216M140 210H152" opacity="0.68" />
+        <path d="M280 206L284 210L280 214" opacity="0.65" />
+
+        <rect
+          fill="var(--color-sidebar)"
+          height="32"
+          rx="16"
+          strokeOpacity="0.85"
+          width="108"
+          x="320"
+          y="104"
+        />
+        <path d="M334 120L337 123L343 117" opacity="0.8" />
+        <path d="M409 117L415 123M415 117L409 123" opacity="0.5" />
+
+        <path
+          d="M244 264H412A16 16 0 0 1 428 280V308A16 16 0 0 1 412 324H244A16 16 0 0 1 228 308V280A16 16 0 0 1 244 264Z"
+          fill="var(--color-sidebar)"
+          strokeOpacity="0.85"
+        />
+        <rect height="22" opacity="0.8" rx="11" width="38" x="370" y="283" />
+        <circle cx="397" cy="294" opacity="0.8" r="7" />
+      </g>
+
+      <g opacity="0.35" strokeWidth="0.6">
+        <path d="M412 300V332M404 308H436" />
+        <path d="M412 324A16 16 0 0 0 428 308" />
+        <path d="M412 308L448 344H472" />
+        <path d="M244 254V274M234 264H254" />
+        <path d="M228 274A10 10 0 0 1 238 264" />
+      </g>
+
+      <g fill="currentColor" fontSize="11" stroke="none">
+        <text opacity="0.7" x="168" y="214">
+          Workspace
+        </text>
+        <text opacity="0.7" x="352" y="124">
+          Ready
+        </text>
+        <text opacity="0.7" x="248" y="298">
+          Available
+        </text>
+      </g>
+
+      <g fill="currentColor" fontSize="10" opacity="0.5" stroke="none">
+        <text textAnchor="middle" x="374" y="78">
+          108
+        </text>
+        <text textAnchor="middle" x="316" y="371">
+          224
+        </text>
+        <text textAnchor="end" x="89" y="214">
+          44
+        </text>
+        <text x="448" y="338">
+          R16
+        </text>
+        <text x="112" y="391">
+          02 / Composition
+        </text>
+        <text textAnchor="end" x="449" y="391">
+          1 : 1
+        </text>
+      </g>
+
+      <g opacity="0.3" strokeWidth="0.6">
+        <path d="M112 373V381M108 377H116M449 373V381M445 377H453" />
+      </g>
+    </BlueprintDrawing>
+  );
+}
diff --git a/apps/ui/components/primitives-blueprint.tsx b/apps/ui/components/primitives-blueprint.tsx
new file mode 100644
index 0000000000..c213db2e12
--- /dev/null
+++ b/apps/ui/components/primitives-blueprint.tsx
@@ -0,0 +1,91 @@
+import { BlueprintDrawing } from "./blueprint-drawing";
+
+const gridCoordinates = [164, 204, 244, 284, 324, 364, 404];
+
+export function PrimitivesBlueprint() {
+  return (
+    <BlueprintDrawing>
+      <g opacity="0.09" strokeWidth="0.6">
+        {gridCoordinates.map((coordinate) => (
+          <path
+            d={`M${coordinate} 68V348 M124 ${coordinate - 80}H444`}
+            key={coordinate}
+          />
+        ))}
+      </g>
+
+      <g opacity="0.24" strokeWidth="0.65">
+        <path d="M164 54V368 M404 54V368 M104 84H464 M104 324H464" />
+        <path d="M116 372 452 36" opacity="0.48" />
+        <path d="M284 42V372 M90 204H478" strokeDasharray="5 5" />
+        <path d="M148 68H164V84 M404 68H420V84 M148 324H164V340 M404 324H420V340" />
+      </g>
+
+      <path
+        d="M164 204A120 120 0 0 0 284 324H164Z"
+        fill="currentColor"
+        fillOpacity="0.035"
+        stroke="none"
+      />
+      <g opacity="0.27" strokeWidth="0.65">
+        <path d="M164 228 166.03 225.97 M164 240 168.27 235.73 M164 252 171.16 244.84 M164 264 174.63 253.37 M164 276 178.61 261.39 M164 288 183.08 268.92 M164 300 188 276 M164 312 193.36 282.64 M164 324 199.15 288.85 M176 324 205.36 294.64 M188 324 212 300 M200 324 219.08 304.92 M212 324 226.61 309.39 M224 324 234.63 313.37 M236 324 243.16 316.84 M248 324 252.27 319.73 M260 324 262.03 321.97" />
+      </g>
+
+      <g strokeWidth="1">
+        <path d="M164 204V84H404V324H284" />
+        <circle cx="284" cy="204" r="120" />
+        <path d="M164 204V324H284" opacity="0.45" />
+        <path d="M164 324 404 84" opacity="0.65" />
+      </g>
+
+      <g opacity="0.5" strokeWidth="0.65">
+        <path d="M284 204H404 M284 204 369 119" />
+        <path d="M308 204A24 24 0 0 0 301 187" />
+        <path d="M284 216H296V204" />
+        <path d="m364 119 5 0 0 5" />
+        <path d="M164 46H264 M304 46H404 M164 38V54 M404 38V54" />
+        <path d="m160 50 8-8 m232 8 8-8" />
+        <path d="M442 84V190 M442 218V324 M434 84H450 M434 324H450" />
+        <path d="m438 88 8-8 m-8 248 8-8" />
+        <path d="M164 352V372 M204 352V372 M164 364H204 m-44 4 8-8 m32 8 8-8" />
+        <path d="M164 270H106L90 286 M404 124H455L471 108" />
+      </g>
+
+      <g fill="var(--color-sidebar)" strokeWidth="0.8">
+        <circle cx="284" cy="204" r="3" />
+        <circle cx="164" cy="204" r="2.5" />
+        <circle cx="284" cy="324" r="2.5" />
+        <path d="M161.5 81.5h5v5h-5z M401.5 81.5h5v5h-5z M401.5 321.5h5v5h-5z M161.5 321.5h5v5h-5z" />
+      </g>
+
+      <g fill="currentColor" fontSize="10" opacity="0.52" stroke="none">
+        <text textAnchor="middle" x="284" y="49">
+          6u
+        </text>
+        <text textAnchor="middle" x="442" y="207">
+          6u
+        </text>
+        <text textAnchor="middle" x="184" y="384">
+          u
+        </text>
+        <text transform="rotate(-45 329 151)" x="329" y="151">
+          r = 3u
+        </text>
+        <text x="315" y="193">
+          45°
+        </text>
+        <text x="73" y="302">
+          01
+        </text>
+        <text x="475" y="105">
+          02
+        </text>
+      </g>
+
+      <g opacity="0.4" strokeWidth="0.65">
+        <path d="M76 82h12 M82 76v12 M470 340h12 M476 334v12" />
+        <path d="M266 401h36 M284 395v12" />
+      </g>
+    </BlueprintDrawing>
+  );
+}

From 589575f1658ed5620cb9e7d10e2663d41bc6f351 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 12:30:02 +0200
Subject: [PATCH 02/35] feat(ui): add matching 404 blueprint illustration

---
 apps/ui/app/not-found.tsx                  | 43 ++++-------
 apps/ui/components/not-found-blueprint.tsx | 90 ++++++++++++++++++++++
 2 files changed, 106 insertions(+), 27 deletions(-)
 create mode 100644 apps/ui/components/not-found-blueprint.tsx

diff --git a/apps/ui/app/not-found.tsx b/apps/ui/app/not-found.tsx
index 5dd71547a9..56f42be85b 100644
--- a/apps/ui/app/not-found.tsx
+++ b/apps/ui/app/not-found.tsx
@@ -1,44 +1,33 @@
 import {
-  PageHeader,
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@coss/ui/shared/page-header";
-import { RiArrowLeftLine } from "@remixicon/react";
+import { ArrowLeftIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { Button } from "@/registry/default/ui/button";
+import { NotFoundBlueprint } from "@/components/not-found-blueprint";
+import { PageHero } from "@/components/page-hero";
 
 export const metadata: Metadata = {
   description:
-    "The page you're looking for doesn't exist or may have been moved.",
+    "The page you’re looking for doesn’t exist or may have been moved.",
   title: "Page Not Found",
 };
 
 export default function NotFound() {
   return (
-    <div className="container w-full">
-      <PageHeader>
-        <PageHeaderHeading>Page Not Found</PageHeaderHeading>
-        <PageHeaderDescription>
-          The page you&apos;re looking for doesn&apos;t exist or may have been
-          moved.
-        </PageHeaderDescription>
-        <div className="mt-4">
-          <Button
-            className="group"
-            render={
-              <Link href="/">
-                <RiArrowLeftLine
-                  aria-hidden="true"
-                  className="-ms-1 opacity-60 transition-transform group-hover:-translate-x-0.5"
-                />
-                Back to Home
-              </Link>
-            }
-            size="lg"
-          />
-        </div>
-      </PageHeader>
-    </div>
+    <PageHero illustration={<NotFoundBlueprint />}>
+      <PageHeaderHeading>Page Not Found</PageHeaderHeading>
+      <PageHeaderDescription className="max-w-md text-pretty">
+        The page you’re looking for doesn’t exist or may have been moved.
+      </PageHeaderDescription>
+      <div className="mt-1">
+        <Button render={<Link href="/" />} size="lg">
+          <ArrowLeftIcon aria-hidden="true" />
+          Back to Home
+        </Button>
+      </div>
+    </PageHero>
   );
 }
diff --git a/apps/ui/components/not-found-blueprint.tsx b/apps/ui/components/not-found-blueprint.tsx
new file mode 100644
index 0000000000..8af8481f7b
--- /dev/null
+++ b/apps/ui/components/not-found-blueprint.tsx
@@ -0,0 +1,90 @@
+import { BlueprintDrawing } from "./blueprint-drawing";
+
+export function NotFoundBlueprint() {
+  return (
+    <BlueprintDrawing>
+      <g opacity="0.075" strokeWidth="0.6">
+        <path d="M200 72V352M240 72V352M320 212V352M360 212V352" />
+        <path d="M140 132H280M140 172H280M140 252H420M140 292H420" />
+      </g>
+
+      <g opacity="0.23" strokeWidth="0.65">
+        <path d="M160 64V354M400 64V354M132 92H428M132 332H428" />
+        <path d="M280 66V356M132 212H426" strokeDasharray="5 5" />
+        <path d="M144 76H160V92M400 76H416V92M144 332H160V348M400 332H416V348" />
+      </g>
+
+      <path
+        d="M160 92H280V212H400V332H160Z"
+        fill="currentColor"
+        fillOpacity="0.025"
+        stroke="none"
+      />
+
+      <g opacity="0.27" strokeWidth="0.65">
+        <path d="M160 292 200 332M160 304 188 332M160 316 176 332M160 328 164 332" />
+        <path d="M160 280V332H212" />
+      </g>
+
+      <g strokeWidth="1">
+        <path d="M160 92H280V212H400V332H160Z" />
+        <path d="M160 212H280V332" opacity="0.42" />
+      </g>
+
+      <g opacity="0.36" strokeWidth="0.7">
+        <path d="M292 92H400V200" strokeDasharray="4 5" />
+        <path d="M280 104V92H292M388 212H400V200" />
+        <path d="M292 104H306M292 104V118M374 104H388V118M388 186V200H374" />
+        <path d="M304 152H316M364 152H376M340 116V128M340 176V188" />
+      </g>
+
+      <g opacity="0.5" strokeWidth="0.65">
+        <path d="M160 54H262M298 54H400M160 46V62M400 46V62" />
+        <path d="m156 58 8-8 m232 8 8-8" />
+        <path d="M442 92V196M442 228V332M434 92H450M434 332H450" />
+        <path d="m438 96 8-8 m-8 248 8-8" />
+        <path d="M160 360V380M280 360V380M160 372H205M235 372H280" />
+        <path d="m156 376 8-8 m112 8 8-8" />
+        <path d="M280 212 310 182M280 196H264V212" />
+        <path d="M160 272H110L94 288" />
+      </g>
+
+      <g fill="var(--color-sidebar)" strokeWidth="0.8">
+        <path d="M157.5 89.5h5v5h-5zM277.5 89.5h5v5h-5zM397.5 209.5h5v5h-5zM397.5 329.5h5v5h-5zM157.5 329.5h5v5h-5z" />
+        <circle cx="280" cy="212" r="3" />
+      </g>
+
+      <g fill="currentColor" fontSize="10" opacity="0.52" stroke="none">
+        <text textAnchor="middle" x="280" y="57">
+          6u
+        </text>
+        <text textAnchor="middle" x="442" y="216">
+          6u
+        </text>
+        <text textAnchor="middle" x="220" y="375">
+          3u
+        </text>
+        <text x="77" y="304">
+          03
+        </text>
+      </g>
+
+      <text
+        fill="currentColor"
+        fontSize="12"
+        opacity="0.6"
+        stroke="none"
+        textAnchor="middle"
+        x="340"
+        y="156"
+      >
+        404
+      </text>
+
+      <g opacity="0.35" strokeWidth="0.65">
+        <path d="M78 92h12M84 86v12M468 332h12M474 326v12" />
+        <path d="M262 408h36M280 402v12" />
+      </g>
+    </BlueprintDrawing>
+  );
+}

From eec7ad01d0f7e92bfa7510600633a10e0320460b Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 22:05:44 +0200
Subject: [PATCH 03/35] Use selected recombination and interrupted-route
 illustrations

---
 apps/ui/components/not-found-blueprint.tsx | 111 ++++++---------
 apps/ui/components/particles-blueprint.tsx | 154 +++++++++------------
 2 files changed, 111 insertions(+), 154 deletions(-)

diff --git a/apps/ui/components/not-found-blueprint.tsx b/apps/ui/components/not-found-blueprint.tsx
index 8af8481f7b..db9281762c 100644
--- a/apps/ui/components/not-found-blueprint.tsx
+++ b/apps/ui/components/not-found-blueprint.tsx
@@ -3,87 +3,64 @@ import { BlueprintDrawing } from "./blueprint-drawing";
 export function NotFoundBlueprint() {
   return (
     <BlueprintDrawing>
-      <g opacity="0.075" strokeWidth="0.6">
-        <path d="M200 72V352M240 72V352M320 212V352M360 212V352" />
-        <path d="M140 132H280M140 172H280M140 252H420M140 292H420" />
+      <g opacity="0.1" strokeWidth="0.6">
+        <path d="M112 116H448M112 176H448M112 244H328M112 304H328M172 80V340M232 80V340M292 80V340M416 80V200" />
       </g>
-
-      <g opacity="0.23" strokeWidth="0.65">
-        <path d="M160 64V354M400 64V354M132 92H428M132 332H428" />
-        <path d="M280 66V356M132 212H426" strokeDasharray="5 5" />
-        <path d="M144 76H160V92M400 76H416V92M144 332H160V348M400 332H416V348" />
+      <g opacity="0.25" strokeWidth="0.6">
+        <path d="M100 304H292M232 84V350M272 116H464" strokeDasharray="4 6" />
+        <circle cx="172" cy="244" r="60" strokeDasharray="3 6" />
+        <circle cx="292" cy="176" r="60" strokeDasharray="3 6" />
+        <path d="M164 244H180M172 236V252M284 176H300M292 168V184" />
       </g>
 
       <path
-        d="M160 92H280V212H400V332H160Z"
+        d="M124 296H172A52 52 0 0 0 224 244V176A68 68 0 0 1 292 108H308V124H292A52 52 0 0 0 240 176V244A68 68 0 0 1 172 312H124Z"
         fill="currentColor"
         fillOpacity="0.025"
-        stroke="none"
+        strokeWidth="0.95"
       />
-
-      <g opacity="0.27" strokeWidth="0.65">
-        <path d="M160 292 200 332M160 304 188 332M160 316 176 332M160 328 164 332" />
-        <path d="M160 280V332H212" />
-      </g>
-
-      <g strokeWidth="1">
-        <path d="M160 92H280V212H400V332H160Z" />
-        <path d="M160 212H280V332" opacity="0.42" />
-      </g>
-
-      <g opacity="0.36" strokeWidth="0.7">
-        <path d="M292 92H400V200" strokeDasharray="4 5" />
-        <path d="M280 104V92H292M388 212H400V200" />
-        <path d="M292 104H306M292 104V118M374 104H388V118M388 186V200H374" />
-        <path d="M304 152H316M364 152H376M340 116V128M340 176V188" />
+      <path
+        d="M124 304H172A60 60 0 0 0 232 244V176A60 60 0 0 1 292 116H308"
+        opacity="0.27"
+        strokeDasharray="3 5"
+        strokeWidth="0.6"
+      />
+      <g opacity="0.38" strokeWidth="0.75">
+        <path d="M364 108H389.17M364 124H389.17M364 108V124" />
+        <circle cx="416" cy="116" r="28" strokeDasharray="3 5" />
+        <path d="M408 116H424M416 108V124" />
       </g>
-
-      <g opacity="0.5" strokeWidth="0.65">
-        <path d="M160 54H262M298 54H400M160 46V62M400 46V62" />
-        <path d="m156 58 8-8 m232 8 8-8" />
-        <path d="M442 92V196M442 228V332M434 92H450M434 332H450" />
-        <path d="m438 96 8-8 m-8 248 8-8" />
-        <path d="M160 360V380M280 360V380M160 372H205M235 372H280" />
-        <path d="m156 376 8-8 m112 8 8-8" />
-        <path d="M280 212 310 182M280 196H264V212" />
-        <path d="M160 272H110L94 288" />
+      <g opacity="0.72" strokeWidth="0.8">
+        <path d="m303 103 10 26m46-26 10 26" />
       </g>
-
-      <g fill="var(--color-sidebar)" strokeWidth="0.8">
-        <path d="M157.5 89.5h5v5h-5zM277.5 89.5h5v5h-5zM397.5 209.5h5v5h-5zM397.5 329.5h5v5h-5zM157.5 329.5h5v5h-5z" />
-        <circle cx="280" cy="212" r="3" />
+      <g opacity="0.45" strokeWidth="0.6">
+        <path d="M308 140V161M364 140V161M308 153H364m-60 4 8-8m48 8 8-8" />
+        <path d="M172 244 214.4 286.4m-6 0h6v-6" />
+        <path d="M124 332V356M172 332V356M124 348H140M156 348H172m-52 4 8-8m40 8 8-8" />
+        <path d="M224 184V212M240 184V212M224 200H240m-20 4 8-8m8 8 8-8M248 200H258" />
+        <path d="M416 156V188H440" />
       </g>
-
-      <g fill="currentColor" fontSize="10" opacity="0.52" stroke="none">
-        <text textAnchor="middle" x="280" y="57">
-          6u
-        </text>
-        <text textAnchor="middle" x="442" y="216">
-          6u
+      <g fill="currentColor" fontSize="11" opacity="0.72" stroke="none">
+        <text textAnchor="middle" x="336" y="180">
+          Missing link
         </text>
-        <text textAnchor="middle" x="220" y="375">
-          3u
+        <text x="392" y="207">
+          Unresolved
         </text>
-        <text x="77" y="304">
-          03
+        <text x="124" y="282">
+          Request
         </text>
       </g>
-
-      <text
-        fill="currentColor"
-        fontSize="12"
-        opacity="0.6"
-        stroke="none"
-        textAnchor="middle"
-        x="340"
-        y="156"
-      >
-        404
-      </text>
-
-      <g opacity="0.35" strokeWidth="0.65">
-        <path d="M78 92h12M84 86v12M468 332h12M474 326v12" />
-        <path d="M262 408h36M280 402v12" />
+      <g fill="currentColor" fontSize="10" opacity="0.5" stroke="none">
+        <text textAnchor="middle" x="148" y="351">
+          u
+        </text>
+        <text x="180" y="270">
+          R60
+        </text>
+        <text x="264" y="204">
+          16
+        </text>
       </g>
     </BlueprintDrawing>
   );
diff --git a/apps/ui/components/particles-blueprint.tsx b/apps/ui/components/particles-blueprint.tsx
index 46ca0b6753..00e5624fca 100644
--- a/apps/ui/components/particles-blueprint.tsx
+++ b/apps/ui/components/particles-blueprint.tsx
@@ -1,120 +1,100 @@
 import { BlueprintDrawing } from "./blueprint-drawing";
 
+function Registration() {
+  return (
+    <g opacity="0.32" strokeWidth="0.6">
+      <path d="M100 82h12 M106 76v12 M448 342h12 M454 336v12" />
+      <path d="M266 382h28 M280 376v12" />
+    </g>
+  );
+}
+
 export function ParticlesBlueprint() {
   return (
     <BlueprintDrawing>
-      <g opacity="0.065" strokeWidth="0.6">
-        <path d="M180 160H444M180 184H444M180 208H444M180 232H444M180 256H444M180 280H444M180 304H444M180 328H444" />
-        <path d="M204 136V352M228 136V352M252 136V352M276 136V352M300 136V352M324 136V352M348 136V352M372 136V352M396 136V352M420 136V352" />
-      </g>
-
-      <g opacity="0.27" strokeWidth="0.6">
-        <path d="M104 160H453M104 324H453M204 140V363M428 140V363" />
-        <path d="M320 88V155M428 88V155" />
-        <path d="M320 137V184M428 137V184" strokeDasharray="3 5" />
-        <path d="M302 188H443M302 232H443" strokeDasharray="3 5" />
-        <path d="M122 178V244M302 178V244" />
-        <path d="M195 151L213 169M419 315L437 333" />
-        <path d="M113 160H131M122 151V169M419 160H437M428 151V169" />
+      <g opacity="0.12" strokeWidth="0.6">
+        <path d="M120 132H440 M120 176H440 M176 244H384 M176 288H384 M176 332H384" />
+        <path d="M176 100V352 M224 100V352 M336 100V352 M384 100V352" />
       </g>
-
-      <g opacity="0.37" strokeWidth="0.7">
+      <g opacity="0.37" strokeWidth="0.65">
         <path
-          d="M204 182V176A16 16 0 0 1 220 160H412A16 16 0 0 1 428 176V248M204 240V308A16 16 0 0 0 220 324H228"
-          strokeDasharray="4 5"
+          d="M176 187V202L232 230 M384 187V202L328 230"
+          strokeDasharray="3 5"
         />
-        <path d="M320 184H428M320 180V188M428 180V188" />
-        <path d="M327 210H360M355 205L360 210L355 215" />
-        <path d="M374 141V168M369 163L374 168L379 163" />
-      </g>
-
-      <g opacity="0.48" strokeWidth="0.65">
-        <path d="M204 354H428M204 349V359M428 349V359" />
-        <path d="M201 357L207 351M425 357L431 351" />
-        <path d="M320 87H428M320 83V91M428 83V91" />
-        <path d="M99 188V232M95 188H103M95 232H103" />
-        <path d="M96 191L102 185M96 235L102 229" />
+        <path d="M230 226 232 230 227 230 M330 226 328 230 333 230" />
+        <path d="M120 120v-8h18 M214 112h18v8 M328 120v-8h18 M422 112h18v8" />
+        <path d="M176 355H384 M176 349v12 M384 349v12 m-212-2 8-8 m200 8 8-8" />
       </g>
-
       <g strokeWidth="0.95">
         <rect
           fill="var(--color-sidebar)"
           height="44"
-          rx="9"
-          strokeOpacity="0.85"
-          width="180"
-          x="122"
-          y="188"
+          rx="8"
+          width="112"
+          x="120"
+          y="132"
         />
-        <rect height="20" opacity="0.78" rx="4" width="20" x="136" y="200" />
-        <path d="M142 204V216M150 204V216M140 210H152" opacity="0.68" />
-        <path d="M280 206L284 210L280 214" opacity="0.65" />
-
+        <circle cx="142" cy="154" r="10" />
+        <path d="M138 154h8 M142 150v8" opacity="0.7" />
         <rect
           fill="var(--color-sidebar)"
-          height="32"
-          rx="16"
-          strokeOpacity="0.85"
-          width="108"
-          x="320"
-          y="104"
+          height="44"
+          rx="8"
+          width="112"
+          x="328"
+          y="132"
         />
-        <path d="M334 120L337 123L343 117" opacity="0.8" />
-        <path d="M409 117L415 123M415 117L409 123" opacity="0.5" />
-
-        <path
-          d="M244 264H412A16 16 0 0 1 428 280V308A16 16 0 0 1 412 324H244A16 16 0 0 1 228 308V280A16 16 0 0 1 244 264Z"
+        <rect height="18" rx="9" width="30" x="395" y="145" />
+        <circle cx="416" cy="154" r="5.5" />
+        <rect
           fill="var(--color-sidebar)"
-          strokeOpacity="0.85"
+          height="88"
+          rx="11"
+          width="208"
+          x="176"
+          y="244"
         />
-        <rect height="22" opacity="0.8" rx="11" width="38" x="370" y="283" />
-        <circle cx="397" cy="294" opacity="0.8" r="7" />
+        <path d="M176 288H384" opacity="0.32" />
+        <circle cx="200" cy="266" r="10" />
+        <path d="M196 266h8 M200 262v8" opacity="0.7" />
+        <path d="m365 263 3 3-3 3" opacity="0.55" />
+        <rect height="18" rx="9" width="30" x="340" y="301" />
+        <circle cx="361" cy="310" r="5.5" />
       </g>
-
-      <g opacity="0.35" strokeWidth="0.6">
-        <path d="M412 300V332M404 308H436" />
-        <path d="M412 324A16 16 0 0 0 428 308" />
-        <path d="M412 308L448 344H472" />
-        <path d="M244 254V274M234 264H254" />
-        <path d="M228 274A10 10 0 0 1 238 264" />
+      <g opacity="0.34" strokeWidth="0.6">
+        <path d="M190 234v20 M180 244h20 M370 322v20 M360 332h20" />
+        <path d="M156 244V332 M151 244h10 M151 332h10" />
+        <path d="M187 244a11 11 0 0 0-11 11 M373 332a11 11 0 0 0 11-11" />
       </g>
-
-      <g fill="currentColor" fontSize="11" stroke="none">
-        <text opacity="0.7" x="168" y="214">
-          Workspace
+      <g fill="currentColor" fontSize="11" opacity="0.76" stroke="none">
+        <text x="160" y="158">
+          Studio
         </text>
-        <text opacity="0.7" x="352" y="124">
-          Ready
+        <text x="341" y="158">
+          Public
         </text>
-        <text opacity="0.7" x="248" y="298">
-          Available
+        <text x="220" y="270">
+          Studio
         </text>
-      </g>
-
-      <g fill="currentColor" fontSize="10" opacity="0.5" stroke="none">
-        <text textAnchor="middle" x="374" y="78">
-          108
-        </text>
-        <text textAnchor="middle" x="316" y="371">
-          224
+        <text x="190" y="314">
+          Public
         </text>
-        <text textAnchor="end" x="89" y="214">
-          44
+      </g>
+      <g fill="currentColor" fontSize="10" opacity="0.52" stroke="none">
+        <text textAnchor="middle" x="176" y="97">
+          A / Identity
         </text>
-        <text x="448" y="338">
-          R16
+        <text textAnchor="middle" x="384" y="97">
+          B / Visibility
         </text>
-        <text x="112" y="391">
-          02 / Composition
+        <text textAnchor="middle" x="280" y="374">
+          A + B
         </text>
-        <text textAnchor="end" x="449" y="391">
-          1 : 1
+        <text textAnchor="end" x="145" y="292">
+          2u
         </text>
       </g>
-
-      <g opacity="0.3" strokeWidth="0.6">
-        <path d="M112 373V381M108 377H116M449 373V381M445 377H453" />
-      </g>
+      <Registration />
     </BlueprintDrawing>
   );
 }

From 4c60fc6b42981c926cb5dd9be8ceab2d2d8848e9 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 22:15:40 +0200
Subject: [PATCH 04/35] Keep hero layouts in pages and center the 404
 illustration

---
 apps/ui/app/not-found.tsx        | 12 ++++++----
 apps/ui/app/page.tsx             | 40 ++++++++++++++++++--------------
 apps/ui/app/particles/page.tsx   | 34 ++++++++++++++++-----------
 apps/ui/components/page-hero.tsx | 20 ----------------
 4 files changed, 50 insertions(+), 56 deletions(-)
 delete mode 100644 apps/ui/components/page-hero.tsx

diff --git a/apps/ui/app/not-found.tsx b/apps/ui/app/not-found.tsx
index 56f42be85b..bc466b65d9 100644
--- a/apps/ui/app/not-found.tsx
+++ b/apps/ui/app/not-found.tsx
@@ -7,7 +7,6 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { Button } from "@/registry/default/ui/button";
 import { NotFoundBlueprint } from "@/components/not-found-blueprint";
-import { PageHero } from "@/components/page-hero";
 
 export const metadata: Metadata = {
   description:
@@ -17,8 +16,13 @@ export const metadata: Metadata = {
 
 export default function NotFound() {
   return (
-    <PageHero illustration={<NotFoundBlueprint />}>
-      <PageHeaderHeading>Page Not Found</PageHeaderHeading>
+    <section className="container flex w-full flex-col items-center gap-5 py-10 text-center [font-optical-sizing:auto] [font-synthesis:none] md:py-14 lg:py-16">
+      <div className="pointer-events-none w-full max-w-112 select-none">
+        <NotFoundBlueprint />
+      </div>
+      <PageHeaderHeading className="text-balance leading-[1.08] [font-variation-settings:'GEOM'_50]">
+        Page Not Found
+      </PageHeaderHeading>
       <PageHeaderDescription className="max-w-md text-pretty">
         The page you’re looking for doesn’t exist or may have been moved.
       </PageHeaderDescription>
@@ -28,6 +32,6 @@ export default function NotFound() {
           Back to Home
         </Button>
       </div>
-    </PageHero>
+    </section>
   );
 }
diff --git a/apps/ui/app/page.tsx b/apps/ui/app/page.tsx
index d561cd32c6..4acdb11f22 100644
--- a/apps/ui/app/page.tsx
+++ b/apps/ui/app/page.tsx
@@ -17,7 +17,6 @@ import {
 } from "@/registry/default/ui/card";
 import { particles } from "@/registry/registry-particles";
 import { getCategoryThumbnail } from "@/components/category-thumbnails";
-import { PageHero } from "@/components/page-hero";
 import { PrimitivesBlueprint } from "@/components/primitives-blueprint";
 import { categories } from "@/config/categories";
 import { PAGES_NEW } from "@/lib/docs";
@@ -33,24 +32,29 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <>
-      <PageHero illustration={<PrimitivesBlueprint />}>
-        <PageHeaderHeading>
-          A new, modern UI component library built on top of Base UI.
-        </PageHeaderHeading>
-        <PageHeaderDescription>{description}</PageHeaderDescription>
-        <div className="mt-1 flex flex-wrap gap-2">
-          <Button render={<Link href="/docs" />} size="lg">
-            Get started
-          </Button>
-          <Button
-            render={<Link href="/particles" />}
-            size="lg"
-            variant="outline"
-          >
-            Browse {particleCount} particles
-          </Button>
+      <section className="container grid w-full items-center gap-6 py-10 md:py-14 lg:grid-cols-2 lg:gap-10 lg:py-16 xl:gap-16">
+        <div className="flex min-w-0 flex-col items-start gap-5 [font-optical-sizing:auto] [font-synthesis:none]">
+          <PageHeaderHeading className="text-balance leading-[1.08] [font-variation-settings:'GEOM'_50] xl:text-[3.5rem]">
+            A new, modern UI component library built on top of Base UI.
+          </PageHeaderHeading>
+          <PageHeaderDescription>{description}</PageHeaderDescription>
+          <div className="mt-1 flex flex-wrap gap-2">
+            <Button render={<Link href="/docs" />} size="lg">
+              Get started
+            </Button>
+            <Button
+              render={<Link href="/particles" />}
+              size="lg"
+              variant="outline"
+            >
+              Browse {particleCount} particles
+            </Button>
+          </div>
+        </div>
+        <div className="pointer-events-none mx-auto w-full max-w-140 select-none max-lg:max-w-112">
+          <PrimitivesBlueprint />
         </div>
-      </PageHero>
+      </section>
       <div className="relative before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-border/64">
         <div
           aria-hidden="true"
diff --git a/apps/ui/app/particles/page.tsx b/apps/ui/app/particles/page.tsx
index 6dd012f26c..8830e9ce55 100644
--- a/apps/ui/app/particles/page.tsx
+++ b/apps/ui/app/particles/page.tsx
@@ -10,7 +10,6 @@ import { isValidRegistryCategory } from "@/registry/registry-categories";
 import { particles } from "@/registry/registry-particles";
 import { ParticlesDisplay } from "./particles-display";
 import SearchContainer from "./search-container";
-import { PageHero } from "@/components/page-hero";
 import { ParticlesBlueprint } from "@/components/particles-blueprint";
 
 const particleCount = particles.length;
@@ -62,20 +61,27 @@ export default function Page({
 }) {
   return (
     <>
-      <PageHero illustration={<ParticlesBlueprint />}>
-        <PageHeaderHeading>Browse Particles</PageHeaderHeading>
-        <PageHeaderDescription className="max-w-lg text-pretty">
-          {description}
-        </PageHeaderDescription>
-        <div className="mt-1 flex flex-wrap gap-2">
-          <Button render={<Link href="#particles" />} size="lg">
-            Explore {particleCount} particles
-          </Button>
-          <Button render={<Link href="/docs" />} size="lg" variant="outline">
-            Read the docs
-          </Button>
+      <section className="container grid w-full items-center gap-6 py-10 md:py-14 lg:grid-cols-2 lg:gap-10 lg:py-16 xl:gap-16">
+        <div className="flex min-w-0 flex-col items-start gap-5 [font-optical-sizing:auto] [font-synthesis:none]">
+          <PageHeaderHeading className="text-balance leading-[1.08] [font-variation-settings:'GEOM'_50] xl:text-[3.5rem]">
+            Browse Particles
+          </PageHeaderHeading>
+          <PageHeaderDescription className="max-w-lg text-pretty">
+            {description}
+          </PageHeaderDescription>
+          <div className="mt-1 flex flex-wrap gap-2">
+            <Button render={<Link href="#particles" />} size="lg">
+              Explore {particleCount} particles
+            </Button>
+            <Button render={<Link href="/docs" />} size="lg" variant="outline">
+              Read the docs
+            </Button>
+          </div>
         </div>
-      </PageHero>
+        <div className="pointer-events-none mx-auto w-full max-w-140 select-none max-lg:max-w-112">
+          <ParticlesBlueprint />
+        </div>
+      </section>
       <div className="border-t pt-8 md:pt-12">
         <div className="container w-full scroll-mt-24" id="particles">
           <Suspense>
diff --git a/apps/ui/components/page-hero.tsx b/apps/ui/components/page-hero.tsx
deleted file mode 100644
index 793ed8c48c..0000000000
--- a/apps/ui/components/page-hero.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { ReactNode } from "react";
-
-export function PageHero({
-  children,
-  illustration,
-}: {
-  children: ReactNode;
-  illustration: ReactNode;
-}) {
-  return (
-    <section className="container grid w-full items-center gap-6 py-10 md:py-14 lg:grid-cols-2 lg:gap-10 lg:py-16 xl:gap-16">
-      <div className="flex min-w-0 flex-col items-start gap-5 [font-optical-sizing:auto] [font-synthesis:none] [&_h1]:text-balance [&_h1]:text-4xl [&_h1]:leading-[1.08] [&_h1]:[font-variation-settings:'GEOM'_50] lg:[&_h1]:text-5xl xl:[&_h1]:text-[3.5rem]">
-        {children}
-      </div>
-      <div className="pointer-events-none mx-auto w-full max-w-140 select-none max-lg:max-w-112">
-        {illustration}
-      </div>
-    </section>
-  );
-}

From 386baf2a32c282b1a29e85581054f5eb26d49027 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 22:18:32 +0200
Subject: [PATCH 05/35] Restore the original 404 back arrow and hover treatment

---
 apps/ui/app/not-found.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/apps/ui/app/not-found.tsx b/apps/ui/app/not-found.tsx
index bc466b65d9..e2066b1814 100644
--- a/apps/ui/app/not-found.tsx
+++ b/apps/ui/app/not-found.tsx
@@ -2,7 +2,7 @@ import {
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@coss/ui/shared/page-header";
-import { ArrowLeftIcon } from "lucide-react";
+import { RiArrowLeftLine } from "@remixicon/react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { Button } from "@/registry/default/ui/button";
@@ -27,10 +27,19 @@ export default function NotFound() {
         The page you’re looking for doesn’t exist or may have been moved.
       </PageHeaderDescription>
       <div className="mt-1">
-        <Button render={<Link href="/" />} size="lg">
-          <ArrowLeftIcon aria-hidden="true" />
-          Back to Home
-        </Button>
+        <Button
+          className="group"
+          render={
+            <Link href="/">
+              <RiArrowLeftLine
+                aria-hidden="true"
+                className="-ms-1 opacity-60 transition-transform group-hover:-translate-x-0.5"
+              />
+              Back to Home
+            </Link>
+          }
+          size="lg"
+        />
       </div>
     </section>
   );

From 6132efe92497a66cda22f992a1ab6c4b16b897c8 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 22:21:40 +0200
Subject: [PATCH 06/35] Restore Particles search in the hero and refine page
 headings

---
 apps/ui/app/page.tsx                       |  2 +-
 apps/ui/app/particles/page.tsx             | 28 +++++++---------------
 apps/ui/app/particles/search-container.tsx |  2 +-
 apps/ui/app/particles/search-field.tsx     | 15 ++++++++----
 4 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/apps/ui/app/page.tsx b/apps/ui/app/page.tsx
index 4acdb11f22..aed090fd7c 100644
--- a/apps/ui/app/page.tsx
+++ b/apps/ui/app/page.tsx
@@ -34,7 +34,7 @@ export default function Page() {
     <>
       <section className="container grid w-full items-center gap-6 py-10 md:py-14 lg:grid-cols-2 lg:gap-10 lg:py-16 xl:gap-16">
         <div className="flex min-w-0 flex-col items-start gap-5 [font-optical-sizing:auto] [font-synthesis:none]">
-          <PageHeaderHeading className="text-balance leading-[1.08] [font-variation-settings:'GEOM'_50] xl:text-[3.5rem]">
+          <PageHeaderHeading className="text-balance text-[clamp(2.25rem,1.5rem+2.6vw,4rem)] leading-none [font-variation-settings:'GEOM'_50] lg:text-[clamp(2.25rem,1.5rem+2.6vw,4rem)]">
             A new, modern UI component library built on top of Base UI.
           </PageHeaderHeading>
           <PageHeaderDescription>{description}</PageHeaderDescription>
diff --git a/apps/ui/app/particles/page.tsx b/apps/ui/app/particles/page.tsx
index 8830e9ce55..6ac7cb14ab 100644
--- a/apps/ui/app/particles/page.tsx
+++ b/apps/ui/app/particles/page.tsx
@@ -3,9 +3,7 @@ import {
   PageHeaderHeading,
 } from "@coss/ui/shared/page-header";
 import type { Metadata } from "next";
-import Link from "next/link";
 import { Suspense } from "react";
-import { Button } from "@/registry/default/ui/button";
 import { isValidRegistryCategory } from "@/registry/registry-categories";
 import { particles } from "@/registry/registry-particles";
 import { ParticlesDisplay } from "./particles-display";
@@ -63,34 +61,24 @@ export default function Page({
     <>
       <section className="container grid w-full items-center gap-6 py-10 md:py-14 lg:grid-cols-2 lg:gap-10 lg:py-16 xl:gap-16">
         <div className="flex min-w-0 flex-col items-start gap-5 [font-optical-sizing:auto] [font-synthesis:none]">
-          <PageHeaderHeading className="text-balance leading-[1.08] [font-variation-settings:'GEOM'_50] xl:text-[3.5rem]">
+          <PageHeaderHeading className="text-balance text-[clamp(2.25rem,1.5rem+2.6vw,4rem)] leading-none [font-variation-settings:'GEOM'_50] lg:text-[clamp(2.25rem,1.5rem+2.6vw,4rem)]">
             Browse Particles
           </PageHeaderHeading>
           <PageHeaderDescription className="max-w-lg text-pretty">
             {description}
           </PageHeaderDescription>
-          <div className="mt-1 flex flex-wrap gap-2">
-            <Button render={<Link href="#particles" />} size="lg">
-              Explore {particleCount} particles
-            </Button>
-            <Button render={<Link href="/docs" />} size="lg" variant="outline">
-              Read the docs
-            </Button>
-          </div>
+          <Suspense>
+            <SearchContainer />
+          </Suspense>
         </div>
         <div className="pointer-events-none mx-auto w-full max-w-140 select-none max-lg:max-w-112">
           <ParticlesBlueprint />
         </div>
       </section>
-      <div className="border-t pt-8 md:pt-12">
-        <div className="container w-full scroll-mt-24" id="particles">
-          <Suspense>
-            <SearchContainer />
-          </Suspense>
-          <Suspense>
-            <ParticlesDisplayServer searchParams={searchParams} />
-          </Suspense>
-        </div>
+      <div className="container w-full pt-8 md:pt-12">
+        <Suspense>
+          <ParticlesDisplayServer searchParams={searchParams} />
+        </Suspense>
       </div>
     </>
   );
diff --git a/apps/ui/app/particles/search-container.tsx b/apps/ui/app/particles/search-container.tsx
index ce9655fea5..bc160b2c7b 100644
--- a/apps/ui/app/particles/search-container.tsx
+++ b/apps/ui/app/particles/search-container.tsx
@@ -50,7 +50,7 @@ export default function SearchContainer() {
   );
 
   return (
-    <div className="mb-8 md:mb-12 lg:mb-16">
+    <div className="mt-2 w-full">
       <SearchField
         items={searchItems}
         onItemsChange={updateSelectedItems}
diff --git a/apps/ui/app/particles/search-field.tsx b/apps/ui/app/particles/search-field.tsx
index 339dc8ab24..bfcc9a3ed7 100644
--- a/apps/ui/app/particles/search-field.tsx
+++ b/apps/ui/app/particles/search-field.tsx
@@ -3,7 +3,7 @@
 import { LabelIcon, Search01Icon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import * as React from "react";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Index } from "@/registry/__index__";
 import {
   Combobox,
@@ -43,7 +43,14 @@ export default function SearchField({
   onItemsChange,
   items,
 }: SearchFieldProps) {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(selectedItems.length === 0);
+
+  // Keep popup open when no selection is made
+  useEffect(() => {
+    if (selectedItems.length === 0) {
+      setOpen(true);
+    }
+  }, [selectedItems.length]);
 
   const groupedItems = useMemo(() => {
     const selectedValues = selectedItems.map((item) => item.value);
@@ -125,7 +132,7 @@ export default function SearchField({
   };
 
   return (
-    <div className="mx-auto max-w-2xl">
+    <div className="w-full max-w-xl">
       <Combobox
         aria-label="Filter particles"
         autoHighlight
@@ -163,7 +170,7 @@ export default function SearchField({
                 ))}
                 <ComboboxChipsInput
                   aria-label="Search components"
-                  placeholder="Filter by component or category…"
+                  autoFocus
                   size="lg"
                 />
               </>

From ac544c0fb89aaf6ba3a1de267c980cf08e95b4ab Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 22:26:17 +0200
Subject: [PATCH 07/35] Match the Chat heading to the main and Particles pages

---
 apps/ui/app/chat/chat-showcase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/app/chat/chat-showcase.tsx b/apps/ui/app/chat/chat-showcase.tsx
index 2210ecbab9..75e0413c2e 100644
--- a/apps/ui/app/chat/chat-showcase.tsx
+++ b/apps/ui/app/chat/chat-showcase.tsx
@@ -117,7 +117,7 @@ export function ChatShowcase() {
                 <MessagesSquareIcon aria-hidden="true" className="size-3.5" />
                 Chat UI
               </Badge>
-              <h1 className="font-bold font-heading text-5xl leading-none tracking-tight lg:text-6xl xl:text-7xl">
+              <h1 className="text-balance font-bold font-heading text-[clamp(2.25rem,1.5rem+2.6vw,4rem)] leading-none [font-optical-sizing:auto] [font-synthesis:none] [font-variation-settings:'GEOM'_50]">
                 Make room
                 <br />
                 for conversation.

From 6be016ba07c9d5e3be2a207532f3f9f3194b83aa Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 22:28:58 +0200
Subject: [PATCH 08/35] Match the Particles hero divider to the home page

---
 apps/ui/app/particles/page.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/ui/app/particles/page.tsx b/apps/ui/app/particles/page.tsx
index 6ac7cb14ab..addbaeddce 100644
--- a/apps/ui/app/particles/page.tsx
+++ b/apps/ui/app/particles/page.tsx
@@ -75,10 +75,16 @@ export default function Page({
           <ParticlesBlueprint />
         </div>
       </section>
-      <div className="container w-full pt-8 md:pt-12">
-        <Suspense>
-          <ParticlesDisplayServer searchParams={searchParams} />
-        </Suspense>
+      <div className="relative before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-border/64">
+        <div
+          aria-hidden="true"
+          className="container pointer-events-none absolute inset-0 z-50 before:absolute before:top-[-3.5px] before:-left-[11.5px] before:z-1 before:-ml-1 before:size-2 before:rounded-[2px] before:border before:border-border before:bg-popover before:bg-clip-padding before:shadow-xs after:absolute after:top-[-3.5px] after:-right-[11.5px] after:z-1 after:-mr-1 after:size-2 after:rounded-[2px] after:border after:border-border after:bg-background after:bg-clip-padding after:shadow-xs dark:after:bg-clip-border dark:before:bg-clip-border"
+        />
+        <div className="container w-full pt-8 md:pt-12">
+          <Suspense>
+            <ParticlesDisplayServer searchParams={searchParams} />
+          </Suspense>
+        </div>
       </div>
     </>
   );

From 7a20d2fe7cf16881928c63ffff24cdc30b2cb40e Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 22:30:28 +0200
Subject: [PATCH 09/35] Add decorative markers to Chat section intersections

---
 apps/ui/app/chat/chat-showcase.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/ui/app/chat/chat-showcase.tsx b/apps/ui/app/chat/chat-showcase.tsx
index 75e0413c2e..99d3309023 100644
--- a/apps/ui/app/chat/chat-showcase.tsx
+++ b/apps/ui/app/chat/chat-showcase.tsx
@@ -81,6 +81,15 @@ function InstallCommand({ command }: { command: string }) {
   );
 }
 
+function SectionMarkers() {
+  return (
+    <div
+      aria-hidden="true"
+      className="container pointer-events-none absolute inset-0 z-50 before:absolute before:top-[-4.5px] before:-left-[11.5px] before:z-1 before:-ml-1 before:size-2 before:rounded-[2px] before:border before:border-border before:bg-popover before:bg-clip-padding before:shadow-xs after:absolute after:top-[-4.5px] after:-right-[11.5px] after:z-1 after:-mr-1 after:size-2 after:rounded-[2px] after:border after:border-border after:bg-background after:bg-clip-padding after:shadow-xs dark:after:bg-clip-border dark:before:bg-clip-border"
+    />
+  );
+}
+
 function SectionHeading({
   id,
   title,
@@ -170,8 +179,9 @@ export function ChatShowcase() {
 
           <section
             aria-labelledby="chat-features"
-            className="border-t bg-muted/24"
+            className="relative border-t bg-muted/24"
           >
+            <SectionMarkers />
             <div className="container py-14 md:py-20">
               <SectionHeading
                 id="chat-features"
@@ -182,7 +192,8 @@ export function ChatShowcase() {
             </div>
           </section>
 
-          <section aria-labelledby="chat-states" className="border-t">
+          <section aria-labelledby="chat-states" className="relative border-t">
+            <SectionMarkers />
             <div className="container py-14 md:py-20">
               <SectionHeading
                 id="chat-states"
@@ -211,8 +222,9 @@ export function ChatShowcase() {
 
           <section
             aria-labelledby="chat-layouts"
-            className="border-t bg-muted/24"
+            className="relative border-t bg-muted/24"
           >
+            <SectionMarkers />
             <div className="container py-14 md:py-20">
               <SectionHeading
                 id="chat-layouts"
@@ -223,7 +235,8 @@ export function ChatShowcase() {
             </div>
           </section>
 
-          <section aria-labelledby="chat-build" className="border-t">
+          <section aria-labelledby="chat-build" className="relative border-t">
+            <SectionMarkers />
             <div className="container grid gap-12 py-14 md:grid-cols-[2fr_3fr] md:py-20">
               <div className="flex flex-col items-start">
                 <h2

From de14ac0ffb76bef733189062a9347e95744551d4 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 22:36:13 +0200
Subject: [PATCH 10/35] Refine the home and Particles hero copy

---
 apps/ui/app/page.tsx           | 7 ++++---
 apps/ui/app/particles/page.tsx | 6 +++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/ui/app/page.tsx b/apps/ui/app/page.tsx
index aed090fd7c..7b293dcb6d 100644
--- a/apps/ui/app/page.tsx
+++ b/apps/ui/app/page.tsx
@@ -21,12 +21,13 @@ import { PrimitivesBlueprint } from "@/components/primitives-blueprint";
 import { categories } from "@/config/categories";
 import { PAGES_NEW } from "@/lib/docs";
 
-const description = "Built for developers and AI.";
+const description =
+  "Accessible React components built on Base UI and styled with Tailwind CSS. Designed for developers and AI, with source code you can make your own.";
 const particleCount = particles.length;
 
 export const metadata: Metadata = {
   description,
-  title: "A new, modern UI component library built on top of Base UI - coss ui",
+  title: "A modern React UI component library – coss ui",
 };
 
 export default function Page() {
@@ -35,7 +36,7 @@ export default function Page() {
       <section className="container grid w-full items-center gap-6 py-10 md:py-14 lg:grid-cols-2 lg:gap-10 lg:py-16 xl:gap-16">
         <div className="flex min-w-0 flex-col items-start gap-5 [font-optical-sizing:auto] [font-synthesis:none]">
           <PageHeaderHeading className="text-balance text-[clamp(2.25rem,1.5rem+2.6vw,4rem)] leading-none [font-variation-settings:'GEOM'_50] lg:text-[clamp(2.25rem,1.5rem+2.6vw,4rem)]">
-            A new, modern UI component library built on top of Base UI.
+            A modern React UI component library.
           </PageHeaderHeading>
           <PageHeaderDescription>{description}</PageHeaderDescription>
           <div className="mt-1 flex flex-wrap gap-2">
diff --git a/apps/ui/app/particles/page.tsx b/apps/ui/app/particles/page.tsx
index addbaeddce..e2fd0e4700 100644
--- a/apps/ui/app/particles/page.tsx
+++ b/apps/ui/app/particles/page.tsx
@@ -12,11 +12,11 @@ import { ParticlesBlueprint } from "@/components/particles-blueprint";
 
 const particleCount = particles.length;
 
-const description = `Discover ${particleCount} ready-to-use particles, the building blocks of your design system. Filter by category to find the perfect component for your project.`;
+const description = `Explore ${particleCount} ready-to-use UI patterns built from coss ui components. Copy the code, customize the details, and make them part of your product.`;
 
 export const metadata: Metadata = {
   description,
-  title: "Browse Particles - coss ui",
+  title: "Build more with Particles – coss ui",
 };
 
 async function ParticlesDisplayServer({
@@ -62,7 +62,7 @@ export default function Page({
       <section className="container grid w-full items-center gap-6 py-10 md:py-14 lg:grid-cols-2 lg:gap-10 lg:py-16 xl:gap-16">
         <div className="flex min-w-0 flex-col items-start gap-5 [font-optical-sizing:auto] [font-synthesis:none]">
           <PageHeaderHeading className="text-balance text-[clamp(2.25rem,1.5rem+2.6vw,4rem)] leading-none [font-variation-settings:'GEOM'_50] lg:text-[clamp(2.25rem,1.5rem+2.6vw,4rem)]">
-            Browse Particles
+            Build more with Particles.
           </PageHeaderHeading>
           <PageHeaderDescription className="max-w-lg text-pretty">
             {description}

From ee4b2965213ee6a525af8668d4b5ac6d0eb29e5d Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 22:38:21 +0200
Subject: [PATCH 11/35] Mention Cal.com in the home hero description

---
 apps/ui/app/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/app/page.tsx b/apps/ui/app/page.tsx
index 7b293dcb6d..7ee46e0b39 100644
--- a/apps/ui/app/page.tsx
+++ b/apps/ui/app/page.tsx
@@ -22,7 +22,7 @@ import { categories } from "@/config/categories";
 import { PAGES_NEW } from "@/lib/docs";
 
 const description =
-  "Accessible React components built on Base UI and styled with Tailwind CSS. Designed for developers and AI, with source code you can make your own.";
+  "Accessible React components we use to build Cal.com, powered by Base UI and styled with Tailwind CSS. Designed for developers and AI, with source code you can make your own.";
 const particleCount = particles.length;
 
 export const metadata: Metadata = {

From 481a498944bc882e4abd0edde330226f9ea173a9 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 22:39:30 +0200
Subject: [PATCH 12/35] Display the site footer on the 404 page

---
 apps/ui/app/not-found.tsx | 56 +++++++++++++++++++++------------------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/apps/ui/app/not-found.tsx b/apps/ui/app/not-found.tsx
index e2066b1814..4a5c45bf67 100644
--- a/apps/ui/app/not-found.tsx
+++ b/apps/ui/app/not-found.tsx
@@ -2,6 +2,7 @@ import {
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@coss/ui/shared/page-header";
+import { SiteFooter } from "@coss/ui/shared/site-footer";
 import { RiArrowLeftLine } from "@remixicon/react";
 import type { Metadata } from "next";
 import Link from "next/link";
@@ -16,31 +17,34 @@ export const metadata: Metadata = {
 
 export default function NotFound() {
   return (
-    <section className="container flex w-full flex-col items-center gap-5 py-10 text-center [font-optical-sizing:auto] [font-synthesis:none] md:py-14 lg:py-16">
-      <div className="pointer-events-none w-full max-w-112 select-none">
-        <NotFoundBlueprint />
-      </div>
-      <PageHeaderHeading className="text-balance leading-[1.08] [font-variation-settings:'GEOM'_50]">
-        Page Not Found
-      </PageHeaderHeading>
-      <PageHeaderDescription className="max-w-md text-pretty">
-        The page you’re looking for doesn’t exist or may have been moved.
-      </PageHeaderDescription>
-      <div className="mt-1">
-        <Button
-          className="group"
-          render={
-            <Link href="/">
-              <RiArrowLeftLine
-                aria-hidden="true"
-                className="-ms-1 opacity-60 transition-transform group-hover:-translate-x-0.5"
-              />
-              Back to Home
-            </Link>
-          }
-          size="lg"
-        />
-      </div>
-    </section>
+    <>
+      <section className="container flex w-full flex-1 flex-col items-center gap-5 py-10 text-center [font-optical-sizing:auto] [font-synthesis:none] md:py-14 lg:py-16">
+        <div className="pointer-events-none w-full max-w-112 select-none">
+          <NotFoundBlueprint />
+        </div>
+        <PageHeaderHeading className="text-balance leading-[1.08] [font-variation-settings:'GEOM'_50]">
+          Page Not Found
+        </PageHeaderHeading>
+        <PageHeaderDescription className="max-w-md text-pretty">
+          The page you’re looking for doesn’t exist or may have been moved.
+        </PageHeaderDescription>
+        <div className="mt-1">
+          <Button
+            className="group"
+            render={
+              <Link href="/">
+                <RiArrowLeftLine
+                  aria-hidden="true"
+                  className="-ms-1 opacity-60 transition-transform group-hover:-translate-x-0.5"
+                />
+                Back to Home
+              </Link>
+            }
+            size="lg"
+          />
+        </div>
+      </section>
+      <SiteFooter />
+    </>
   );
 }

From f54ce8016f219aa52a2b508d2ffdcd62d0463ce9 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 22:41:03 +0200
Subject: [PATCH 13/35] Hide home and Particles illustrations on smaller
 screens

---
 apps/ui/app/page.tsx           | 2 +-
 apps/ui/app/particles/page.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/ui/app/page.tsx b/apps/ui/app/page.tsx
index 7ee46e0b39..1dbab31399 100644
--- a/apps/ui/app/page.tsx
+++ b/apps/ui/app/page.tsx
@@ -52,7 +52,7 @@ export default function Page() {
             </Button>
           </div>
         </div>
-        <div className="pointer-events-none mx-auto w-full max-w-140 select-none max-lg:max-w-112">
+        <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:block">
           <PrimitivesBlueprint />
         </div>
       </section>
diff --git a/apps/ui/app/particles/page.tsx b/apps/ui/app/particles/page.tsx
index e2fd0e4700..0f5103f7f5 100644
--- a/apps/ui/app/particles/page.tsx
+++ b/apps/ui/app/particles/page.tsx
@@ -71,7 +71,7 @@ export default function Page({
             <SearchContainer />
           </Suspense>
         </div>
-        <div className="pointer-events-none mx-auto w-full max-w-140 select-none max-lg:max-w-112">
+        <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:block">
           <ParticlesBlueprint />
         </div>
       </section>

From 25388e882eb109c38da3ffbdc4aa2cd251cc2c8e Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 22:47:10 +0200
Subject: [PATCH 14/35] Add a third building block to the Particles
 illustration

---
 apps/ui/components/particles-blueprint.tsx | 87 +++++++++++++---------
 1 file changed, 52 insertions(+), 35 deletions(-)

diff --git a/apps/ui/components/particles-blueprint.tsx b/apps/ui/components/particles-blueprint.tsx
index 00e5624fca..d2a62d606f 100644
--- a/apps/ui/components/particles-blueprint.tsx
+++ b/apps/ui/components/particles-blueprint.tsx
@@ -3,8 +3,7 @@ import { BlueprintDrawing } from "./blueprint-drawing";
 function Registration() {
   return (
     <g opacity="0.32" strokeWidth="0.6">
-      <path d="M100 82h12 M106 76v12 M448 342h12 M454 336v12" />
-      <path d="M266 382h28 M280 376v12" />
+      <path d="M68 82h12 M74 76v12 M480 374h12 M486 368v12" />
     </g>
   );
 }
@@ -13,17 +12,17 @@ export function ParticlesBlueprint() {
   return (
     <BlueprintDrawing>
       <g opacity="0.12" strokeWidth="0.6">
-        <path d="M120 132H440 M120 176H440 M176 244H384 M176 288H384 M176 332H384" />
-        <path d="M176 100V352 M224 100V352 M336 100V352 M384 100V352" />
+        <path d="M88 132H472 M88 176H472 M176 232H384 M176 276H384 M176 320H384 M176 364H384" />
+        <path d="M144 100V198 M280 100V220 M416 100V198 M176 220V388 M384 220V388" />
       </g>
       <g opacity="0.37" strokeWidth="0.65">
         <path
-          d="M176 187V202L232 230 M384 187V202L328 230"
+          d="M144 187V198L224 218 M280 187V218 M416 187V198L336 218"
           strokeDasharray="3 5"
         />
-        <path d="M230 226 232 230 227 230 M330 226 328 230 333 230" />
-        <path d="M120 120v-8h18 M214 112h18v8 M328 120v-8h18 M422 112h18v8" />
-        <path d="M176 355H384 M176 349v12 M384 349v12 m-212-2 8-8 m200 8 8-8" />
+        <path d="M220 215 224 218 219 219 M277 214 280 218 283 214 M341 215 336 218 341 219" />
+        <path d="M88 120v-8h18 M182 112h18v8 M224 120v-8h18 M318 112h18v8 M360 120v-8h18 M454 112h18v8" />
+        <path d="M176 388H384 M176 382v12 M384 382v12 m-212-2 8-8 m200 8 8-8" />
       </g>
       <g strokeWidth="0.95">
         <rect
@@ -31,67 +30,85 @@ export function ParticlesBlueprint() {
           height="44"
           rx="8"
           width="112"
-          x="120"
+          x="88"
           y="132"
         />
-        <circle cx="142" cy="154" r="10" />
-        <path d="M138 154h8 M142 150v8" opacity="0.7" />
+        <circle cx="110" cy="154" r="10" />
+        <path d="M106 154h8 M110 150v8" opacity="0.7" />
         <rect
           fill="var(--color-sidebar)"
           height="44"
           rx="8"
           width="112"
-          x="328"
+          x="224"
           y="132"
         />
-        <rect height="18" rx="9" width="30" x="395" y="145" />
-        <circle cx="416" cy="154" r="5.5" />
+        <rect height="18" rx="9" width="30" x="291" y="145" />
+        <circle cx="312" cy="154" r="5.5" />
         <rect
           fill="var(--color-sidebar)"
-          height="88"
+          height="44"
+          rx="8"
+          width="112"
+          x="360"
+          y="132"
+        />
+        <path d="m453 151 3 3-3 3" opacity="0.55" />
+        <rect
+          fill="var(--color-sidebar)"
+          height="132"
           rx="11"
           width="208"
           x="176"
-          y="244"
+          y="232"
         />
-        <path d="M176 288H384" opacity="0.32" />
-        <circle cx="200" cy="266" r="10" />
-        <path d="M196 266h8 M200 262v8" opacity="0.7" />
-        <path d="m365 263 3 3-3 3" opacity="0.55" />
-        <rect height="18" rx="9" width="30" x="340" y="301" />
-        <circle cx="361" cy="310" r="5.5" />
+        <path d="M176 276H384 M176 320H384" opacity="0.32" />
+        <circle cx="200" cy="254" r="10" />
+        <path d="M196 254h8 M200 250v8" opacity="0.7" />
+        <rect height="18" rx="9" width="30" x="340" y="289" />
+        <circle cx="361" cy="298" r="5.5" />
+        <path d="m365 339 3 3-3 3" opacity="0.55" />
       </g>
       <g opacity="0.34" strokeWidth="0.6">
-        <path d="M190 234v20 M180 244h20 M370 322v20 M360 332h20" />
-        <path d="M156 244V332 M151 244h10 M151 332h10" />
-        <path d="M187 244a11 11 0 0 0-11 11 M373 332a11 11 0 0 0 11-11" />
+        <path d="M190 222v20 M180 232h20 M370 354v20 M360 364h20" />
+        <path d="M156 232V364 M151 232h10 M151 276h10 M151 320h10 M151 364h10" />
+        <path d="M187 232a11 11 0 0 0-11 11 M373 364a11 11 0 0 0 11-11" />
       </g>
       <g fill="currentColor" fontSize="11" opacity="0.76" stroke="none">
-        <text x="160" y="158">
+        <text x="128" y="158">
           Studio
         </text>
-        <text x="341" y="158">
+        <text x="237" y="158">
           Public
         </text>
-        <text x="220" y="270">
+        <text x="374" y="158">
+          Open
+        </text>
+        <text x="220" y="258">
           Studio
         </text>
-        <text x="190" y="314">
+        <text x="190" y="302">
           Public
         </text>
+        <text x="190" y="346">
+          Open
+        </text>
       </g>
       <g fill="currentColor" fontSize="10" opacity="0.52" stroke="none">
-        <text textAnchor="middle" x="176" y="97">
+        <text textAnchor="middle" x="144" y="97">
           A / Identity
         </text>
-        <text textAnchor="middle" x="384" y="97">
+        <text textAnchor="middle" x="280" y="97">
           B / Visibility
         </text>
-        <text textAnchor="middle" x="280" y="374">
-          A + B
+        <text textAnchor="middle" x="416" y="97">
+          C / Action
+        </text>
+        <text textAnchor="middle" x="280" y="408">
+          A + B + C
         </text>
-        <text textAnchor="end" x="145" y="292">
-          2u
+        <text textAnchor="end" x="145" y="302">
+          3u
         </text>
       </g>
       <Registration />

From bd177fcf63640732e370b5b34d62e1ab2011bde7 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 22:49:22 +0200
Subject: [PATCH 15/35] Link Cal.com from the home hero description

---
 apps/ui/app/page.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/ui/app/page.tsx b/apps/ui/app/page.tsx
index 1dbab31399..38af8e0cf6 100644
--- a/apps/ui/app/page.tsx
+++ b/apps/ui/app/page.tsx
@@ -38,7 +38,17 @@ export default function Page() {
           <PageHeaderHeading className="text-balance text-[clamp(2.25rem,1.5rem+2.6vw,4rem)] leading-none [font-variation-settings:'GEOM'_50] lg:text-[clamp(2.25rem,1.5rem+2.6vw,4rem)]">
             A modern React UI component library.
           </PageHeaderHeading>
-          <PageHeaderDescription>{description}</PageHeaderDescription>
+          <PageHeaderDescription>
+            Accessible React components we use to build{" "}
+            <Link
+              className="underline underline-offset-4 hover:text-foreground"
+              href="https://cal.com"
+            >
+              Cal.com
+            </Link>
+            , powered by Base UI and styled with Tailwind CSS. Designed for
+            developers and AI, with source code you can make your own.
+          </PageHeaderDescription>
           <div className="mt-1 flex flex-wrap gap-2">
             <Button render={<Link href="/docs" />} size="lg">
               Get started

From 986663b7eadd77a669965b7267c81bea5e8fe4a9 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 22:50:18 +0200
Subject: [PATCH 16/35] Match Particles description width to the home hero

---
 apps/ui/app/particles/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/app/particles/page.tsx b/apps/ui/app/particles/page.tsx
index 0f5103f7f5..44220a643a 100644
--- a/apps/ui/app/particles/page.tsx
+++ b/apps/ui/app/particles/page.tsx
@@ -64,7 +64,7 @@ export default function Page({
           <PageHeaderHeading className="text-balance text-[clamp(2.25rem,1.5rem+2.6vw,4rem)] leading-none [font-variation-settings:'GEOM'_50] lg:text-[clamp(2.25rem,1.5rem+2.6vw,4rem)]">
             Build more with Particles.
           </PageHeaderHeading>
-          <PageHeaderDescription className="max-w-lg text-pretty">
+          <PageHeaderDescription className="text-pretty">
             {description}
           </PageHeaderDescription>
           <Suspense>

From 0c6baf4effe3644eccd369cf01764a611659455d Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 22:53:10 +0200
Subject: [PATCH 17/35] Keep the Particles search popup below its field

---
 apps/ui/app/particles/search-field.tsx | 41 +++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/apps/ui/app/particles/search-field.tsx b/apps/ui/app/particles/search-field.tsx
index bfcc9a3ed7..0a0967d357 100644
--- a/apps/ui/app/particles/search-field.tsx
+++ b/apps/ui/app/particles/search-field.tsx
@@ -3,7 +3,7 @@
 import { LabelIcon, Search01Icon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import * as React from "react";
-import { useEffect, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { Index } from "@/registry/__index__";
 import {
   Combobox,
@@ -11,12 +11,13 @@ import {
   ComboboxChips,
   ComboboxChipsInput,
   ComboboxCollection,
+  ComboboxContext,
   ComboboxEmpty,
   ComboboxGroup,
   ComboboxGroupLabel,
   ComboboxItem,
   ComboboxList,
-  ComboboxPopup,
+  ComboboxPrimitive,
   ComboboxSeparator,
   ComboboxValue,
 } from "@/registry/default/ui/combobox";
@@ -177,7 +178,7 @@ export default function SearchField({
             )}
           </ComboboxValue>
         </ComboboxChips>
-        <ComboboxPopup>
+        <SearchPopup>
           <ComboboxEmpty>No filters found.</ComboboxEmpty>
           <ComboboxList>
             {(group: (typeof groupedItems)[number]) => (
@@ -213,8 +214,40 @@ export default function SearchField({
               </React.Fragment>
             )}
           </ComboboxList>
-        </ComboboxPopup>
+        </SearchPopup>
       </Combobox>
     </div>
   );
 }
+
+// Keep this page’s search below the field without changing the shared popup.
+function SearchPopup({ children }: { children: React.ReactNode }) {
+  const { chipsRef } = useContext(ComboboxContext);
+
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        align="start"
+        anchor={chipsRef}
+        className="z-50 select-none"
+        collisionAvoidance={{
+          side: "none",
+          align: "shift",
+          fallbackAxisSide: "none",
+        }}
+        data-slot="combobox-positioner"
+        side="bottom"
+        sideOffset={4}
+      >
+        <span className="relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]">
+          <ComboboxPrimitive.Popup
+            className="flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground"
+            data-slot="combobox-popup"
+          >
+            {children}
+          </ComboboxPrimitive.Popup>
+        </span>
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  );
+}

From 49aae8e14d23d6a368ba2d213f9f476c688a5939 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 22:55:51 +0200
Subject: [PATCH 18/35] Use a consistent background across the Chat page

---
 apps/ui/app/chat/chat-showcase.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/apps/ui/app/chat/chat-showcase.tsx b/apps/ui/app/chat/chat-showcase.tsx
index 99d3309023..c341000d53 100644
--- a/apps/ui/app/chat/chat-showcase.tsx
+++ b/apps/ui/app/chat/chat-showcase.tsx
@@ -179,7 +179,7 @@ export function ChatShowcase() {
 
           <section
             aria-labelledby="chat-features"
-            className="relative border-t bg-muted/24"
+            className="relative border-t"
           >
             <SectionMarkers />
             <div className="container py-14 md:py-20">
@@ -220,10 +220,7 @@ export function ChatShowcase() {
             </div>
           </section>
 
-          <section
-            aria-labelledby="chat-layouts"
-            className="relative border-t bg-muted/24"
-          >
+          <section aria-labelledby="chat-layouts" className="relative border-t">
             <SectionMarkers />
             <div className="container py-14 md:py-20">
               <SectionHeading

From 009f3421e12d20742954242e90c54f0bb49e8d16 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 23:01:30 +0200
Subject: [PATCH 19/35] Center Particles artwork and refine its construction
 grid

---
 apps/ui/components/particles-blueprint.tsx | 210 +++++++++++----------
 1 file changed, 113 insertions(+), 97 deletions(-)

diff --git a/apps/ui/components/particles-blueprint.tsx b/apps/ui/components/particles-blueprint.tsx
index d2a62d606f..9fd1964fa1 100644
--- a/apps/ui/components/particles-blueprint.tsx
+++ b/apps/ui/components/particles-blueprint.tsx
@@ -11,107 +11,123 @@ function Registration() {
 export function ParticlesBlueprint() {
   return (
     <BlueprintDrawing>
-      <g opacity="0.12" strokeWidth="0.6">
-        <path d="M88 132H472 M88 176H472 M176 232H384 M176 276H384 M176 320H384 M176 364H384" />
-        <path d="M144 100V198 M280 100V220 M416 100V198 M176 220V388 M384 220V388" />
-      </g>
-      <g opacity="0.37" strokeWidth="0.65">
-        <path
-          d="M144 187V198L224 218 M280 187V218 M416 187V198L336 218"
-          strokeDasharray="3 5"
-        />
-        <path d="M220 215 224 218 219 219 M277 214 280 218 283 214 M341 215 336 218 341 219" />
-        <path d="M88 120v-8h18 M182 112h18v8 M224 120v-8h18 M318 112h18v8 M360 120v-8h18 M454 112h18v8" />
-        <path d="M176 388H384 M176 382v12 M384 382v12 m-212-2 8-8 m200 8 8-8" />
-      </g>
-      <g strokeWidth="0.95">
-        <rect
-          fill="var(--color-sidebar)"
-          height="44"
-          rx="8"
-          width="112"
-          x="88"
-          y="132"
-        />
-        <circle cx="110" cy="154" r="10" />
-        <path d="M106 154h8 M110 150v8" opacity="0.7" />
+      <g transform="translate(0 -24)">
+        <g opacity="0.12" strokeWidth="0.6">
+          <path d="M72 132H488 M72 176H488 M72 232H488 M72 276H488 M72 320H488 M72 364H488" />
+          <path d="M88 112V380 M176 112V380 M200 112V380 M224 112V380 M336 112V380 M360 112V380 M384 112V380 M472 112V380" />
+        </g>
+        <g opacity="0.07" strokeWidth="0.6">
+          <path d="M72 154H488 M72 254H488 M72 298H488 M72 342H488" />
+        </g>
+        <g opacity="0.19" strokeDasharray="4 6" strokeWidth="0.6">
+          <path d="M144 112V176 M144 232V380 M280 112V176 M280 232V380 M416 112V176 M416 232V380" />
+        </g>
+        <g opacity="0.37" strokeWidth="0.65">
+          <path
+            d="M144 187V198L224 218 M280 187V218 M416 187V198L336 218"
+            strokeDasharray="3 5"
+          />
+          <path d="M220 215 224 218 219 219 M277 214 280 218 283 214 M341 215 336 218 341 219" />
+          <path d="M88 120v-8h18 M182 112h18v8 M224 120v-8h18 M318 112h18v8 M360 120v-8h18 M454 112h18v8" />
+          <path d="M176 388H384 M176 382v12 M384 382v12 m-212-2 8-8 m200 8 8-8" />
+        </g>
+        <g strokeWidth="0.95">
+          <rect
+            fill="var(--color-sidebar)"
+            height="44"
+            rx="8"
+            width="112"
+            x="88"
+            y="132"
+          />
+          <circle cx="110" cy="154" r="10" />
+          <path d="M106 154h8 M110 150v8" opacity="0.7" />
+          <rect
+            fill="var(--color-sidebar)"
+            height="44"
+            rx="8"
+            width="112"
+            x="224"
+            y="132"
+          />
+          <rect height="18" rx="9" width="30" x="291" y="145" />
+          <circle cx="312" cy="154" r="5.5" />
+          <rect
+            fill="var(--color-sidebar)"
+            height="44"
+            rx="8"
+            width="112"
+            x="360"
+            y="132"
+          />
+          <path d="m453 151 3 3-3 3" opacity="0.55" />
+          <rect
+            fill="var(--color-sidebar)"
+            height="132"
+            rx="11"
+            width="208"
+            x="176"
+            y="232"
+          />
+          <path d="M176 276H384 M176 320H384" opacity="0.32" />
+          <circle cx="200" cy="254" r="10" />
+          <path d="M196 254h8 M200 250v8" opacity="0.7" />
+          <rect height="18" rx="9" width="30" x="340" y="289" />
+          <circle cx="361" cy="298" r="5.5" />
+          <path d="m365 339 3 3-3 3" opacity="0.55" />
+        </g>
+        <g opacity="0.34" strokeWidth="0.6">
+          <path d="M190 222v20 M180 232h20 M370 354v20 M360 364h20" />
+          <path d="M156 232V364 M151 232h10 M151 276h10 M151 320h10 M151 364h10" />
+          <path d="M187 232a11 11 0 0 0-11 11 M373 364a11 11 0 0 0 11-11" />
+        </g>
+        <g fill="currentColor" fontSize="11" opacity="0.76" stroke="none">
+          <text x="128" y="158">
+            Studio
+          </text>
+          <text x="237" y="158">
+            Public
+          </text>
+          <text x="374" y="158">
+            Open
+          </text>
+          <text x="220" y="258">
+            Studio
+          </text>
+          <text x="190" y="302">
+            Public
+          </text>
+          <text x="190" y="346">
+            Open
+          </text>
+        </g>
         <rect
           fill="var(--color-sidebar)"
-          height="44"
-          rx="8"
-          width="112"
-          x="224"
-          y="132"
+          height="16"
+          stroke="none"
+          width="24"
+          x="126"
+          y="290"
         />
-        <rect height="18" rx="9" width="30" x="291" y="145" />
-        <circle cx="312" cy="154" r="5.5" />
-        <rect
-          fill="var(--color-sidebar)"
-          height="44"
-          rx="8"
-          width="112"
-          x="360"
-          y="132"
-        />
-        <path d="m453 151 3 3-3 3" opacity="0.55" />
-        <rect
-          fill="var(--color-sidebar)"
-          height="132"
-          rx="11"
-          width="208"
-          x="176"
-          y="232"
-        />
-        <path d="M176 276H384 M176 320H384" opacity="0.32" />
-        <circle cx="200" cy="254" r="10" />
-        <path d="M196 254h8 M200 250v8" opacity="0.7" />
-        <rect height="18" rx="9" width="30" x="340" y="289" />
-        <circle cx="361" cy="298" r="5.5" />
-        <path d="m365 339 3 3-3 3" opacity="0.55" />
-      </g>
-      <g opacity="0.34" strokeWidth="0.6">
-        <path d="M190 222v20 M180 232h20 M370 354v20 M360 364h20" />
-        <path d="M156 232V364 M151 232h10 M151 276h10 M151 320h10 M151 364h10" />
-        <path d="M187 232a11 11 0 0 0-11 11 M373 364a11 11 0 0 0 11-11" />
-      </g>
-      <g fill="currentColor" fontSize="11" opacity="0.76" stroke="none">
-        <text x="128" y="158">
-          Studio
-        </text>
-        <text x="237" y="158">
-          Public
-        </text>
-        <text x="374" y="158">
-          Open
-        </text>
-        <text x="220" y="258">
-          Studio
-        </text>
-        <text x="190" y="302">
-          Public
-        </text>
-        <text x="190" y="346">
-          Open
-        </text>
-      </g>
-      <g fill="currentColor" fontSize="10" opacity="0.52" stroke="none">
-        <text textAnchor="middle" x="144" y="97">
-          A / Identity
-        </text>
-        <text textAnchor="middle" x="280" y="97">
-          B / Visibility
-        </text>
-        <text textAnchor="middle" x="416" y="97">
-          C / Action
-        </text>
-        <text textAnchor="middle" x="280" y="408">
-          A + B + C
-        </text>
-        <text textAnchor="end" x="145" y="302">
-          3u
-        </text>
+        <g fill="currentColor" fontSize="10" opacity="0.52" stroke="none">
+          <text textAnchor="middle" x="144" y="97">
+            A / Identity
+          </text>
+          <text textAnchor="middle" x="280" y="97">
+            B / Visibility
+          </text>
+          <text textAnchor="middle" x="416" y="97">
+            C / Action
+          </text>
+          <text textAnchor="middle" x="280" y="408">
+            A + B + C
+          </text>
+          <text textAnchor="end" x="145" y="302">
+            3u
+          </text>
+        </g>
+        <Registration />
       </g>
-      <Registration />
     </BlueprintDrawing>
   );
 }

From 40c6c556fa0e851e57552ba6a2010a55539e7abc Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 23:04:35 +0200
Subject: [PATCH 20/35] Let Particles copy determine hero spacing

---
 apps/ui/app/particles/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/app/particles/page.tsx b/apps/ui/app/particles/page.tsx
index 44220a643a..1fbdc19b1e 100644
--- a/apps/ui/app/particles/page.tsx
+++ b/apps/ui/app/particles/page.tsx
@@ -71,7 +71,7 @@ export default function Page({
             <SearchContainer />
           </Suspense>
         </div>
-        <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:block">
+        <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:-my-24 lg:block">
           <ParticlesBlueprint />
         </div>
       </section>

From 2bddee7fa7060b6db2ba4165e5a4cb082a7d830f Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 23:07:00 +0200
Subject: [PATCH 21/35] Link the UI header logo to its own home page

---
 apps/ui/components/site-header.tsx     |  1 +
 packages/ui/src/shared/site-header.tsx | 10 +++++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/ui/components/site-header.tsx b/apps/ui/components/site-header.tsx
index 52cf2e81d8..51874e2476 100644
--- a/apps/ui/components/site-header.tsx
+++ b/apps/ui/components/site-header.tsx
@@ -12,6 +12,7 @@ export function SiteHeader() {
   return (
     <WorkspaceSiteHeader
       currentProduct="ui"
+      homeHref="/"
       mobileNav={
         <MobileNav
           className="flex lg:hidden"
diff --git a/packages/ui/src/shared/site-header.tsx b/packages/ui/src/shared/site-header.tsx
index cba7161ab3..663034d95e 100644
--- a/packages/ui/src/shared/site-header.tsx
+++ b/packages/ui/src/shared/site-header.tsx
@@ -8,17 +8,21 @@ export function SiteHeader({
   mobileNav,
   children,
   currentProduct,
+  homeHref,
   github,
 }: {
   mobileNav?: React.ReactNode;
   children?: React.ReactNode;
   currentProduct?: string;
+  /** App-relative logo destination. Next.js applies the configured base path. */
+  homeHref?: string;
   /** The product's own repository for the GitHub link and its stars. */
   github?: { repo: string; href: string };
 }) {
   const gatewayOrigin = process.env.NEXT_PUBLIC_COSS_URL || "";
   const gatewayHome = gatewayOrigin ? `${gatewayOrigin}/` : "/";
-  const isExternal = !!gatewayOrigin;
+  const logoHref = homeHref ?? gatewayHome;
+  const isExternal = homeHref === undefined && !!gatewayOrigin;
 
   return (
     <header className="sticky top-0 z-40 w-full bg-sidebar/80 backdrop-blur-sm before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border/64">
@@ -26,11 +30,11 @@ export function SiteHeader({
         {mobileNav}
         <div className="flex shrink-0 items-center gap-1.5 font-bold font-heading text-[1.375em] [font-variation-settings:'GEOM'_50,'opsz'_32] sm:text-2xl">
           {isExternal ? (
-            <a aria-label="Home" href={gatewayHome}>
+            <a aria-label="Home" href={logoHref}>
               coss.com
             </a>
           ) : (
-            <Link aria-label="Home" href={gatewayHome}>
+            <Link aria-label="Home" href={logoHref}>
               coss.com
             </Link>
           )}

From d0eb46e36f63ab55ad2df80e49c62c0179b70a34 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 23:09:09 +0200
Subject: [PATCH 22/35] Adjust Particles illustration vertical margins

---
 apps/ui/app/particles/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/app/particles/page.tsx b/apps/ui/app/particles/page.tsx
index 1fbdc19b1e..7faafaeb58 100644
--- a/apps/ui/app/particles/page.tsx
+++ b/apps/ui/app/particles/page.tsx
@@ -71,7 +71,7 @@ export default function Page({
             <SearchContainer />
           </Suspense>
         </div>
-        <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:-my-24 lg:block">
+        <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:-my-14 lg:block">
           <ParticlesBlueprint />
         </div>
       </section>

From a9cde134567613f3b7f9a0fb20a21b6d87e53905 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 23:10:31 +0200
Subject: [PATCH 23/35] Match home illustration margins to Particles

---
 apps/ui/app/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/app/page.tsx b/apps/ui/app/page.tsx
index 38af8e0cf6..9c1d99d72a 100644
--- a/apps/ui/app/page.tsx
+++ b/apps/ui/app/page.tsx
@@ -62,7 +62,7 @@ export default function Page() {
             </Button>
           </div>
         </div>
-        <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:block">
+        <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:-my-14 lg:block">
           <PrimitivesBlueprint />
         </div>
       </section>

From 54b847035b3047cbab8d07015ba3bb57f863e64c Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 23:13:50 +0200
Subject: [PATCH 24/35] Reserve Particles search space during loading

---
 apps/ui/app/particles/page.tsx             |  8 +++++---
 apps/ui/app/particles/search-container.tsx | 12 +++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/ui/app/particles/page.tsx b/apps/ui/app/particles/page.tsx
index 7faafaeb58..4dbc79b034 100644
--- a/apps/ui/app/particles/page.tsx
+++ b/apps/ui/app/particles/page.tsx
@@ -67,9 +67,11 @@ export default function Page({
           <PageHeaderDescription className="text-pretty">
             {description}
           </PageHeaderDescription>
-          <Suspense>
-            <SearchContainer />
-          </Suspense>
+          <div className="mt-2 min-h-12 w-full sm:min-h-11">
+            <Suspense>
+              <SearchContainer />
+            </Suspense>
+          </div>
         </div>
         <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:-my-14 lg:block">
           <ParticlesBlueprint />
diff --git a/apps/ui/app/particles/search-container.tsx b/apps/ui/app/particles/search-container.tsx
index bc160b2c7b..f2c3e3f020 100644
--- a/apps/ui/app/particles/search-container.tsx
+++ b/apps/ui/app/particles/search-container.tsx
@@ -50,12 +50,10 @@ export default function SearchContainer() {
   );
 
   return (
-    <div className="mt-2 w-full">
-      <SearchField
-        items={searchItems}
-        onItemsChange={updateSelectedItems}
-        selectedItems={selectedItems}
-      />
-    </div>
+    <SearchField
+      items={searchItems}
+      onItemsChange={updateSelectedItems}
+      selectedItems={selectedItems}
+    />
   );
 }

From 0a4620201341af85d8d06d8ba272bc4340486f65 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 23:14:55 +0200
Subject: [PATCH 25/35] Simplify horizontal guides in the Particles
 illustration

---
 apps/ui/components/particles-blueprint.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/ui/components/particles-blueprint.tsx b/apps/ui/components/particles-blueprint.tsx
index 9fd1964fa1..a1451dd1e9 100644
--- a/apps/ui/components/particles-blueprint.tsx
+++ b/apps/ui/components/particles-blueprint.tsx
@@ -13,12 +13,9 @@ export function ParticlesBlueprint() {
     <BlueprintDrawing>
       <g transform="translate(0 -24)">
         <g opacity="0.12" strokeWidth="0.6">
-          <path d="M72 132H488 M72 176H488 M72 232H488 M72 276H488 M72 320H488 M72 364H488" />
+          <path d="M72 132H488 M72 176H488 M72 232H488 M72 364H488" />
           <path d="M88 112V380 M176 112V380 M200 112V380 M224 112V380 M336 112V380 M360 112V380 M384 112V380 M472 112V380" />
         </g>
-        <g opacity="0.07" strokeWidth="0.6">
-          <path d="M72 154H488 M72 254H488 M72 298H488 M72 342H488" />
-        </g>
         <g opacity="0.19" strokeDasharray="4 6" strokeWidth="0.6">
           <path d="M144 112V176 M144 232V380 M280 112V176 M280 232V380 M416 112V176 M416 232V380" />
         </g>

From 993b65c4b957e579bfb426f572630dbef14abf08 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 23:16:29 +0200
Subject: [PATCH 26/35] Set both hero illustration margins to lg:-my-12

---
 apps/ui/app/page.tsx           | 2 +-
 apps/ui/app/particles/page.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/ui/app/page.tsx b/apps/ui/app/page.tsx
index 9c1d99d72a..6ed4d9a7e7 100644
--- a/apps/ui/app/page.tsx
+++ b/apps/ui/app/page.tsx
@@ -62,7 +62,7 @@ export default function Page() {
             </Button>
           </div>
         </div>
-        <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:-my-14 lg:block">
+        <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:-my-12 lg:block">
           <PrimitivesBlueprint />
         </div>
       </section>
diff --git a/apps/ui/app/particles/page.tsx b/apps/ui/app/particles/page.tsx
index 4dbc79b034..f74093a90d 100644
--- a/apps/ui/app/particles/page.tsx
+++ b/apps/ui/app/particles/page.tsx
@@ -73,7 +73,7 @@ export default function Page({
             </Suspense>
           </div>
         </div>
-        <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:-my-14 lg:block">
+        <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:-my-12 lg:block">
           <ParticlesBlueprint />
         </div>
       </section>

From fac88411d48021887fc4a108159223aced079878 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 23:20:11 +0200
Subject: [PATCH 27/35] Cap hero copy columns consistently across UI pages

---
 apps/ui/app/chat/chat-showcase.tsx | 4 ++--
 apps/ui/app/page.tsx               | 2 +-
 apps/ui/app/particles/page.tsx     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/ui/app/chat/chat-showcase.tsx b/apps/ui/app/chat/chat-showcase.tsx
index c341000d53..bb08bc9828 100644
--- a/apps/ui/app/chat/chat-showcase.tsx
+++ b/apps/ui/app/chat/chat-showcase.tsx
@@ -118,7 +118,7 @@ export function ChatShowcase() {
       renderTriggers={(select) => (
         <>
           <section className="container grid items-center gap-12 py-14 md:grid-cols-2 md:gap-14 md:py-20 lg:gap-24">
-            <div className="flex min-w-0 flex-col items-start">
+            <div className="flex w-full min-w-0 max-w-xl flex-col items-start">
               <Badge
                 variant="outline"
                 className="mb-6 h-7 gap-1.5 rounded-full px-2.5 text-xs shadow-xs/5 sm:h-7"
@@ -131,7 +131,7 @@ export function ChatShowcase() {
                 <br />
                 for conversation.
               </h1>
-              <p className="mt-6 max-w-md text-pretty text-lg text-muted-foreground">
+              <p className="mt-6 text-pretty text-lg text-muted-foreground">
                 Chat components for React with replies, reactions, mentions, and
                 delivery states built in. Copy the source and make it yours.
               </p>
diff --git a/apps/ui/app/page.tsx b/apps/ui/app/page.tsx
index 6ed4d9a7e7..1f712c6c4c 100644
--- a/apps/ui/app/page.tsx
+++ b/apps/ui/app/page.tsx
@@ -34,7 +34,7 @@ export default function Page() {
   return (
     <>
       <section className="container grid w-full items-center gap-6 py-10 md:py-14 lg:grid-cols-2 lg:gap-10 lg:py-16 xl:gap-16">
-        <div className="flex min-w-0 flex-col items-start gap-5 [font-optical-sizing:auto] [font-synthesis:none]">
+        <div className="flex w-full min-w-0 max-w-xl flex-col items-start gap-5 [font-optical-sizing:auto] [font-synthesis:none]">
           <PageHeaderHeading className="text-balance text-[clamp(2.25rem,1.5rem+2.6vw,4rem)] leading-none [font-variation-settings:'GEOM'_50] lg:text-[clamp(2.25rem,1.5rem+2.6vw,4rem)]">
             A modern React UI component library.
           </PageHeaderHeading>
diff --git a/apps/ui/app/particles/page.tsx b/apps/ui/app/particles/page.tsx
index f74093a90d..626c8c980d 100644
--- a/apps/ui/app/particles/page.tsx
+++ b/apps/ui/app/particles/page.tsx
@@ -60,7 +60,7 @@ export default function Page({
   return (
     <>
       <section className="container grid w-full items-center gap-6 py-10 md:py-14 lg:grid-cols-2 lg:gap-10 lg:py-16 xl:gap-16">
-        <div className="flex min-w-0 flex-col items-start gap-5 [font-optical-sizing:auto] [font-synthesis:none]">
+        <div className="flex w-full min-w-0 max-w-xl flex-col items-start gap-5 [font-optical-sizing:auto] [font-synthesis:none]">
           <PageHeaderHeading className="text-balance text-[clamp(2.25rem,1.5rem+2.6vw,4rem)] leading-none [font-variation-settings:'GEOM'_50] lg:text-[clamp(2.25rem,1.5rem+2.6vw,4rem)]">
             Build more with Particles.
           </PageHeaderHeading>

From 3b3a941f40c3dae8d9dae43b95e7f7679f70ceaa Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 23:21:48 +0200
Subject: [PATCH 28/35] Increase desktop hero spacing across UI pages

---
 apps/ui/app/chat/chat-showcase.tsx | 2 +-
 apps/ui/app/page.tsx               | 4 ++--
 apps/ui/app/particles/page.tsx     | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/ui/app/chat/chat-showcase.tsx b/apps/ui/app/chat/chat-showcase.tsx
index bb08bc9828..dd247c0358 100644
--- a/apps/ui/app/chat/chat-showcase.tsx
+++ b/apps/ui/app/chat/chat-showcase.tsx
@@ -117,7 +117,7 @@ export function ChatShowcase() {
     <ChatDemo
       renderTriggers={(select) => (
         <>
-          <section className="container grid items-center gap-12 py-14 md:grid-cols-2 md:gap-14 md:py-20 lg:gap-24">
+          <section className="container grid items-center gap-12 py-14 md:grid-cols-2 md:gap-14 md:py-20 lg:gap-24 lg:py-28">
             <div className="flex w-full min-w-0 max-w-xl flex-col items-start">
               <Badge
                 variant="outline"
diff --git a/apps/ui/app/page.tsx b/apps/ui/app/page.tsx
index 1f712c6c4c..8afe34a1fb 100644
--- a/apps/ui/app/page.tsx
+++ b/apps/ui/app/page.tsx
@@ -33,7 +33,7 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <>
-      <section className="container grid w-full items-center gap-6 py-10 md:py-14 lg:grid-cols-2 lg:gap-10 lg:py-16 xl:gap-16">
+      <section className="container grid w-full items-center gap-6 py-10 md:py-14 lg:grid-cols-2 lg:gap-10 lg:py-28 xl:gap-16">
         <div className="flex w-full min-w-0 max-w-xl flex-col items-start gap-5 [font-optical-sizing:auto] [font-synthesis:none]">
           <PageHeaderHeading className="text-balance text-[clamp(2.25rem,1.5rem+2.6vw,4rem)] leading-none [font-variation-settings:'GEOM'_50] lg:text-[clamp(2.25rem,1.5rem+2.6vw,4rem)]">
             A modern React UI component library.
@@ -62,7 +62,7 @@ export default function Page() {
             </Button>
           </div>
         </div>
-        <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:-my-12 lg:block">
+        <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:-my-24 lg:block">
           <PrimitivesBlueprint />
         </div>
       </section>
diff --git a/apps/ui/app/particles/page.tsx b/apps/ui/app/particles/page.tsx
index 626c8c980d..43f59e9c01 100644
--- a/apps/ui/app/particles/page.tsx
+++ b/apps/ui/app/particles/page.tsx
@@ -59,7 +59,7 @@ export default function Page({
 }) {
   return (
     <>
-      <section className="container grid w-full items-center gap-6 py-10 md:py-14 lg:grid-cols-2 lg:gap-10 lg:py-16 xl:gap-16">
+      <section className="container grid w-full items-center gap-6 py-10 md:py-14 lg:grid-cols-2 lg:gap-10 lg:py-28 xl:gap-16">
         <div className="flex w-full min-w-0 max-w-xl flex-col items-start gap-5 [font-optical-sizing:auto] [font-synthesis:none]">
           <PageHeaderHeading className="text-balance text-[clamp(2.25rem,1.5rem+2.6vw,4rem)] leading-none [font-variation-settings:'GEOM'_50] lg:text-[clamp(2.25rem,1.5rem+2.6vw,4rem)]">
             Build more with Particles.
@@ -73,7 +73,7 @@ export default function Page({
             </Suspense>
           </div>
         </div>
-        <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:-my-12 lg:block">
+        <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:-my-24 lg:block">
           <ParticlesBlueprint />
         </div>
       </section>

From b8fcf10b57aa9de0d6ba205d3455cd55e9c11836 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 23:23:03 +0200
Subject: [PATCH 29/35] Offset the Chat hero demo into its vertical padding

---
 apps/ui/app/chat/chat-showcase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/app/chat/chat-showcase.tsx b/apps/ui/app/chat/chat-showcase.tsx
index dd247c0358..12c2be06f3 100644
--- a/apps/ui/app/chat/chat-showcase.tsx
+++ b/apps/ui/app/chat/chat-showcase.tsx
@@ -158,7 +158,7 @@ export function ChatShowcase() {
                 Built with Base UI, Tailwind CSS, and Motion
               </p>
             </div>
-            <div className="mx-auto w-full max-w-md">
+            <div className="mx-auto w-full max-w-md lg:-my-24">
               <Tabs defaultValue="direct" className="gap-5">
                 <TabsList
                   aria-label="Conversation type"

From dc77bb084102f2e01166ece93c8583843c1d5050 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 23:23:58 +0200
Subject: [PATCH 30/35] Tighten the 404 illustration vertical spacing

---
 apps/ui/app/not-found.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/app/not-found.tsx b/apps/ui/app/not-found.tsx
index 4a5c45bf67..952792d1cb 100644
--- a/apps/ui/app/not-found.tsx
+++ b/apps/ui/app/not-found.tsx
@@ -19,7 +19,7 @@ export default function NotFound() {
   return (
     <>
       <section className="container flex w-full flex-1 flex-col items-center gap-5 py-10 text-center [font-optical-sizing:auto] [font-synthesis:none] md:py-14 lg:py-16">
-        <div className="pointer-events-none w-full max-w-112 select-none">
+        <div className="pointer-events-none w-full max-w-112 select-none lg:-my-12">
           <NotFoundBlueprint />
         </div>
         <PageHeaderHeading className="text-balance leading-[1.08] [font-variation-settings:'GEOM'_50]">

From 8ae9771a20a114a90dc2139e2e653920fb8505e1 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 23:25:41 +0200
Subject: [PATCH 31/35] Reduce the Chat hero demo negative margin

---
 apps/ui/app/chat/chat-showcase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/app/chat/chat-showcase.tsx b/apps/ui/app/chat/chat-showcase.tsx
index 12c2be06f3..b66af543c5 100644
--- a/apps/ui/app/chat/chat-showcase.tsx
+++ b/apps/ui/app/chat/chat-showcase.tsx
@@ -158,7 +158,7 @@ export function ChatShowcase() {
                 Built with Base UI, Tailwind CSS, and Motion
               </p>
             </div>
-            <div className="mx-auto w-full max-w-md lg:-my-24">
+            <div className="mx-auto w-full max-w-md lg:-my-12">
               <Tabs defaultValue="direct" className="gap-5">
                 <TabsList
                   aria-label="Conversation type"

From e6d243fefa806076109ac74d05e2e256cf22a02f Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sat, 24 Oct 2026 23:26:10 +0200
Subject: [PATCH 32/35] Set Chat demo vertical margin to lg:-my-16

---
 apps/ui/app/chat/chat-showcase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/app/chat/chat-showcase.tsx b/apps/ui/app/chat/chat-showcase.tsx
index b66af543c5..be2f95ef25 100644
--- a/apps/ui/app/chat/chat-showcase.tsx
+++ b/apps/ui/app/chat/chat-showcase.tsx
@@ -158,7 +158,7 @@ export function ChatShowcase() {
                 Built with Base UI, Tailwind CSS, and Motion
               </p>
             </div>
-            <div className="mx-auto w-full max-w-md lg:-my-12">
+            <div className="mx-auto w-full max-w-md lg:-my-16">
               <Tabs defaultValue="direct" className="gap-5">
                 <TabsList
                   aria-label="Conversation type"

From 7a0eee5afd95c0dab6eb15a94776aebb65816d6c Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sun, 25 Oct 2026 15:43:35 +0100
Subject: [PATCH 33/35] feat(ui): animate the home, Particles, and 404
 illustrations

---
 apps/ui/app/not-found.tsx                     |   5 +-
 apps/ui/app/page.tsx                          |   5 +-
 apps/ui/app/particles/page.tsx                |   5 +-
 apps/ui/components/blueprint-dimensions.tsx   |  29 +
 .../ui/components/blueprint-motion.module.css |  13 +
 apps/ui/components/blueprint-motion.tsx       |  86 +++
 apps/ui/components/not-found-blueprint.tsx    | 122 +++--
 apps/ui/components/not-found-motion.tsx       |  16 +
 .../components/particles-assembly-content.tsx | 109 ++++
 .../components/particles-assembly-drawing.tsx | 513 ++++++++++++++++++
 .../components/particles-assembly-geometry.ts | 178 ++++++
 apps/ui/components/particles-motion.tsx       |  13 +
 apps/ui/components/primitives-button.tsx      |  46 ++
 .../primitives-construction-motion.tsx        |  72 +++
 .../components/primitives-morph-details.tsx   | 213 ++++++++
 apps/ui/components/primitives-morph-style.ts  |   7 +
 apps/ui/components/primitives-morph-timing.ts |   7 +
 .../primitives-morph-transitions.tsx          | 142 +++++
 apps/ui/components/primitives-morph.tsx       | 305 +++++++++++
 apps/ui/components/primitives-motion.tsx      |  15 +
 apps/ui/components/primitives-slider.tsx      |  87 +++
 apps/ui/components/primitives-switch.tsx      | 112 ++++
 22 files changed, 2050 insertions(+), 50 deletions(-)
 create mode 100644 apps/ui/components/blueprint-dimensions.tsx
 create mode 100644 apps/ui/components/blueprint-motion.module.css
 create mode 100644 apps/ui/components/blueprint-motion.tsx
 create mode 100644 apps/ui/components/not-found-motion.tsx
 create mode 100644 apps/ui/components/particles-assembly-content.tsx
 create mode 100644 apps/ui/components/particles-assembly-drawing.tsx
 create mode 100644 apps/ui/components/particles-assembly-geometry.ts
 create mode 100644 apps/ui/components/particles-motion.tsx
 create mode 100644 apps/ui/components/primitives-button.tsx
 create mode 100644 apps/ui/components/primitives-construction-motion.tsx
 create mode 100644 apps/ui/components/primitives-morph-details.tsx
 create mode 100644 apps/ui/components/primitives-morph-style.ts
 create mode 100644 apps/ui/components/primitives-morph-timing.ts
 create mode 100644 apps/ui/components/primitives-morph-transitions.tsx
 create mode 100644 apps/ui/components/primitives-morph.tsx
 create mode 100644 apps/ui/components/primitives-motion.tsx
 create mode 100644 apps/ui/components/primitives-slider.tsx
 create mode 100644 apps/ui/components/primitives-switch.tsx

diff --git a/apps/ui/app/not-found.tsx b/apps/ui/app/not-found.tsx
index 952792d1cb..5d187f047d 100644
--- a/apps/ui/app/not-found.tsx
+++ b/apps/ui/app/not-found.tsx
@@ -8,6 +8,7 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { Button } from "@/registry/default/ui/button";
 import { NotFoundBlueprint } from "@/components/not-found-blueprint";
+import { NotFoundMotion } from "@/components/not-found-motion";
 
 export const metadata: Metadata = {
   description:
@@ -20,7 +21,9 @@ export default function NotFound() {
     <>
       <section className="container flex w-full flex-1 flex-col items-center gap-5 py-10 text-center [font-optical-sizing:auto] [font-synthesis:none] md:py-14 lg:py-16">
         <div className="pointer-events-none w-full max-w-112 select-none lg:-my-12">
-          <NotFoundBlueprint />
+          <NotFoundMotion>
+            <NotFoundBlueprint />
+          </NotFoundMotion>
         </div>
         <PageHeaderHeading className="text-balance leading-[1.08] [font-variation-settings:'GEOM'_50]">
           Page Not Found
diff --git a/apps/ui/app/page.tsx b/apps/ui/app/page.tsx
index 8afe34a1fb..d045079857 100644
--- a/apps/ui/app/page.tsx
+++ b/apps/ui/app/page.tsx
@@ -18,6 +18,7 @@ import {
 import { particles } from "@/registry/registry-particles";
 import { getCategoryThumbnail } from "@/components/category-thumbnails";
 import { PrimitivesBlueprint } from "@/components/primitives-blueprint";
+import { PrimitivesMotion } from "@/components/primitives-motion";
 import { categories } from "@/config/categories";
 import { PAGES_NEW } from "@/lib/docs";
 
@@ -63,7 +64,9 @@ export default function Page() {
           </div>
         </div>
         <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:-my-24 lg:block">
-          <PrimitivesBlueprint />
+          <PrimitivesMotion>
+            <PrimitivesBlueprint />
+          </PrimitivesMotion>
         </div>
       </section>
       <div className="relative before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-border/64">
diff --git a/apps/ui/app/particles/page.tsx b/apps/ui/app/particles/page.tsx
index 43f59e9c01..81bc348f46 100644
--- a/apps/ui/app/particles/page.tsx
+++ b/apps/ui/app/particles/page.tsx
@@ -9,6 +9,7 @@ import { particles } from "@/registry/registry-particles";
 import { ParticlesDisplay } from "./particles-display";
 import SearchContainer from "./search-container";
 import { ParticlesBlueprint } from "@/components/particles-blueprint";
+import { ParticlesMotion } from "@/components/particles-motion";
 
 const particleCount = particles.length;
 
@@ -74,7 +75,9 @@ export default function Page({
           </div>
         </div>
         <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:-my-24 lg:block">
-          <ParticlesBlueprint />
+          <ParticlesMotion>
+            <ParticlesBlueprint />
+          </ParticlesMotion>
         </div>
       </section>
       <div className="relative before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-border/64">
diff --git a/apps/ui/components/blueprint-dimensions.tsx b/apps/ui/components/blueprint-dimensions.tsx
new file mode 100644
index 0000000000..dfc082b4b6
--- /dev/null
+++ b/apps/ui/components/blueprint-dimensions.tsx
@@ -0,0 +1,29 @@
+export function HorizontalDimension({
+  x1,
+  x2,
+  y,
+  label,
+}: {
+  x1: number;
+  x2: number;
+  y: number;
+  label: string;
+}) {
+  return (
+    <>
+      <path
+        d={`M${x1} ${y}H${x2} M${x1} ${y - 6}v12 M${x2} ${y - 6}v12 M${x1 - 4} ${y + 4}l8-8 M${x2 - 4} ${y + 4}l8-8`}
+      />
+      <text
+        fill="currentColor"
+        fontSize="10"
+        stroke="none"
+        textAnchor="middle"
+        x={(x1 + x2) / 2}
+        y={y - 6}
+      >
+        {label}
+      </text>
+    </>
+  );
+}
diff --git a/apps/ui/components/blueprint-motion.module.css b/apps/ui/components/blueprint-motion.module.css
new file mode 100644
index 0000000000..3a33eeaf27
--- /dev/null
+++ b/apps/ui/components/blueprint-motion.module.css
@@ -0,0 +1,13 @@
+.animation {
+  display: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .drawing[data-live] .animation {
+    display: block;
+  }
+
+  .drawing[data-live] .original {
+    visibility: hidden;
+  }
+}
diff --git a/apps/ui/components/blueprint-motion.tsx b/apps/ui/components/blueprint-motion.tsx
new file mode 100644
index 0000000000..12f8265367
--- /dev/null
+++ b/apps/ui/components/blueprint-motion.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { PauseIcon, PlayIcon } from "lucide-react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import { useMediaQuery } from "@/registry/default/hooks/use-media-query";
+import { Button } from "@/registry/default/ui/button";
+import styles from "./blueprint-motion.module.css";
+
+export function BlueprintMotion({
+  children,
+  renderAnimation,
+  controlClassName = "bottom-0",
+}: {
+  children: ReactNode;
+  renderAnimation: (paused: boolean) => ReactNode;
+  controlClassName?: string;
+}) {
+  const drawing = useRef<HTMLDivElement>(null);
+  const animation = useRef<HTMLDivElement>(null);
+  const [hasEntered, setHasEntered] = useState(false);
+  const [inView, setInView] = useState(false);
+  const [pageVisible, setPageVisible] = useState(true);
+  const [paused, setPaused] = useState(false);
+  const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const live = hasEntered && !reducedMotion;
+  const stopped = paused || !inView || !pageVisible || !live;
+
+  useEffect(() => {
+    if (!drawing.current) return;
+    const observer = new IntersectionObserver(([entry]) => {
+      if (!entry) return;
+      setInView(entry.isIntersecting);
+      if (entry.isIntersecting) setHasEntered(true);
+    });
+    observer.observe(drawing.current);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const update = () => setPageVisible(!document.hidden);
+    update();
+    document.addEventListener("visibilitychange", update);
+    return () => document.removeEventListener("visibilitychange", update);
+  }, []);
+
+  useEffect(() => {
+    if (!live) return;
+    const svg = animation.current?.querySelector("svg");
+    if (!svg) return;
+    if (stopped) svg.pauseAnimations();
+    else svg.unpauseAnimations();
+  }, [stopped, live]);
+
+  return (
+    <div
+      className={`relative w-full select-none ${styles.drawing}`}
+      data-live={live || undefined}
+      ref={drawing}
+    >
+      <div className={`pointer-events-none ${styles.original}`}>{children}</div>
+      {live && (
+        <div
+          className={`pointer-events-none absolute inset-0 ${styles.animation}`}
+          ref={animation}
+        >
+          {renderAnimation(stopped)}
+        </div>
+      )}
+      {live && (
+        <Button
+          aria-label={paused ? "Resume illustration" : "Pause illustration"}
+          className={`pointer-events-auto absolute right-0 rounded-full text-muted-foreground motion-reduce:hidden ${controlClassName}`}
+          onClick={() => setPaused((value) => !value)}
+          size="icon-sm"
+          variant="ghost"
+        >
+          {paused ? (
+            <PlayIcon aria-hidden="true" />
+          ) : (
+            <PauseIcon aria-hidden="true" />
+          )}
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/apps/ui/components/not-found-blueprint.tsx b/apps/ui/components/not-found-blueprint.tsx
index db9281762c..a094b8d6fc 100644
--- a/apps/ui/components/not-found-blueprint.tsx
+++ b/apps/ui/components/not-found-blueprint.tsx
@@ -1,67 +1,95 @@
+import { HorizontalDimension } from "./blueprint-dimensions";
 import { BlueprintDrawing } from "./blueprint-drawing";
 
-export function NotFoundBlueprint() {
+function RequestRoute() {
+  return (
+    <>
+      <path d="M112 288H176A24 24 0 0 0 200 264V244A40 40 0 0 1 240 204H272 M112 304H176A40 40 0 0 0 216 264V244A24 24 0 0 1 240 220H272" />
+      <path d="M112 288V304 M272 204V220" />
+    </>
+  );
+}
+
+function AbsentPage({ dash = "3 5" }: { dash?: string }) {
+  return (
+    <g opacity="0.45" strokeDasharray={dash} strokeWidth="0.65">
+      <path d="M304 196V116H404L440 152V308H304V228 M404 116V152H440" />
+      <circle cx="304" cy="212" r="8" />
+      <path d="M280 204H296 M280 220H296" />
+    </g>
+  );
+}
+
+// The marker follows the true R32
+// centerline inside the 16-unit route; its 3.5-unit radius stays clear of the
+// closed end at x272. No part of the request crosses the 32-unit address gap.
+export function NotFoundBlueprint({
+  animated = false,
+}: {
+  animated?: boolean;
+}) {
   return (
     <BlueprintDrawing>
       <g opacity="0.1" strokeWidth="0.6">
-        <path d="M112 116H448M112 176H448M112 244H328M112 304H328M172 80V340M232 80V340M292 80V340M416 80V200" />
+        <path d="M112 256V280 M112 312V328 M176 312V328 M200 224V236 M216 272V284 M240 188V196 M304 100V108 M304 316V328 M404 100V108 M404 160V172 M440 100V144 M440 316V328" />
+        <path d="M96 288H104 M96 304H104 M288 116H296 M412 116H456 M288 308H296 M448 308H456" />
       </g>
-      <g opacity="0.25" strokeWidth="0.6">
-        <path d="M100 304H292M232 84V350M272 116H464" strokeDasharray="4 6" />
-        <circle cx="172" cy="244" r="60" strokeDasharray="3 6" />
-        <circle cx="292" cy="176" r="60" strokeDasharray="3 6" />
-        <path d="M164 244H180M172 236V252M284 176H300M292 168V184" />
+      <g opacity="0.24" strokeWidth="0.6">
+        <path
+          d="M296 212H348 M396 212H448 M372 100V196 M372 228V324"
+          strokeDasharray="8 3 1 3"
+        />
+        <path d="M240 204V196 M272 196V168 M304 196V168" />
+        <path d="M176 250V278 M162 264H190 M226 244H254 M240 230V258" />
       </g>
-
-      <path
-        d="M124 296H172A52 52 0 0 0 224 244V176A68 68 0 0 1 292 108H308V124H292A52 52 0 0 0 240 176V244A68 68 0 0 1 172 312H124Z"
-        fill="currentColor"
-        fillOpacity="0.025"
-        strokeWidth="0.95"
-      />
-      <path
-        d="M124 304H172A60 60 0 0 0 232 244V176A60 60 0 0 1 292 116H308"
-        opacity="0.27"
-        strokeDasharray="3 5"
-        strokeWidth="0.6"
-      />
-      <g opacity="0.38" strokeWidth="0.75">
-        <path d="M364 108H389.17M364 124H389.17M364 108V124" />
-        <circle cx="416" cy="116" r="28" strokeDasharray="3 5" />
-        <path d="M408 116H424M416 108V124" />
-      </g>
-      <g opacity="0.72" strokeWidth="0.8">
-        <path d="m303 103 10 26m46-26 10 26" />
+      <AbsentPage />
+      <g strokeWidth="0.95">
+        <RequestRoute />
+        {animated && (
+          <circle r="3.5">
+            <animateMotion
+              calcMode="spline"
+              dur="8.4s"
+              keyPoints="0;0;1;1;0;0"
+              keySplines="0 0 1 1;0.4 0 0.2 1;0 0 1 1;0.4 0 0.2 1;0 0 1 1"
+              keyTimes="0;0.1;0.48;0.58;0.9;1"
+              path="M122 296H176A32 32 0 0 0 208 264V244A32 32 0 0 1 240 212H266"
+              repeatCount="indefinite"
+            />
+          </circle>
+        )}
       </g>
-      <g opacity="0.45" strokeWidth="0.6">
-        <path d="M308 140V161M364 140V161M308 153H364m-60 4 8-8m48 8 8-8" />
-        <path d="M172 244 214.4 286.4m-6 0h6v-6" />
-        <path d="M124 332V356M172 332V356M124 348H140M156 348H172m-52 4 8-8m40 8 8-8" />
-        <path d="M224 184V212M240 184V212M224 200H240m-20 4 8-8m8 8 8-8M248 200H258" />
-        <path d="M416 156V188H440" />
+      <g
+        opacity="0.5"
+        strokeWidth="0.65"
+        strokeLinecap="butt"
+        strokeLinejoin="miter"
+      >
+        <HorizontalDimension label="u" x1={272} x2={304} y={160} />
+        <path d="M304 104V116H316 M428 308H440V296 M304 296V308H316" />
+        <path d="M304 328V348 M440 328V348" />
+        <HorizontalDimension label="Destination" x1={304} x2={440} y={354} />
+        <path d="M211.716 215.716 188 192H156 M205.716 215.716H211.716V209.716" />
       </g>
       <g fill="currentColor" fontSize="11" opacity="0.72" stroke="none">
-        <text textAnchor="middle" x="336" y="180">
-          Missing link
-        </text>
-        <text x="392" y="207">
-          Unresolved
-        </text>
-        <text x="124" y="282">
+        <text x="112" y="336">
           Request
         </text>
+        <text textAnchor="middle" x="372" y="216">
+          404
+        </text>
       </g>
       <g fill="currentColor" fontSize="10" opacity="0.5" stroke="none">
-        <text textAnchor="middle" x="148" y="351">
-          u
-        </text>
-        <text x="180" y="270">
-          R60
+        <text textAnchor="end" x="150" y="195">
+          R40
         </text>
-        <text x="264" y="204">
-          16
+        <text textAnchor="middle" x="372" y="386">
+          No page at this address
         </text>
       </g>
+      <g opacity="0.24" strokeWidth="0.6">
+        <path d="M94 84h12 M100 78v12 M454 372h12 M460 366v12" />
+      </g>
     </BlueprintDrawing>
   );
 }
diff --git a/apps/ui/components/not-found-motion.tsx b/apps/ui/components/not-found-motion.tsx
new file mode 100644
index 0000000000..20718b5dbd
--- /dev/null
+++ b/apps/ui/components/not-found-motion.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { BlueprintMotion } from "./blueprint-motion";
+import { NotFoundBlueprint } from "./not-found-blueprint";
+
+export function NotFoundMotion({ children }: { children: ReactNode }) {
+  return (
+    <BlueprintMotion
+      controlClassName="bottom-12"
+      renderAnimation={() => <NotFoundBlueprint animated />}
+    >
+      {children}
+    </BlueprintMotion>
+  );
+}
diff --git a/apps/ui/components/particles-assembly-content.tsx b/apps/ui/components/particles-assembly-content.tsx
new file mode 100644
index 0000000000..fc1232553c
--- /dev/null
+++ b/apps/ui/components/particles-assembly-content.tsx
@@ -0,0 +1,109 @@
+import type { ReactNode } from "react";
+
+export type AssemblyScene = "workspace" | "booking" | "activity";
+
+export function AssemblyContent({
+  scene,
+  part,
+  trailingMotion,
+  thumbMotion,
+}: {
+  scene: AssemblyScene;
+  part: 0 | 1 | 2;
+  trailingMotion?: ReactNode;
+  thumbMotion?: ReactNode;
+}) {
+  const label = {
+    workspace: ["Studio", "Public", "Open"],
+    booking: ["Wed 28", "10:30", "Meet"],
+    activity: ["", "", "Ready"],
+  }[scene][part];
+  const labelX = part === 0 || (scene === "booking" && part === 1) ? 40 : 14;
+
+  return (
+    <g
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="butt"
+      strokeLinejoin="miter"
+    >
+      <g strokeWidth="0.95">
+        {scene === "workspace" && part === 0 && (
+          <circle cx="22" cy="20" r="9" />
+        )}
+        {scene === "workspace" && part === 1 && (
+          <g>
+            {trailingMotion}
+            <rect height="18" rx="9" width="30" x="76" y="11" />
+            <circle cx="97" cy="20" r="5.5">
+              {thumbMotion}
+            </circle>
+          </g>
+        )}
+        {scene === "booking" && part === 0 && (
+          <rect height="16" rx="2" width="16" x="14" y="12" />
+        )}
+        {scene === "booking" && part === 1 && <circle cx="22" cy="20" r="8" />}
+        {scene === "booking" && part === 2 && (
+          <>
+            <rect height="12" rx="2" width="14" x="86" y="14" />
+            <path d="m100 18 7-4v12l-7-4" />
+          </>
+        )}
+        {scene === "activity" && part === 0 && (
+          <circle cx="24" cy="24" r="12" />
+        )}
+      </g>
+      <g opacity="0.5" strokeWidth="0.65">
+        {scene === "workspace" && part === 0 && <path d="M18 20h8 M22 16v8" />}
+        {scene === "workspace" && part === 2 && (
+          <g>
+            {trailingMotion}
+            <path d="M86 20h16 m-4.24-4.24L102 20l-4.24 4.24" />
+          </g>
+        )}
+        {scene === "booking" && part === 0 && (
+          <path d="M14 17h16 M18 10v5 M26 10v5 M18 21h4 M18 24h8" />
+        )}
+        {scene === "booking" && part === 1 && <path d="M22 15v5l4 2" />}
+        {scene === "activity" && part === 0 && (
+          <>
+            <circle cx="24" cy="20" r="3.5" />
+            <path d="M17 31a7 7 0 0 1 14 0" />
+          </>
+        )}
+        {scene === "activity" && part === 2 && <path d="m12 16 3 3 6-6" />}
+      </g>
+      {scene === "activity" ? (
+        <g fill="currentColor" stroke="none">
+          {part === 1 && (
+            <>
+              <text fontSize="11" opacity="0.76" x="12" y="20">
+                New reply
+              </text>
+              <text fontSize="10" opacity="0.52" x="12" y="35">
+                Maya · just now
+              </text>
+            </>
+          )}
+          {part === 2 && (
+            <text fontSize="11" opacity="0.76" x="27" y="20">
+              Ready
+            </text>
+          )}
+        </g>
+      ) : (
+        <text
+          fill="currentColor"
+          fontSize="11"
+          opacity="0.76"
+          stroke="none"
+          x={labelX}
+          y="24"
+        >
+          {label}
+        </text>
+      )}
+    </g>
+  );
+}
diff --git a/apps/ui/components/particles-assembly-drawing.tsx b/apps/ui/components/particles-assembly-drawing.tsx
new file mode 100644
index 0000000000..53cfbeacb6
--- /dev/null
+++ b/apps/ui/components/particles-assembly-drawing.tsx
@@ -0,0 +1,513 @@
+import { BlueprintDrawing } from "./blueprint-drawing";
+import {
+  AssemblyContent,
+  type AssemblyScene,
+} from "./particles-assembly-content";
+import {
+  type AssemblyAxis,
+  type AssemblyPart,
+  type Corner,
+  type Edge,
+  jointDuration,
+  jointNeighbor,
+  jointTime,
+  type ModuleGeometry,
+  outlineAt,
+  outlineTimes,
+  travel,
+} from "./particles-assembly-geometry";
+import { secondaryLine } from "./primitives-morph-style";
+
+export const particlesSequenceDuration = 16.2;
+const chapterDuration = particlesSequenceDuration / 3;
+const parts = [0, 1, 2] as const;
+type Part = AssemblyPart;
+type Frame = readonly [number, string | number];
+const edges: Edge[] = ["top", "right", "bottom", "left"];
+const corners: Corner[] = ["topLeft", "topRight", "bottomRight", "bottomLeft"];
+type Assembly = {
+  scene: AssemblyScene;
+  axis: AssemblyAxis;
+  unit: number;
+  labels: readonly [string, string, string];
+  modules: readonly [ModuleGeometry, ModuleGeometry, ModuleGeometry];
+  frame: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius: number;
+  };
+};
+const assemblies: Assembly[] = [
+  {
+    scene: "workspace",
+    axis: "vertical",
+    unit: 40,
+    labels: ["Identity", "Visibility", "Action"],
+    modules: [
+      { width: 120, targetWidth: 240, height: 40, radius: 8, x: 160, y: 224 },
+      { width: 120, targetWidth: 240, height: 40, radius: 8, x: 160, y: 264 },
+      { width: 120, targetWidth: 240, height: 40, radius: 8, x: 160, y: 304 },
+    ],
+    frame: { x: 160, y: 224, width: 240, height: 120, radius: 8 },
+  },
+  {
+    scene: "booking",
+    axis: "horizontal",
+    unit: 40,
+    labels: ["Date", "Time", "Meeting"],
+    modules: [
+      { width: 120, height: 40, radius: 8, x: 100, y: 264 },
+      { width: 120, height: 40, radius: 8, x: 220, y: 264 },
+      { width: 120, height: 40, radius: 8, x: 340, y: 264 },
+    ],
+    frame: { x: 100, y: 264, width: 360, height: 40, radius: 8 },
+  },
+  {
+    scene: "activity",
+    axis: "horizontal",
+    unit: 24,
+    labels: ["Avatar", "Message", "Status"],
+    modules: [
+      { width: 48, height: 48, radius: 8, x: 148, y: 260 },
+      { width: 144, height: 48, radius: 8, x: 196, y: 260 },
+      { width: 72, height: 32, targetHeight: 48, radius: 16, x: 340, y: 260 },
+    ],
+    frame: { x: 148, y: 260, width: 264, height: 48, radius: 8 },
+  },
+];
+
+function Motion({
+  index,
+  attributeName,
+  frames,
+  mode = "spline",
+}: {
+  index: number;
+  attributeName: string;
+  frames: readonly Frame[];
+  mode?: "spline" | "linear" | "discrete";
+}) {
+  const timeline = frames.map(
+    ([time, value]) => [time + index * chapterDuration, value] as const,
+  );
+  const first = timeline[0];
+  const last = timeline[timeline.length - 1];
+  if (!first || !last) return null;
+  if (first[0] > 0) timeline.unshift([0, first[1]]);
+  if (last[0] < particlesSequenceDuration)
+    timeline.push([particlesSequenceDuration, last[1]]);
+  const timing = {
+    attributeName,
+    begin: "0s",
+    dur: `${particlesSequenceDuration}s`,
+    repeatCount: "indefinite",
+    calcMode: mode,
+    keyTimes: timeline
+      .map(([time]) => time / particlesSequenceDuration)
+      .join(";"),
+    keySplines:
+      mode === "spline"
+        ? timeline
+            .slice(1)
+            .map(() => "0.4 0 0.2 1")
+            .join(";")
+        : undefined,
+    values: timeline.map(([, value]) => value).join(";"),
+  };
+  return attributeName === "transform" ? (
+    <animateTransform {...timing} type="translate" />
+  ) : (
+    <animate {...timing} />
+  );
+}
+
+function FragmentOutline({
+  assembly,
+  index,
+  part,
+}: {
+  assembly: Assembly;
+  index: number;
+  part: Part;
+}) {
+  const times = outlineTimes(assembly.modules, assembly.axis, part);
+  const geometry = times.map((time) =>
+    outlineAt(assembly.modules, assembly.axis, part, time),
+  );
+  const initial = outlineAt(assembly.modules, assembly.axis, part, 0);
+  return (
+    <g
+      data-fragment-outline={part}
+      strokeWidth="0.95"
+      strokeLinecap="butt"
+      strokeLinejoin="miter"
+    >
+      {edges.map((edge) => {
+        const neighbor = jointNeighbor(assembly.axis, part, edge);
+        // Only the facing strokes merge. The exterior corner arcs keep their weight.
+        const ownsDivider = edge === "bottom" || edge === "right";
+        const contact =
+          neighbor === undefined ? undefined : jointTime(part, neighbor);
+        return (
+          <path data-edge={edge} key={edge} d={initial[edge]}>
+            <Motion
+              index={index}
+              attributeName="d"
+              mode="linear"
+              frames={times.map((time, i) => [
+                time,
+                geometry[i]?.[edge] ?? initial[edge],
+              ])}
+            />
+            {contact !== undefined && (
+              <>
+                <Motion
+                  index={index}
+                  attributeName="opacity"
+                  frames={
+                    ownsDivider
+                      ? [
+                          [0, 1],
+                          [contact, 1],
+                          [contact + jointDuration, 0.5],
+                        ]
+                      : [
+                          [0, 1],
+                          [contact - 0.08, 1],
+                          [contact, 0],
+                        ]
+                  }
+                />
+                <Motion
+                  index={index}
+                  attributeName="stroke-width"
+                  frames={[
+                    [0, 0.95],
+                    [contact, 0.95],
+                    [contact + jointDuration, 0.65],
+                  ]}
+                />
+              </>
+            )}
+          </path>
+        );
+      })}
+      {corners.map((corner) => (
+        <path key={corner} data-corner={corner} d={initial[corner]}>
+          <Motion
+            index={index}
+            attributeName="d"
+            mode="linear"
+            frames={times.map((time, i) => [
+              time,
+              geometry[i]?.[corner] ?? initial[corner],
+            ])}
+          />
+        </path>
+      ))}
+    </g>
+  );
+}
+
+function Fragment({
+  assembly,
+  index,
+  part,
+}: {
+  assembly: Assembly;
+  index: number;
+  part: Part;
+}) {
+  const { scene } = assembly;
+  const module = assembly.modules[part];
+  const sourceX = 140 + part * 140 - module.width / 2;
+  const sourceY = 124 - module.height / 2;
+  const { start, end } = travel(part);
+  const grows = module.targetWidth !== undefined;
+  return (
+    <>
+      <rect
+        data-source-ghost={part}
+        x={sourceX}
+        y={sourceY}
+        width={module.width}
+        height={module.height}
+        rx={module.radius}
+        opacity="0"
+        strokeWidth="0.65"
+        strokeDasharray="4 6"
+      >
+        <Motion
+          index={index}
+          attributeName="opacity"
+          frames={[
+            [0, 0],
+            [start, 0],
+            [start + 0.12, 0.32],
+          ]}
+        />
+      </rect>
+      <g data-particle={part} transform={`translate(${sourceX} ${sourceY})`}>
+        <Motion
+          index={index}
+          attributeName="transform"
+          frames={[
+            [0, `${sourceX} ${sourceY}`],
+            [start, `${sourceX} ${sourceY}`],
+            [end, `${module.x} ${module.y}`],
+          ]}
+        />
+        <FragmentOutline assembly={assembly} index={index} part={part} />
+        <g>
+          {module.targetHeight !== undefined && (
+            <Motion
+              index={index}
+              attributeName="transform"
+              frames={[
+                [0, "0 0"],
+                [start, "0 0"],
+                [end, `0 ${(module.targetHeight - module.height) / 2}`],
+              ]}
+            />
+          )}
+          <AssemblyContent
+            scene={scene}
+            part={part}
+            trailingMotion={
+              grows ? (
+                <Motion
+                  index={index}
+                  attributeName="transform"
+                  frames={[
+                    [0, "0 0"],
+                    [start, "0 0"],
+                    [
+                      end,
+                      `${(module.targetWidth ?? module.width) - module.width} 0`,
+                    ],
+                  ]}
+                />
+              ) : undefined
+            }
+            thumbMotion={
+              scene === "workspace" ? (
+                <Motion
+                  index={index}
+                  attributeName="cx"
+                  frames={[
+                    [0, 97],
+                    [3, 97],
+                    [3.25, 85],
+                  ]}
+                />
+              ) : undefined
+            }
+          />
+        </g>
+      </g>
+    </>
+  );
+}
+
+function Receiver({ assembly, index }: { assembly: Assembly; index: number }) {
+  return (
+    <g data-receiver="" strokeDasharray="4 6" strokeWidth="0.65">
+      {parts.map((part) => {
+        const module = assembly.modules[part];
+        const final = outlineAt(
+          assembly.modules,
+          assembly.axis,
+          part,
+          chapterDuration,
+        );
+        const { end } = travel(part);
+        return (
+          <g
+            key={part}
+            transform={`translate(${module.x} ${module.y})`}
+            opacity="0.38"
+          >
+            <Motion
+              index={index}
+              attributeName="opacity"
+              frames={[
+                [0, 0.38],
+                [end - 0.1, 0.38],
+                [end, 0],
+              ]}
+            />
+            {edges
+              .filter(
+                (edge) =>
+                  jointNeighbor(assembly.axis, part, edge) === undefined,
+              )
+              .map((edge) => (
+                <path key={edge} d={final[edge]} />
+              ))}
+            {corners.map((corner) => (
+              <path key={corner} d={final[corner]} />
+            ))}
+          </g>
+        );
+      })}
+    </g>
+  );
+}
+
+function widthDimension(left: number, right: number, y: number) {
+  const center = (left + right) / 2;
+  return `M${left} ${y - 8}V${y + 8} M${right} ${y - 8}V${y + 8} M${left} ${y}H${center - 16} M${center + 16} ${y}H${right} M${left - 4} ${y + 4}l8-8 M${right - 4} ${y + 4}l8-8`;
+}
+
+function Measurements({
+  assembly,
+  index,
+}: {
+  assembly: Assembly;
+  index: number;
+}) {
+  const { frame } = assembly;
+  const right = frame.x + frame.width;
+  const bottom = frame.y + frame.height;
+  const cx = frame.x + frame.width / 2;
+  const cy = frame.y + frame.height / 2;
+  const dy = bottom + 32;
+  return (
+    <g data-measurements="assembly" opacity="0">
+      <Motion
+        index={index}
+        attributeName="opacity"
+        frames={[
+          [0, 0],
+          [2.35, 0],
+          [2.55, 1],
+        ]}
+      />
+      <path {...secondaryLine} d={widthDimension(frame.x, right, dy)} />
+      <path
+        {...secondaryLine}
+        d={`M${right + 10} ${frame.y}H${right + 42} M${right + 10} ${bottom}H${right + 42} M${right + 34} ${frame.y}V${cy - 10} M${right + 34} ${cy + 10}V${bottom} M${right + 30} ${frame.y + 4}l8-8 M${right + 30} ${bottom + 4}l8-8`}
+      />
+      <g
+        fill="currentColor"
+        fontSize="10"
+        opacity="0.58"
+        stroke="none"
+        textAnchor="middle"
+      >
+        <text x={right + 34} y={cy + 3}>
+          {frame.height / assembly.unit}u
+        </text>
+        <text x={cx} y={dy + 3}>
+          {frame.width / assembly.unit}u
+        </text>
+        <text x="280" y="428">
+          A + B + C
+        </text>
+      </g>
+    </g>
+  );
+}
+
+function Construction({ assembly }: { assembly: Assembly }) {
+  const { frame, scene, modules } = assembly;
+  const left = scene === "workspace" ? 140 : frame.x - 20;
+  const right = scene === "workspace" ? 420 : frame.x + frame.width + 20;
+  const top = frame.y - 20;
+  const bottom = frame.y + frame.height + 20;
+  return (
+    <>
+      <g data-construction="source-grid" opacity="0.08" strokeWidth="0.6">
+        <path d="M68 84H492 M68 164H492" />
+        {modules.flatMap((module, part) => {
+          const x = 140 + part * 140 - module.width / 2;
+          return [x, x + module.width / 2, x + module.width].map((column) => (
+            <path
+              key={`${part}-${column}`}
+              d={`M${column} 76V92 M${column} 156V172`}
+            />
+          ));
+        })}
+      </g>
+      {/* Each field is fixed; all guides stop outside the assembled content. */}
+      <g data-construction="assembly-grid" opacity="0.08" strokeWidth="0.6">
+        <path d={`M${left} ${top}H${right}V${bottom}H${left}Z`} />
+        {Array.from(
+          { length: Math.floor(frame.width / assembly.unit) + 1 },
+          (_, i) => frame.x + i * assembly.unit,
+        ).map((x) => (
+          <path
+            key={x}
+            d={`M${x} ${top - 8}V${top + 8} M${x} ${bottom - 8}V${bottom + 8}`}
+          />
+        ))}
+        <path
+          d={`M${left - 8} ${frame.y}H${left + 12} M${right - 12} ${frame.y}H${right + 8} M${left - 8} ${bottom - 20}H${left + 12} M${right - 12} ${bottom - 20}H${right + 8}`}
+        />
+      </g>
+      <g opacity="0.32" strokeWidth="0.65">
+        {[140, 280, 420].map((x) => (
+          <g key={x}>
+            <path d={`M${x} 198V176`} strokeDasharray="3 5" />
+            <path d={`M${x - 4.24} 193.76L${x} 198l4.24-4.24`} />
+          </g>
+        ))}
+      </g>
+      <path
+        {...secondaryLine}
+        d={`M56 84h12 M62 78v12 M${right + 6} ${bottom}h12 M${right + 12} ${bottom - 6}v12`}
+      />
+      <g
+        fill="currentColor"
+        fontSize="10"
+        opacity="0.58"
+        stroke="none"
+        textAnchor="middle"
+      >
+        {assembly.labels.map((label, part) => (
+          <text key={label} x={140 + part * 140} y="64">
+            {String.fromCharCode(65 + part)} / {label}
+          </text>
+        ))}
+      </g>
+    </>
+  );
+}
+
+export function ParticlesAssemblyDrawing() {
+  return (
+    <BlueprintDrawing>
+      {assemblies.map((assembly, index) => (
+        <g
+          data-assembly-scene={assembly.scene}
+          key={assembly.scene}
+          opacity="0"
+        >
+          <Motion
+            index={index}
+            attributeName="opacity"
+            frames={[
+              [0, 0],
+              [0.16, 1],
+              [4.95, 1],
+              [5.35, 0],
+            ]}
+          />
+          <Construction assembly={assembly} />
+          <Receiver assembly={assembly} index={index} />
+          {parts.map((part) => (
+            <Fragment
+              key={part}
+              assembly={assembly}
+              index={index}
+              part={part}
+            />
+          ))}
+          <Measurements assembly={assembly} index={index} />
+        </g>
+      ))}
+    </BlueprintDrawing>
+  );
+}
diff --git a/apps/ui/components/particles-assembly-geometry.ts b/apps/ui/components/particles-assembly-geometry.ts
new file mode 100644
index 0000000000..51a08f4f12
--- /dev/null
+++ b/apps/ui/components/particles-assembly-geometry.ts
@@ -0,0 +1,178 @@
+export type AssemblyPart = 0 | 1 | 2;
+export type Edge = "top" | "right" | "bottom" | "left";
+export type Corner = "topLeft" | "topRight" | "bottomRight" | "bottomLeft";
+export type AssemblyAxis = "vertical" | "horizontal";
+export type ModuleGeometry = {
+  width: number;
+  height: number;
+  radius: number;
+  x: number;
+  y: number;
+  targetWidth?: number;
+  targetHeight?: number;
+};
+
+const circleControl = 0.5522847498;
+const samplingRate = 60;
+export const jointDuration = 0.22;
+
+export function travel(part: AssemblyPart) {
+  const start = 0.45 + (2 - part) * 0.32;
+  return { start, end: start + 0.9 };
+}
+
+export function easing(progress: number) {
+  if (progress <= 0) return 0;
+  if (progress >= 1) return 1;
+
+  let low = 0;
+  let high = 1;
+  for (let iteration = 0; iteration < 32; iteration++) {
+    const position = (low + high) / 2;
+    const inverse = 1 - position;
+    const x =
+      3 * inverse * inverse * position * 0.4 +
+      3 * inverse * position * position * 0.2 +
+      position * position * position;
+    if (x < progress) low = position;
+    else high = position;
+  }
+
+  const position = (low + high) / 2;
+  return 3 * (1 - position) * position * position + position ** 3;
+}
+
+export function jointNeighbor(
+  axis: AssemblyAxis,
+  part: AssemblyPart,
+  edge: Edge,
+): AssemblyPart | undefined {
+  const previous = axis === "vertical" ? "top" : "left";
+  const next = axis === "vertical" ? "bottom" : "right";
+  if (edge === previous && part > 0) return (part - 1) as AssemblyPart;
+  if (edge === next && part < 2) return (part + 1) as AssemblyPart;
+  return undefined;
+}
+
+export function jointTime(part: AssemblyPart, neighbor: AssemblyPart) {
+  return Math.max(travel(part).end, travel(neighbor).end);
+}
+
+function flightProgress(part: AssemblyPart, time: number) {
+  const { start, end } = travel(part);
+  return easing((time - start) / (end - start));
+}
+
+export function sizeAt(
+  module: ModuleGeometry,
+  part: AssemblyPart,
+  time: number,
+) {
+  const progress = flightProgress(part, time);
+  return {
+    width:
+      module.width +
+      ((module.targetWidth ?? module.width) - module.width) * progress,
+    height:
+      module.height +
+      ((module.targetHeight ?? module.height) - module.height) * progress,
+    radius: module.radius + (8 - module.radius) * progress,
+    progress,
+  };
+}
+
+export function positionAt(
+  modules: readonly ModuleGeometry[],
+  _axis: AssemblyAxis,
+  part: AssemblyPart,
+  time: number,
+) {
+  const module = modules[part];
+  if (!module) throw new Error(`Missing assembly module ${part}`);
+  const progress = flightProgress(part, time);
+  const sourceX = 140 + part * 140 - module.width / 2;
+  const sourceY = 124 - module.height / 2;
+  return {
+    x: sourceX + (module.x - sourceX) * progress,
+    y: sourceY + (module.y - sourceY) * progress,
+  };
+}
+
+function coordinate(value: number) {
+  return Number(value.toFixed(4));
+}
+
+export function outlineAt(
+  modules: readonly ModuleGeometry[],
+  axis: AssemblyAxis,
+  part: AssemblyPart,
+  time: number,
+): Record<Edge | Corner, string> {
+  const module = modules[part];
+  if (!module) throw new Error(`Missing assembly module ${part}`);
+  const { width, height, radius } = sizeAt(module, part, time);
+
+  function corner(edge: Edge) {
+    const neighbor = jointNeighbor(axis, part, edge);
+    if (neighbor === undefined) return radius;
+    const contact = jointTime(part, neighbor);
+    return radius * (1 - easing((time - contact) / jointDuration));
+  }
+
+  const topLeft = corner(axis === "vertical" ? "top" : "left");
+  const topRight = corner(axis === "vertical" ? "top" : "right");
+  const bottomRight = corner(axis === "vertical" ? "bottom" : "right");
+  const bottomLeft = corner(axis === "vertical" ? "bottom" : "left");
+  const point = (x: number, y: number) => `${coordinate(x)} ${coordinate(y)}`;
+
+  // Separate arcs stay primary while only the straight mating edges become dividers.
+  return {
+    top: `M${point(topLeft, 0)} L${point(width - topRight, 0)}`,
+    right: `M${point(width, topRight)} L${point(width, height - bottomRight)}`,
+    bottom: `M${point(width - bottomRight, height)} L${point(bottomLeft, height)}`,
+    left: `M${point(0, height - bottomLeft)} L${point(0, topLeft)}`,
+    topLeft: `M${point(0, topLeft)} C${point(0, topLeft * (1 - circleControl))} ${point(topLeft * (1 - circleControl), 0)} ${point(topLeft, 0)}`,
+    topRight: `M${point(width - topRight, 0)} C${point(width - topRight * (1 - circleControl), 0)} ${point(width, topRight * (1 - circleControl))} ${point(width, topRight)}`,
+    bottomRight: `M${point(width, height - bottomRight)} C${point(width, height - bottomRight * (1 - circleControl))} ${point(width - bottomRight * (1 - circleControl), height)} ${point(width - bottomRight, height)}`,
+    bottomLeft: `M${point(bottomLeft, height)} C${point(bottomLeft * (1 - circleControl), height)} ${point(0, height - bottomLeft * (1 - circleControl))} ${point(0, height - bottomLeft)}`,
+  };
+}
+
+function addSamples(times: Set<number>, start: number, end: number) {
+  times.add(Number(start.toFixed(9)));
+  for (let sample = 1; start + sample / samplingRate < end; sample++) {
+    times.add(Number((start + sample / samplingRate).toFixed(9)));
+  }
+  times.add(Number(end.toFixed(9)));
+}
+
+export function sampleTimes(parts: readonly AssemblyPart[]) {
+  const times = new Set([0, 5.4]);
+  for (const part of parts) {
+    const { start, end } = travel(part);
+    addSamples(times, start, end);
+  }
+  return [...times].sort((a, b) => a - b);
+}
+
+export function outlineTimes(
+  _modules: readonly ModuleGeometry[],
+  axis: AssemblyAxis,
+  part: AssemblyPart,
+): number[] {
+  const participating: AssemblyPart[] = [part];
+  const edges: Edge[] =
+    axis === "vertical" ? ["top", "bottom"] : ["left", "right"];
+  for (const edge of edges) {
+    const neighbor = jointNeighbor(axis, part, edge);
+    if (neighbor !== undefined) participating.push(neighbor);
+  }
+  const times = new Set(sampleTimes(participating));
+  for (const edge of edges) {
+    const neighbor = jointNeighbor(axis, part, edge);
+    if (neighbor === undefined) continue;
+    const contact = jointTime(part, neighbor);
+    addSamples(times, contact, contact + jointDuration);
+  }
+  return [...times].sort((a, b) => a - b);
+}
diff --git a/apps/ui/components/particles-motion.tsx b/apps/ui/components/particles-motion.tsx
new file mode 100644
index 0000000000..15c17e45b5
--- /dev/null
+++ b/apps/ui/components/particles-motion.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { BlueprintMotion } from "./blueprint-motion";
+import { ParticlesAssemblyDrawing } from "./particles-assembly-drawing";
+
+export function ParticlesMotion({ children }: { children: ReactNode }) {
+  return (
+    <BlueprintMotion renderAnimation={() => <ParticlesAssemblyDrawing />}>
+      {children}
+    </BlueprintMotion>
+  );
+}
diff --git a/apps/ui/components/primitives-button.tsx b/apps/ui/components/primitives-button.tsx
new file mode 100644
index 0000000000..2a51c30d80
--- /dev/null
+++ b/apps/ui/components/primitives-button.tsx
@@ -0,0 +1,46 @@
+import {
+  ConstructionAnnotation,
+  ConstructionMotion,
+} from "./primitives-construction-motion";
+import { secondaryLine } from "./primitives-morph-style";
+
+export function ButtonConstruction() {
+  return (
+    <g>
+      <g opacity="0.22" strokeDasharray="3 4" strokeWidth="0.65">
+        <path d="M184 112V176 M184 232V296 M384 112V176 M384 232V296" />
+      </g>
+      <rect
+        {...secondaryLine}
+        fill="none"
+        height="40"
+        pathLength="1"
+        strokeDasharray="1"
+        strokeDashoffset="1"
+        width="200"
+        x="184"
+        y="184"
+      >
+        <ConstructionMotion
+          attributeName="stroke-dashoffset"
+          from={1}
+          stage={3}
+          to={0}
+        />
+      </rect>
+      <ConstructionAnnotation stage={3}>
+        <g {...secondaryLine}>
+          <path d="M124 250H140 M168 250H184 m-64 4 8-8 m52 8 8-8" />
+        </g>
+        <g fill="currentColor" fontSize="10" opacity="0.58" stroke="none">
+          <text textAnchor="middle" x="154" y="253">
+            1.5u
+          </text>
+          <text textAnchor="end" x="464" y="384">
+            04 / Button
+          </text>
+        </g>
+      </ConstructionAnnotation>
+    </g>
+  );
+}
diff --git a/apps/ui/components/primitives-construction-motion.tsx b/apps/ui/components/primitives-construction-motion.tsx
new file mode 100644
index 0000000000..f0f8a69754
--- /dev/null
+++ b/apps/ui/components/primitives-construction-motion.tsx
@@ -0,0 +1,72 @@
+import type { ReactNode } from "react";
+import {
+  morphCycleDuration,
+  morphKeyTimes,
+  morphStageDuration,
+} from "./primitives-morph-timing";
+
+// Construction finishes during the first second of each 2.4s hold. Reset only
+// after its parent is hidden, so subsequent cycles never flash the final state.
+export function ConstructionMotion({
+  attributeName,
+  delay = 0.12,
+  duration = 0.68,
+  from,
+  stage,
+  to,
+  type,
+}: {
+  attributeName: string;
+  delay?: number;
+  duration?: number;
+  from: string | number;
+  stage: number;
+  to: string | number;
+  type?: "rotate";
+}) {
+  const timing = {
+    attributeName,
+    begin: `${stage * morphStageDuration}s`,
+    calcMode: "spline" as const,
+    dur: `${morphCycleDuration}s`,
+    keySplines: "0 0 1 1;0.22 0 0.12 1;0 0 1 1;0 0 1 1;0 0 1 1",
+    keyTimes: morphKeyTimes(
+      0,
+      delay,
+      delay + duration,
+      2.45,
+      2.5,
+      morphCycleDuration,
+    ),
+    repeatCount: "indefinite",
+    values: [from, from, to, to, from, from].join(";"),
+  };
+
+  return type ? (
+    <animateTransform {...timing} type={type} />
+  ) : (
+    <animate {...timing} />
+  );
+}
+
+export function ConstructionAnnotation({
+  children,
+  stage,
+}: {
+  children: ReactNode;
+  stage: number;
+}) {
+  return (
+    <g opacity="0">
+      <ConstructionMotion
+        attributeName="opacity"
+        delay={0.78}
+        duration={0.16}
+        from={0}
+        stage={stage}
+        to={1}
+      />
+      {children}
+    </g>
+  );
+}
diff --git a/apps/ui/components/primitives-morph-details.tsx b/apps/ui/components/primitives-morph-details.tsx
new file mode 100644
index 0000000000..61c7c9f2dd
--- /dev/null
+++ b/apps/ui/components/primitives-morph-details.tsx
@@ -0,0 +1,213 @@
+import { ButtonConstruction } from "./primitives-button";
+import {
+  ConstructionAnnotation,
+  ConstructionMotion,
+} from "./primitives-construction-motion";
+import { secondaryLine } from "./primitives-morph-style";
+import { SliderConstruction } from "./primitives-slider";
+import { SwitchConstruction } from "./primitives-switch";
+
+export const morphDetailIds = [
+  "circle",
+  "capsule",
+  "switch",
+  "button",
+  "rounded",
+  "slider",
+] as const;
+
+export function MorphDetails({
+  hatchId,
+  stage,
+}: {
+  hatchId: string;
+  stage: (typeof morphDetailIds)[number];
+}) {
+  if (stage === "circle") {
+    const clipId = `${hatchId}-sector`;
+    return (
+      <g>
+        <defs>
+          <clipPath id={clipId}>
+            <rect height="800" width="800" x="-116" y="204">
+              <ConstructionMotion
+                attributeName="transform"
+                from="0 284 204"
+                stage={0}
+                to="-45 284 204"
+                type="rotate"
+              />
+            </rect>
+          </clipPath>
+        </defs>
+        <path
+          clipPath={`url(#${clipId})`}
+          d="M284 204H404A120 120 0 0 0 368.853 119.147Z"
+          fill={`url(#${hatchId})`}
+          stroke="none"
+        />
+        <g opacity="0.2" strokeDasharray="5 5" strokeWidth="0.65">
+          <path d="M152 204H416 M284 72V336" />
+        </g>
+        <g {...secondaryLine}>
+          <path d="M284 204H404" />
+          <g>
+            <ConstructionMotion
+              attributeName="transform"
+              from="0 284 204"
+              stage={0}
+              to="-45 284 204"
+              type="rotate"
+            />
+            <path d="M284 204H404 M404 200V208" />
+          </g>
+          <path
+            d="M312 204A28 28 0 0 0 303.799 184.201"
+            pathLength="1"
+            strokeDasharray="1"
+            strokeDashoffset="1"
+          >
+            <ConstructionMotion
+              attributeName="stroke-dashoffset"
+              from={1}
+              stage={0}
+              to={0}
+            />
+          </path>
+          <circle cx="284" cy="204" fill="none" r="3" />
+        </g>
+        <ConstructionAnnotation stage={0}>
+          <g fill="currentColor" fontSize="10" opacity="0.58" stroke="none">
+            <text
+              textAnchor="middle"
+              transform="rotate(-45 326 150)"
+              x="326"
+              y="150"
+            >
+              r = 3u
+            </text>
+            <text x="325" y="191">
+              45°
+            </text>
+            <text textAnchor="end" x="464" y="384">
+              01 / Avatar
+            </text>
+          </g>
+        </ConstructionAnnotation>
+      </g>
+    );
+  }
+
+  if (stage === "capsule") {
+    return (
+      <g>
+        <g opacity="0.3" strokeDasharray="4 4" strokeWidth="0.65">
+          {[204, 364].map((center) => (
+            <g key={center}>
+              <circle cx={center} cy="204" r="80" />
+              <path d={`M${center} 112V296`} />
+            </g>
+          ))}
+          <path d="M112 204H456" />
+        </g>
+        <g {...secondaryLine}>
+          {[204, 364].map((center) => (
+            <circle cx={center} cy="204" fill="none" key={center} r="3" />
+          ))}
+        </g>
+        <ConstructionAnnotation stage={1}>
+          <g transform="rotate(45 204 204)">
+            <path {...secondaryLine} d="M124 204H201 M124 199V209" />
+            <text
+              fill="currentColor"
+              fontSize="10"
+              opacity="0.58"
+              stroke="none"
+              textAnchor="middle"
+              x="164"
+              y="193"
+            >
+              2u
+            </text>
+          </g>
+          <g {...secondaryLine}>
+            <path d="M204 300V318 M364 300V318 M204 310H270 M298 310H364" />
+            <path d="m200 314 8-8 m152 8 8-8" />
+          </g>
+          <g fill="currentColor" fontSize="10" opacity="0.58" stroke="none">
+            <text textAnchor="middle" x="284" y="313">
+              4u
+            </text>
+            <text textAnchor="end" x="464" y="384">
+              02 / Pill
+            </text>
+          </g>
+        </ConstructionAnnotation>
+      </g>
+    );
+  }
+
+  if (stage === "switch") return <SwitchConstruction />;
+
+  if (stage === "button") return <ButtonConstruction />;
+
+  if (stage === "slider") return <SliderConstruction />;
+
+  if (stage === "rounded") {
+    return (
+      <g>
+        {/* A 1u inset of the R1u outline produces a sharp 4u square. */}
+        <rect
+          {...secondaryLine}
+          height="240"
+          rx="40"
+          width="240"
+          x="164"
+          y="84"
+        >
+          <ConstructionMotion attributeName="x" from={164} stage={4} to={204} />
+          <ConstructionMotion attributeName="y" from={84} stage={4} to={124} />
+          <ConstructionMotion
+            attributeName="width"
+            from={240}
+            stage={4}
+            to={160}
+          />
+          <ConstructionMotion
+            attributeName="height"
+            from={240}
+            stage={4}
+            to={160}
+          />
+          <ConstructionMotion attributeName="rx" from={40} stage={4} to={0} />
+        </rect>
+        <ConstructionAnnotation stage={4}>
+          <g opacity="0.26" strokeDasharray="3 4" strokeWidth="0.65">
+            <path d="M204 84V124H164 M364 324V284H404" />
+          </g>
+          <g {...secondaryLine}>
+            <path d="M204 134H214V124 M354 284V274H364" />
+            <path d="M364 224H404 m-44 4 8-8 m32 8 8-8" />
+            <path d="M204 292V318 M364 292V318 M204 310H270 M298 310H364" />
+            <path d="m200 314 8-8 m152 8 8-8" />
+            <circle cx="204" cy="124" fill="none" r="2.5" />
+            <circle cx="364" cy="284" fill="none" r="2.5" />
+          </g>
+          <g fill="currentColor" fontSize="10" opacity="0.58" stroke="none">
+            <text textAnchor="middle" x="384" y="215">
+              1u
+            </text>
+            <text textAnchor="middle" x="284" y="313">
+              4u
+            </text>
+            <text textAnchor="end" x="464" y="384">
+              05 / Card
+            </text>
+          </g>
+        </ConstructionAnnotation>
+      </g>
+    );
+  }
+
+  return null;
+}
diff --git a/apps/ui/components/primitives-morph-style.ts b/apps/ui/components/primitives-morph-style.ts
new file mode 100644
index 0000000000..4e375694fb
--- /dev/null
+++ b/apps/ui/components/primitives-morph-style.ts
@@ -0,0 +1,7 @@
+// The pill’s diagonal radius is the reference for continuous secondary lines.
+export const secondaryLine = {
+  opacity: 0.5,
+  strokeWidth: 0.65,
+  strokeLinecap: "butt",
+  strokeLinejoin: "miter",
+} as const;
diff --git a/apps/ui/components/primitives-morph-timing.ts b/apps/ui/components/primitives-morph-timing.ts
new file mode 100644
index 0000000000..afb6704a58
--- /dev/null
+++ b/apps/ui/components/primitives-morph-timing.ts
@@ -0,0 +1,7 @@
+export const morphStageDuration = 3.2;
+export const morphHoldDuration = 2.4;
+export const morphCycleDuration = 6 * morphStageDuration;
+
+export function morphKeyTimes(...seconds: number[]) {
+  return seconds.map((second) => second / morphCycleDuration).join(";");
+}
diff --git a/apps/ui/components/primitives-morph-transitions.tsx b/apps/ui/components/primitives-morph-transitions.tsx
new file mode 100644
index 0000000000..f2c6527e88
--- /dev/null
+++ b/apps/ui/components/primitives-morph-transitions.tsx
@@ -0,0 +1,142 @@
+import { secondaryLine } from "./primitives-morph-style";
+import { morphCycleDuration as duration } from "./primitives-morph-timing";
+
+type Timing = { start: number; end: number };
+
+const circleToCapsule = { start: 2.4, end: 3.2 };
+const buttonToCard = { start: 12, end: 12.8 };
+
+function TransitionVisibility({ start, end }: Timing) {
+  return (
+    <animate
+      attributeName="opacity"
+      begin="0s"
+      calcMode="linear"
+      dur={`${duration}s`}
+      keyTimes={[0, start - 0.18, start, end, end + 0.18, duration]
+        .map((time) => time / duration)
+        .join(";")}
+      repeatCount="indefinite"
+      values="0;0;1;1;0;0"
+    />
+  );
+}
+
+function TransitionMotion({
+  attributeName,
+  from,
+  to,
+  start,
+  end,
+}: Timing & {
+  attributeName: string;
+  from: string | number;
+  to: string | number;
+}) {
+  return (
+    <animate
+      attributeName={attributeName}
+      begin="0s"
+      calcMode="spline"
+      dur={`${duration}s`}
+      keySplines="0 0 1 1;0.4 0 0.2 1;0 0 1 1;0 0 1 1;0 0 1 1"
+      keyTimes={[0, start, end, end + 0.2, end + 0.24, duration]
+        .map((time) => time / duration)
+        .join(";")}
+      repeatCount="indefinite"
+      values={[from, from, to, to, from, from].join(";")}
+    />
+  );
+}
+
+const corners = [
+  { id: "top-right", x: 1, y: -1 },
+  { id: "bottom-right", x: 1, y: 1 },
+  { id: "bottom-left", x: -1, y: 1 },
+  { id: "top-left", x: -1, y: -1 },
+] as const;
+
+export function PrimitivesMorphTransitions() {
+  return (
+    <g>
+      <g data-transition="circle-to-capsule" opacity="0">
+        <TransitionVisibility {...circleToCapsule} />
+        <g opacity="0.3" strokeDasharray="4 4" strokeWidth="0.65">
+          {[204, 364].map((center) => (
+            <circle cx="284" cy="204" key={center} r="120">
+              <TransitionMotion
+                {...circleToCapsule}
+                attributeName="cx"
+                from={284}
+                to={center}
+              />
+              <TransitionMotion
+                {...circleToCapsule}
+                attributeName="r"
+                from={120}
+                to={80}
+              />
+            </circle>
+          ))}
+        </g>
+        <g {...secondaryLine}>
+          {[204, 364].map((center) => (
+            <circle cx="284" cy="204" key={center} r="3">
+              <TransitionMotion
+                {...circleToCapsule}
+                attributeName="cx"
+                from={284}
+                to={center}
+              />
+            </circle>
+          ))}
+        </g>
+      </g>
+      <g data-transition="button-to-card" opacity="0">
+        <TransitionVisibility {...buttonToCard} />
+        <g opacity="0.3" strokeDasharray="4 4" strokeWidth="0.65">
+          {corners.map(({ id, x, y }) => (
+            <circle cx={284 + x * 136} cy={204 + y * 56} key={id} r="24">
+              <TransitionMotion
+                {...buttonToCard}
+                attributeName="cx"
+                from={284 + x * 136}
+                to={284 + x * 80}
+              />
+              <TransitionMotion
+                {...buttonToCard}
+                attributeName="cy"
+                from={204 + y * 56}
+                to={204 + y * 80}
+              />
+              <TransitionMotion
+                {...buttonToCard}
+                attributeName="r"
+                from={24}
+                to={40}
+              />
+            </circle>
+          ))}
+        </g>
+        <g {...secondaryLine}>
+          {corners.map(({ id, x, y }) => (
+            <circle cx={284 + x * 136} cy={204 + y * 56} key={id} r="2.5">
+              <TransitionMotion
+                {...buttonToCard}
+                attributeName="cx"
+                from={284 + x * 136}
+                to={284 + x * 80}
+              />
+              <TransitionMotion
+                {...buttonToCard}
+                attributeName="cy"
+                from={204 + y * 56}
+                to={204 + y * 80}
+              />
+            </circle>
+          ))}
+        </g>
+      </g>
+    </g>
+  );
+}
diff --git a/apps/ui/components/primitives-morph.tsx b/apps/ui/components/primitives-morph.tsx
new file mode 100644
index 0000000000..a32ac132bf
--- /dev/null
+++ b/apps/ui/components/primitives-morph.tsx
@@ -0,0 +1,305 @@
+"use client";
+
+import { useEffect, useId, useRef } from "react";
+import { BlueprintDrawing } from "./blueprint-drawing";
+import { MorphDetails, morphDetailIds } from "./primitives-morph-details";
+import { secondaryLine } from "./primitives-morph-style";
+import {
+  morphCycleDuration,
+  morphHoldDuration,
+  morphKeyTimes,
+  morphStageDuration,
+} from "./primitives-morph-timing";
+import { PrimitivesMorphTransitions } from "./primitives-morph-transitions";
+import { SliderGridMask } from "./primitives-slider";
+import { SwitchThumb } from "./primitives-switch";
+
+type Shape = { width: number; height: number; corner: number };
+
+// All stages share four straight edges and four cubic corners, including the
+// circle’s zero-length edges. Matching topology keeps every point continuous.
+function construct({ width, height, corner: r }: Shape) {
+  const left = 284 - width / 2;
+  const right = 284 + width / 2;
+  const top = 204 - height / 2;
+  const bottom = 204 + height / 2;
+  const a = r * 0.55228475;
+  const points = {
+    "top-left": [left + r, top],
+    "top-right": [right - r, top],
+    "right-top": [right, top + r],
+    "right-bottom": [right, bottom - r],
+    "bottom-right": [right - r, bottom],
+    "bottom-left": [left + r, bottom],
+    "left-bottom": [left, bottom - r],
+    "left-top": [left, top + r],
+  } as const;
+  return {
+    points,
+    showHeight: height >= 40 ? 1 : 0,
+    outline: `M${left + r} ${top} L${right - r} ${top}
+      C${right - r + a} ${top} ${right} ${top + r - a} ${right} ${top + r}
+      L${right} ${bottom - r}
+      C${right} ${bottom - r + a} ${right - r + a} ${bottom} ${right - r} ${bottom}
+      L${left + r} ${bottom}
+      C${left + r - a} ${bottom} ${left} ${bottom - r + a} ${left} ${bottom - r}
+      L${left} ${top + r}
+      C${left} ${top + r - a} ${left + r - a} ${top} ${left + r} ${top} Z`,
+    // One continuous guide owns each extension; measurement marks never retrace it.
+    guides: `M${left} 38V348 M${right} 38V348
+      M${left - 24} ${top}H490 M${left - 24} ${bottom}H490
+      M164 348V372 M204 348V372`,
+    dimensions: `M${left} 46H264 M304 46H${right}
+      M${left - 4} 50l8-8 M${right - 4} 50l8-8`,
+    heightDimension: `M482 ${top}V190 M482 218V${bottom}
+      M478 ${top + 4}l8-8 M478 ${bottom + 4}l8-8`,
+  };
+}
+
+const circle = construct({ width: 240, height: 240, corner: 120 });
+const pill = construct({ width: 320, height: 160, corner: 80 });
+const stages = [
+  circle,
+  pill,
+  pill,
+  construct({ width: 320, height: 160, corner: 24 }),
+  construct({ width: 240, height: 240, corner: 40 }),
+  construct({ width: 320, height: 12, corner: 6 }),
+  circle,
+];
+
+// Every 3.2s: hold the finished form for 2.4s, then morph over 0.8s.
+// Repeated frames share the same SVG clock with their construction details.
+function Morph({
+  attributeName,
+  values,
+}: {
+  attributeName: string;
+  values: (string | number)[];
+}) {
+  return (
+    <animate
+      attributeName={attributeName}
+      calcMode="spline"
+      dur={`${morphCycleDuration}s`}
+      keySplines={values
+        .slice(0, -1)
+        .flatMap(() => ["0 0 1 1", "0.4 0 0.2 1"])
+        .join(";")}
+      keyTimes={morphKeyTimes(
+        ...values.flatMap((_, index) =>
+          index === values.length - 1
+            ? [morphCycleDuration]
+            : [
+                index * morphStageDuration,
+                index * morphStageDuration + morphHoldDuration,
+              ],
+        ),
+      )}
+      repeatCount="indefinite"
+      values={values
+        .flatMap((value, index) =>
+          index === values.length - 1 ? [value] : [value, value],
+        )
+        .join(";")}
+    />
+  );
+}
+
+const tangentIds = [
+  "top-left",
+  "top-right",
+  "right-top",
+  "right-bottom",
+  "bottom-right",
+  "bottom-left",
+  "left-bottom",
+  "left-top",
+] as const;
+
+const gridX = [124, 164, 204, 244, 284, 324, 364, 404, 444];
+const gridY = [84, 124, 164, 204, 244, 284, 324];
+
+export function PrimitivesMorph({ paused }: { paused: boolean }) {
+  const root = useRef<HTMLDivElement>(null);
+  const widthLabel = useRef<SVGTextElement>(null);
+  const heightLabel = useRef<SVGTextElement>(null);
+  const hatchId = useId();
+  const guideId = useId();
+  const gridMaskId = useId();
+
+  useEffect(() => {
+    const svg = root.current?.querySelector("svg");
+    if (!svg) return;
+    if (paused) svg.pauseAnimations();
+    else svg.unpauseAnimations();
+
+    const left = svg.querySelector<SVGCircleElement>(
+      '[data-anchor="left-bottom"]',
+    );
+    const right = svg.querySelector<SVGCircleElement>(
+      '[data-anchor="right-top"]',
+    );
+    const top = svg.querySelector<SVGCircleElement>('[data-anchor="top-left"]');
+    const bottom = svg.querySelector<SVGCircleElement>(
+      '[data-anchor="bottom-right"]',
+    );
+    let frame = 0;
+
+    function updateMeasurements() {
+      if (left && right && top && bottom) {
+        // Read the animated anchor coordinates, so numerical labels use exactly
+        // the same eased geometry as the SVG, including after pause/resume.
+        const width = `${Number(((right.cx.animVal.value - left.cx.animVal.value) / 40).toFixed(1))}u`;
+        const height = `${Number(((bottom.cy.animVal.value - top.cy.animVal.value) / 40).toFixed(1))}u`;
+        if (widthLabel.current && widthLabel.current.textContent !== width)
+          widthLabel.current.textContent = width;
+        if (heightLabel.current && heightLabel.current.textContent !== height)
+          heightLabel.current.textContent = height;
+      }
+      if (!paused) frame = requestAnimationFrame(updateMeasurements);
+    }
+
+    updateMeasurements();
+    return () => cancelAnimationFrame(frame);
+  }, [paused]);
+
+  return (
+    <div className="absolute inset-0" ref={root}>
+      <BlueprintDrawing>
+        <defs>
+          <path d={circle.guides} id={guideId}>
+            <Morph
+              attributeName="d"
+              values={stages.map((stage) => stage.guides)}
+            />
+          </path>
+          {/* Keep coincident grid lines from darkening the continuous guides. */}
+          <mask
+            height="440"
+            id={gridMaskId}
+            maskUnits="userSpaceOnUse"
+            style={{ maskType: "luminance" }}
+            width="560"
+            x="0"
+            y="0"
+          >
+            <rect fill="white" height="440" stroke="none" width="560" />
+            <use href={`#${guideId}`} stroke="black" strokeWidth="1.3" />
+            <SliderGridMask />
+          </mask>
+          {/* Origin at the circle center aligns a hatch line with its 45° radius. */}
+          <pattern
+            height="10"
+            id={hatchId}
+            patternTransform="translate(284 204)"
+            patternUnits="userSpaceOnUse"
+            width="10"
+          >
+            <path d="M0 10 10 0" opacity="0.27" strokeWidth="0.65" />
+          </pattern>
+        </defs>
+        <g mask={`url(#${gridMaskId})`} opacity="0.08" strokeWidth="0.6">
+          {gridX.map((x) => (
+            <path d={`M${x} 68V348`} key={x} />
+          ))}
+          {gridY.map((y) => (
+            <path d={`M104 ${y}H464`} key={y} />
+          ))}
+        </g>
+        <use href={`#${guideId}`} opacity="0.24" strokeWidth="0.65" />
+        <path {...secondaryLine} d={circle.dimensions}>
+          <Morph
+            attributeName="d"
+            values={stages.map((stage) => stage.dimensions)}
+          />
+        </path>
+        <g>
+          <Morph
+            attributeName="opacity"
+            values={stages.map((stage) => stage.showHeight)}
+          />
+          <path {...secondaryLine} d={circle.heightDimension}>
+            <Morph
+              attributeName="d"
+              values={stages.map((stage) => stage.heightDimension)}
+            />
+          </path>
+        </g>
+        <path d={circle.outline} strokeWidth="1">
+          <Morph
+            attributeName="d"
+            values={stages.map((stage) => stage.outline)}
+          />
+        </path>
+        <g strokeWidth="0.8">
+          <Morph
+            attributeName="opacity"
+            values={stages.map((stage) => stage.showHeight)}
+          />
+          {tangentIds.map((id) => (
+            <circle
+              data-anchor={id}
+              cx={circle.points[id][0]}
+              cy={circle.points[id][1]}
+              key={id}
+              r="2.5"
+            >
+              <Morph
+                attributeName="cx"
+                values={stages.map((stage) => stage.points[id][0])}
+              />
+              <Morph
+                attributeName="cy"
+                values={stages.map((stage) => stage.points[id][1])}
+              />
+            </circle>
+          ))}
+        </g>
+        <PrimitivesMorphTransitions />
+        {morphDetailIds.map((stage, index) => (
+          <g data-construction={stage} key={stage} opacity="0">
+            <animate
+              attributeName="opacity"
+              begin={`${index * morphStageDuration}s`}
+              dur={`${morphCycleDuration}s`}
+              keyTimes={morphKeyTimes(
+                0,
+                0.18,
+                2.2,
+                morphHoldDuration,
+                morphCycleDuration,
+              )}
+              repeatCount="indefinite"
+              values="0;1;1;0;0"
+            />
+            <MorphDetails hatchId={hatchId} stage={stage} />
+          </g>
+        ))}
+        <g fill="currentColor" fontSize="10" opacity="0.52" stroke="none">
+          <text ref={widthLabel} textAnchor="middle" x="284" y="49">
+            6u
+          </text>
+          <g>
+            <Morph
+              attributeName="opacity"
+              values={stages.map((stage) => stage.showHeight)}
+            />
+            <text ref={heightLabel} textAnchor="middle" x="482" y="207">
+              6u
+            </text>
+          </g>
+          <text textAnchor="middle" x="184" y="384">
+            u
+          </text>
+        </g>
+        <g {...secondaryLine}>
+          <path d="M164 364H204 m-44 4 8-8 m32 8 8-8" />
+          <path d="M76 82h12 M82 76v12 M470 340h12 M476 334v12 M278 204h12 M284 198v12" />
+          <path d="M266 401h36 M284 395v12" />
+        </g>
+        <SwitchThumb />
+      </BlueprintDrawing>
+    </div>
+  );
+}
diff --git a/apps/ui/components/primitives-motion.tsx b/apps/ui/components/primitives-motion.tsx
new file mode 100644
index 0000000000..2ded2416cc
--- /dev/null
+++ b/apps/ui/components/primitives-motion.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { BlueprintMotion } from "./blueprint-motion";
+import { PrimitivesMorph } from "./primitives-morph";
+
+export function PrimitivesMotion({ children }: { children: ReactNode }) {
+  return (
+    <BlueprintMotion
+      renderAnimation={(paused) => <PrimitivesMorph paused={paused} />}
+    >
+      {children}
+    </BlueprintMotion>
+  );
+}
diff --git a/apps/ui/components/primitives-slider.tsx b/apps/ui/components/primitives-slider.tsx
new file mode 100644
index 0000000000..a3d9006c54
--- /dev/null
+++ b/apps/ui/components/primitives-slider.tsx
@@ -0,0 +1,87 @@
+import {
+  ConstructionAnnotation,
+  ConstructionMotion,
+} from "./primitives-construction-motion";
+import { secondaryLine } from "./primitives-morph-style";
+import {
+  morphCycleDuration,
+  morphHoldDuration,
+  morphKeyTimes,
+  morphStageDuration,
+} from "./primitives-morph-timing";
+
+const travelGuides = "M204 116V292 M364 116V292 M204 164H364 M204 244H364";
+const scalePositions = [124, 164, 204, 244, 284, 324, 364, 404, 444];
+
+// Remove only coincident grid strokes, so the construction dashes retain gaps.
+export function SliderGridMask() {
+  return (
+    <g opacity="0">
+      <animate
+        attributeName="opacity"
+        begin={`${5 * morphStageDuration}s`}
+        dur={`${morphCycleDuration}s`}
+        keyTimes={morphKeyTimes(
+          0,
+          0.18,
+          2.2,
+          morphHoldDuration,
+          morphCycleDuration,
+        )}
+        repeatCount="indefinite"
+        values="0;1;1;0;0"
+      />
+      <path d={travelGuides} stroke="black" strokeWidth="1.3" />
+    </g>
+  );
+}
+
+export function SliderConstruction() {
+  return (
+    <g>
+      <g opacity="0.38" strokeDasharray="4 4" strokeWidth="0.65">
+        <path d={travelGuides} />
+        <circle cx="204" cy="204" r="40" />
+      </g>
+      <circle cx="204" cy="204" fill="none" r="40" strokeWidth="1">
+        <ConstructionMotion
+          attributeName="cx"
+          delay={0.3}
+          duration={0.55}
+          from={204}
+          stage={5}
+          to={364}
+        />
+      </circle>
+      <g {...secondaryLine}>
+        <path d="M124 292H444" />
+        {scalePositions.map((x, index) => {
+          const halfTick = index % 2 === 0 ? 4 : 2;
+          return <path d={`M${x} ${292 - halfTick}v${2 * halfTick}`} key={x} />;
+        })}
+      </g>
+      <ConstructionAnnotation stage={5}>
+        <g {...secondaryLine}>
+          <path d="M204 132H270 M298 132H364 m-164 4 8-8 m152 8 8-8" />
+        </g>
+        <g fill="currentColor" fontSize="10" opacity="0.58" stroke="none">
+          <text textAnchor="middle" x="284" y="135">
+            4u
+          </text>
+          <text textAnchor="middle" x="124" y="312">
+            0%
+          </text>
+          <text textAnchor="middle" x="284" y="312">
+            50%
+          </text>
+          <text textAnchor="middle" x="444" y="312">
+            100%
+          </text>
+          <text textAnchor="end" x="464" y="384">
+            06 / Slider
+          </text>
+        </g>
+      </ConstructionAnnotation>
+    </g>
+  );
+}
diff --git a/apps/ui/components/primitives-switch.tsx b/apps/ui/components/primitives-switch.tsx
new file mode 100644
index 0000000000..7918526b0c
--- /dev/null
+++ b/apps/ui/components/primitives-switch.tsx
@@ -0,0 +1,112 @@
+import { ConstructionAnnotation } from "./primitives-construction-motion";
+import { secondaryLine } from "./primitives-morph-style";
+import {
+  morphCycleDuration as duration,
+  morphKeyTimes as keyTimes,
+} from "./primitives-morph-timing";
+
+const radiusEndpoint = -60 / Math.sqrt(2);
+
+export function SwitchConstruction() {
+  return (
+    <g>
+      <path
+        d="M112 204H456"
+        opacity="0.24"
+        strokeDasharray="4 4"
+        strokeWidth="0.65"
+      />
+      <circle
+        cx="204"
+        cy="204"
+        fill="none"
+        opacity="0.14"
+        r="60"
+        strokeWidth="0.65"
+      />
+      <ConstructionAnnotation stage={2}>
+        <g {...secondaryLine}>
+          <path d="M204 300V318 M364 300V318 M204 310H270 M298 310H364" />
+          <path d="m200 314 8-8 m152 8 8-8" />
+        </g>
+        <g fill="currentColor" fontSize="10" opacity="0.58" stroke="none">
+          <text textAnchor="middle" x="284" y="313">
+            4u
+          </text>
+          <text textAnchor="end" x="464" y="384">
+            03 / Switch
+          </text>
+        </g>
+      </ConstructionAnnotation>
+    </g>
+  );
+}
+
+export function SwitchThumb() {
+  return (
+    <g data-construction="switch-thumb" opacity="0">
+      <animate
+        attributeName="opacity"
+        begin="0s"
+        calcMode="linear"
+        dur={`${duration}s`}
+        keyTimes={keyTimes(0, 5.42, 5.6, 8.6, 8.8, duration)}
+        repeatCount="indefinite"
+        values="0;0;1;1;0;0"
+      />
+      <g transform="translate(204 204)">
+        {/* Geometry resets after the whole thumb is hidden. */}
+        <animateTransform
+          attributeName="transform"
+          begin="0s"
+          calcMode="spline"
+          dur={`${duration}s`}
+          keySplines="0 0 1 1;0.4 0 0.2 1;0 0 1 1;0 0 1 1;0 0 1 1"
+          keyTimes={keyTimes(0, 6.9, 7.4, 8.82, 8.86, duration)}
+          repeatCount="indefinite"
+          type="translate"
+          values="204 204;204 204;364 204;364 204;204 204;204 204"
+        />
+        <circle fill="none" r="80" strokeWidth="0.85">
+          <animate
+            attributeName="r"
+            begin="0s"
+            calcMode="spline"
+            dur={`${duration}s`}
+            keySplines="0 0 1 1;0.4 0 0.2 1;0 0 1 1;0 0 1 1;0 0 1 1"
+            keyTimes={keyTimes(0, 5.6, 6.4, 8.82, 8.86, duration)}
+            repeatCount="indefinite"
+            values="80;80;60;60;80;80"
+          />
+        </circle>
+        <g opacity="0">
+          <animate
+            attributeName="opacity"
+            begin="0s"
+            calcMode="linear"
+            dur={`${duration}s`}
+            keyTimes={keyTimes(0, 7.4, 7.58, 8.82, 8.86, duration)}
+            repeatCount="indefinite"
+            values="0;0;1;1;0;0"
+          />
+          <path
+            {...secondaryLine}
+            d={`M0 0L${radiusEndpoint} ${radiusEndpoint} M${radiusEndpoint - 3} ${radiusEndpoint + 3}l6-6`}
+          />
+          <text
+            fill="currentColor"
+            fontSize="10"
+            opacity="0.58"
+            stroke="none"
+            textAnchor="middle"
+            transform="rotate(45 -23 -34)"
+            x="-23"
+            y="-34"
+          >
+            1.5u
+          </text>
+        </g>
+      </g>
+    </g>
+  );
+}

From 338ddb88f45e4ba2dbb0e09d31dd0e9c34db8552 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sun, 25 Oct 2026 15:47:18 +0100
Subject: [PATCH 34/35] fix(ui): remove illustration playback controls

---
 apps/ui/components/blueprint-motion.tsx | 22 +---------------------
 apps/ui/components/not-found-motion.tsx |  5 +----
 2 files changed, 2 insertions(+), 25 deletions(-)

diff --git a/apps/ui/components/blueprint-motion.tsx b/apps/ui/components/blueprint-motion.tsx
index 12f8265367..0c3005b36f 100644
--- a/apps/ui/components/blueprint-motion.tsx
+++ b/apps/ui/components/blueprint-motion.tsx
@@ -1,29 +1,24 @@
 "use client";
 
-import { PauseIcon, PlayIcon } from "lucide-react";
 import { type ReactNode, useEffect, useRef, useState } from "react";
 import { useMediaQuery } from "@/registry/default/hooks/use-media-query";
-import { Button } from "@/registry/default/ui/button";
 import styles from "./blueprint-motion.module.css";
 
 export function BlueprintMotion({
   children,
   renderAnimation,
-  controlClassName = "bottom-0",
 }: {
   children: ReactNode;
   renderAnimation: (paused: boolean) => ReactNode;
-  controlClassName?: string;
 }) {
   const drawing = useRef<HTMLDivElement>(null);
   const animation = useRef<HTMLDivElement>(null);
   const [hasEntered, setHasEntered] = useState(false);
   const [inView, setInView] = useState(false);
   const [pageVisible, setPageVisible] = useState(true);
-  const [paused, setPaused] = useState(false);
   const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
   const live = hasEntered && !reducedMotion;
-  const stopped = paused || !inView || !pageVisible || !live;
+  const stopped = !inView || !pageVisible || !live;
 
   useEffect(() => {
     if (!drawing.current) return;
@@ -66,21 +61,6 @@ export function BlueprintMotion({
           {renderAnimation(stopped)}
         </div>
       )}
-      {live && (
-        <Button
-          aria-label={paused ? "Resume illustration" : "Pause illustration"}
-          className={`pointer-events-auto absolute right-0 rounded-full text-muted-foreground motion-reduce:hidden ${controlClassName}`}
-          onClick={() => setPaused((value) => !value)}
-          size="icon-sm"
-          variant="ghost"
-        >
-          {paused ? (
-            <PlayIcon aria-hidden="true" />
-          ) : (
-            <PauseIcon aria-hidden="true" />
-          )}
-        </Button>
-      )}
     </div>
   );
 }
diff --git a/apps/ui/components/not-found-motion.tsx b/apps/ui/components/not-found-motion.tsx
index 20718b5dbd..c4ee893af7 100644
--- a/apps/ui/components/not-found-motion.tsx
+++ b/apps/ui/components/not-found-motion.tsx
@@ -6,10 +6,7 @@ import { NotFoundBlueprint } from "./not-found-blueprint";
 
 export function NotFoundMotion({ children }: { children: ReactNode }) {
   return (
-    <BlueprintMotion
-      controlClassName="bottom-12"
-      renderAnimation={() => <NotFoundBlueprint animated />}
-    >
+    <BlueprintMotion renderAnimation={() => <NotFoundBlueprint animated />}>
       {children}
     </BlueprintMotion>
   );

From 426adbd141d3fc7187fb6a17fe7cafba43ce52a5 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sun, 25 Oct 2026 15:48:11 +0100
Subject: [PATCH 35/35] fix(ui): show the 404 illustration at native width

---
 apps/ui/app/not-found.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/app/not-found.tsx b/apps/ui/app/not-found.tsx
index 5d187f047d..12aed3b72b 100644
--- a/apps/ui/app/not-found.tsx
+++ b/apps/ui/app/not-found.tsx
@@ -20,7 +20,7 @@ export default function NotFound() {
   return (
     <>
       <section className="container flex w-full flex-1 flex-col items-center gap-5 py-10 text-center [font-optical-sizing:auto] [font-synthesis:none] md:py-14 lg:py-16">
-        <div className="pointer-events-none w-full max-w-112 select-none lg:-my-12">
+        <div className="pointer-events-none w-full max-w-140 select-none lg:-my-12">
           <NotFoundMotion>
             <NotFoundBlueprint />
           </NotFoundMotion>