From 2e6ff7f84a861a2c38c95a0db967e98ee7648ea9 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sun, 8 Nov 2026 10:40:00 +0100
Subject: [PATCH 1/2] feat(ui): add current Plotter animations to website pages

---
 apps/ui/app/not-found.tsx                     |  31 +-
 apps/ui/app/page.tsx                          |  39 +-
 apps/ui/app/particles/page.tsx                |  54 +-
 apps/ui/app/particles/search-container.tsx    |  12 +-
 apps/ui/app/particles/search-field.tsx        |   2 +-
 apps/ui/components/blueprint-dimensions.tsx   |  31 +
 apps/ui/components/blueprint-drawing.tsx      |  18 +
 .../ui/components/blueprint-motion.module.css |  13 +
 apps/ui/components/blueprint-motion.tsx       |  66 +++
 apps/ui/components/not-found-blueprint.tsx    | 101 ++++
 apps/ui/components/not-found-motion.tsx       |  13 +
 .../components/particles-assembly-content.tsx | 109 ++++
 .../components/particles-assembly-drawing.tsx | 530 ++++++++++++++++++
 .../components/particles-assembly-geometry.ts | 178 ++++++
 apps/ui/components/particles-blueprint.tsx    | 123 ++++
 apps/ui/components/particles-motion.tsx       |  13 +
 apps/ui/components/primitives-blueprint.tsx   |  95 ++++
 apps/ui/components/primitives-button.tsx      |  51 ++
 .../primitives-construction-motion.tsx        |  72 +++
 .../components/primitives-morph-details.tsx   | 228 ++++++++
 apps/ui/components/primitives-morph-style.ts  |   8 +
 apps/ui/components/primitives-morph-timing.ts |   7 +
 .../primitives-morph-transitions.tsx          | 152 +++++
 apps/ui/components/primitives-morph.tsx       | 341 +++++++++++
 apps/ui/components/primitives-motion.tsx      |  15 +
 apps/ui/components/primitives-slider.tsx      | 104 ++++
 apps/ui/components/primitives-switch.tsx      | 114 ++++
 27 files changed, 2473 insertions(+), 47 deletions(-)
 create mode 100644 apps/ui/components/blueprint-dimensions.tsx
 create mode 100644 apps/ui/components/blueprint-drawing.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-blueprint.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-blueprint.tsx
 create mode 100644 apps/ui/components/particles-motion.tsx
 create mode 100644 apps/ui/components/primitives-blueprint.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 5dd71547a9..12aed3b72b 100644
--- a/apps/ui/app/not-found.tsx
+++ b/apps/ui/app/not-found.tsx
@@ -1,29 +1,37 @@
 import {
-  PageHeader,
   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";
 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:
-    "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.
+    <>
+      <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-140 select-none lg:-my-12">
+          <NotFoundMotion>
+            <NotFoundBlueprint />
+          </NotFoundMotion>
+        </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-4">
+        <div className="mt-1">
           <Button
             className="group"
             render={
@@ -38,7 +46,8 @@ export default function NotFound() {
             size="lg"
           />
         </div>
-      </PageHeader>
-    </div>
+      </section>
+      <SiteFooter />
+    </>
   );
 }
diff --git a/apps/ui/app/page.tsx b/apps/ui/app/page.tsx
index 4e706d5ba3..d045079857 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,27 +17,40 @@ import {
 } from "@/registry/default/ui/card";
 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";
 
-const description = "Built for developers and AI.";
+const description =
+  "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 = {
   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() {
   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.
+      <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.
           </PageHeaderHeading>
-          <PageHeaderDescription>{description}</PageHeaderDescription>
-          <div className="mt-2 flex gap-2">
+          <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
             </Button>
@@ -50,8 +62,13 @@ export default function Page() {
               Browse {particleCount} particles
             </Button>
           </div>
-        </PageHeader>
-      </div>
+        </div>
+        <div className="pointer-events-none mx-auto hidden w-full max-w-140 select-none lg:-my-24 lg:block">
+          <PrimitivesMotion>
+            <PrimitivesBlueprint />
+          </PrimitivesMotion>
+        </div>
+      </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 e6a41b197d..81bc348f46 100644
--- a/apps/ui/app/particles/page.tsx
+++ b/apps/ui/app/particles/page.tsx
@@ -1,5 +1,4 @@
 import {
-  PageHeader,
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@coss/ui/shared/page-header";
@@ -9,14 +8,16 @@ import { isValidRegistryCategory } from "@/registry/registry-categories";
 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;
 
-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({
@@ -58,19 +59,38 @@ export default function Page({
   searchParams: Promise<{ tags?: string }>;
 }) {
   return (
-    <div className="container w-full">
-      <PageHeader className="*:pb-8!">
-        <PageHeaderHeading>Browse Particles</PageHeaderHeading>
-        <PageHeaderDescription className="max-w-2xl">
-          {description}
-        </PageHeaderDescription>
-      </PageHeader>
-      <Suspense>
-        <SearchContainer />
-      </Suspense>
-      <Suspense>
-        <ParticlesDisplayServer searchParams={searchParams} />
-      </Suspense>
-    </div>
+    <>
+      <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.
+          </PageHeaderHeading>
+          <PageHeaderDescription className="text-pretty">
+            {description}
+          </PageHeaderDescription>
+          <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-24 lg:block">
+          <ParticlesMotion>
+            <ParticlesBlueprint />
+          </ParticlesMotion>
+        </div>
+      </section>
+      <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>
+    </>
   );
 }
diff --git a/apps/ui/app/particles/search-container.tsx b/apps/ui/app/particles/search-container.tsx
index ce9655fea5..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="mb-8 md:mb-12 lg:mb-16">
-      <SearchField
-        items={searchItems}
-        onItemsChange={updateSelectedItems}
-        selectedItems={selectedItems}
-      />
-    </div>
+    <SearchField
+      items={searchItems}
+      onItemsChange={updateSelectedItems}
+      selectedItems={selectedItems}
+    />
   );
 }
diff --git a/apps/ui/app/particles/search-field.tsx b/apps/ui/app/particles/search-field.tsx
index eaa3e06730..bfcc9a3ed7 100644
--- a/apps/ui/app/particles/search-field.tsx
+++ b/apps/ui/app/particles/search-field.tsx
@@ -132,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
diff --git a/apps/ui/components/blueprint-dimensions.tsx b/apps/ui/components/blueprint-dimensions.tsx
new file mode 100644
index 0000000000..0ec141556a
--- /dev/null
+++ b/apps/ui/components/blueprint-dimensions.tsx
@@ -0,0 +1,31 @@
+export function HorizontalDimension({
+  x1,
+  x2,
+  y,
+  label,
+  labelOffset = 8,
+}: {
+  x1: number;
+  x2: number;
+  y: number;
+  label: string;
+  labelOffset?: number;
+}) {
+  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 - labelOffset}
+      >
+        {label}
+      </text>
+    </>
+  );
+}
diff --git a/apps/ui/components/blueprint-drawing.tsx b/apps/ui/components/blueprint-drawing.tsx
new file mode 100644
index 0000000000..f9334b40f5
--- /dev/null
+++ b/apps/ui/components/blueprint-drawing.tsx
@@ -0,0 +1,18 @@
+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="1"
+      strokeOpacity="0.8"
+      viewBox="0 0 560 440"
+    >
+      {children}
+    </svg>
+  );
+}
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..0c3005b36f
--- /dev/null
+++ b/apps/ui/components/blueprint-motion.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import { useMediaQuery } from "@/registry/default/hooks/use-media-query";
+import styles from "./blueprint-motion.module.css";
+
+export function BlueprintMotion({
+  children,
+  renderAnimation,
+}: {
+  children: ReactNode;
+  renderAnimation: (paused: boolean) => ReactNode;
+}) {
+  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 reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const live = hasEntered && !reducedMotion;
+  const stopped = !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>
+      )}
+    </div>
+  );
+}
diff --git a/apps/ui/components/not-found-blueprint.tsx b/apps/ui/components/not-found-blueprint.tsx
new file mode 100644
index 0000000000..a3fec9e21a
--- /dev/null
+++ b/apps/ui/components/not-found-blueprint.tsx
@@ -0,0 +1,101 @@
+import { HorizontalDimension } from "./blueprint-dimensions";
+import { BlueprintDrawing } from "./blueprint-drawing";
+
+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="1"
+      strokeOpacity="0.65"
+    >
+      <path d="M304 196V116H404L440 152V308H304V228 M404 116V152H440" />
+      <circle cx="304" cy="212" r="8" />
+      <path d="M280 204H296 M280 220H296" />
+    </g>
+  );
+}
+
+// EMP-05 is shared by the gallery and M03. 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="1" strokeOpacity="0.6">
+        <path d="M112 256V280 M112 312V320 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.24" strokeWidth="1" strokeOpacity="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>
+      <AbsentPage />
+      <g strokeWidth="1" strokeOpacity="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.5"
+        strokeWidth="1"
+        strokeOpacity="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 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="end" x="150" y="195">
+          R40
+        </text>
+        <text textAnchor="middle" x="372" y="386">
+          No page at this address
+        </text>
+      </g>
+      <g opacity="0.24" strokeWidth="1" strokeOpacity="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..c4ee893af7
--- /dev/null
+++ b/apps/ui/components/not-found-motion.tsx
@@ -0,0 +1,13 @@
+"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 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..fb951d0499
--- /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="1" strokeOpacity="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="1" strokeOpacity="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..80b3b7feb4
--- /dev/null
+++ b/apps/ui/components/particles-assembly-drawing.tsx
@@ -0,0 +1,530 @@
+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="1"
+      strokeOpacity="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-opacity"
+                  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="1"
+        strokeOpacity="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="1"
+      strokeOpacity="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="1"
+        strokeOpacity="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="1"
+        strokeOpacity="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="1" strokeOpacity="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-blueprint.tsx b/apps/ui/components/particles-blueprint.tsx
new file mode 100644
index 0000000000..403058ebdc
--- /dev/null
+++ b/apps/ui/components/particles-blueprint.tsx
@@ -0,0 +1,123 @@
+import { BlueprintDrawing } from "./blueprint-drawing";
+
+function ParticleContent({
+  kind,
+  x,
+  y,
+}: {
+  kind: "identity" | "visibility" | "action";
+  x: number;
+  y: number;
+}) {
+  return (
+    <g transform={`translate(${x} ${y})`}>
+      <g opacity="0.7" strokeWidth="1" strokeOpacity="0.65">
+        {kind === "identity" && (
+          <>
+            <circle cx="26" cy="24" r="10" />
+            <path d="M22 24h8 M26 20v8" />
+          </>
+        )}
+        {kind === "action" && <path d="m120 20 4 4-4 4" />}
+      </g>
+      {kind === "visibility" && (
+        <g strokeWidth="1" strokeOpacity="0.95">
+          <rect height="18" rx="9" width="30" x="98" y="15" />
+          <circle cx="119" cy="24" r="5.5" />
+        </g>
+      )}
+      <g fill="currentColor" fontSize="11" opacity="0.76" stroke="none">
+        <text x={kind === "identity" ? 46 : 16} y="28">
+          {kind === "identity"
+            ? "Studio"
+            : kind === "visibility"
+              ? "Public"
+              : "Open"}
+        </text>
+      </g>
+    </g>
+  );
+}
+
+export function ParticlesBlueprint() {
+  return (
+    <BlueprintDrawing>
+      <g opacity="0.1" strokeWidth="1" strokeOpacity="0.6">
+        <path d="M72 96V104 M72 168V200 M72 264V296 M72 360V376 M216 96V104 M216 168V200 M216 264V296 M216 360V376" />
+        <path d="M64 112H224 M64 160H224 M64 208H224 M64 256H224 M64 304H224 M64 352H224" />
+        <path d="M328 140V152 M472 140V152 M328 312V352 M472 312V352" />
+        <path d="M316 160H484 M316 304H484" />
+      </g>
+      <g
+        opacity="0.36"
+        strokeDasharray="4 5"
+        strokeWidth="1"
+        strokeOpacity="0.65"
+      >
+        <path d="M320 184H284A16 16 0 0 1 268 168V152A16 16 0 0 0 252 136H224" />
+        <path d="M320 232H224" />
+        <path d="M320 280H284A16 16 0 0 0 268 296V312A16 16 0 0 1 252 328H224" />
+      </g>
+      <g opacity="0.36" strokeWidth="1" strokeOpacity="0.65">
+        <path d="m315.76 179.76 4.24 4.24-4.24 4.24 M315.76 227.76 320 232l-4.24 4.24 M315.76 275.76 320 280l-4.24 4.24" />
+      </g>
+      <g strokeWidth="1" strokeOpacity="0.95">
+        <rect height="48" rx="8" width="144" x="72" y="112" />
+        <rect height="48" rx="8" width="144" x="72" y="208" />
+        <rect height="48" rx="8" width="144" x="72" y="304" />
+        <rect height="144" rx="8" width="144" x="328" y="160" />
+      </g>
+      <path
+        d="M328 208H472 M328 256H472"
+        opacity="0.5"
+        strokeWidth="1"
+        strokeOpacity="0.65"
+      />
+      <ParticleContent kind="identity" x={72} y={112} />
+      <ParticleContent kind="visibility" x={72} y={208} />
+      <ParticleContent kind="action" x={72} y={304} />
+      <ParticleContent kind="identity" x={328} y={160} />
+      <ParticleContent kind="visibility" x={328} y={208} />
+      <ParticleContent kind="action" x={328} y={256} />
+      <g opacity="0.5" strokeWidth="1" strokeOpacity="0.65">
+        <path d="M328 336H386 M414 336H472 M328 328V344 M472 328V344" />
+        <path d="m324 340 8-8 m136 8 8-8" />
+        <path d="M484 160H508 M484 304H508 M500 160V218 M500 246V304" />
+        <path d="m496 164 8-8 m-8 152 8-8" />
+        <path d="M40 208V220 M40 244V256 M34 208H64 M34 256H64" />
+      </g>
+      <g fill="currentColor" fontSize="10" opacity="0.52" stroke="none">
+        <text textAnchor="end" x="58" y="140">
+          A
+        </text>
+        <text textAnchor="end" x="58" y="236">
+          B
+        </text>
+        <text textAnchor="end" x="58" y="332">
+          C
+        </text>
+        <text textAnchor="middle" x="144" y="86">
+          Parts
+        </text>
+        <text textAnchor="middle" x="400" y="134">
+          Composition
+        </text>
+        <text textAnchor="middle" x="400" y="339">
+          3u
+        </text>
+        <text textAnchor="middle" x="500" y="236">
+          3u
+        </text>
+        <text textAnchor="middle" x="40" y="236">
+          u
+        </text>
+        <text textAnchor="middle" x="400" y="376">
+          A + B + C
+        </text>
+      </g>
+      <g opacity="0.32" strokeWidth="1" strokeOpacity="0.6">
+        <path d="M48 82h12 M54 76v12 M480 374h12 M486 368v12" />
+      </g>
+    </BlueprintDrawing>
+  );
+}
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-blueprint.tsx b/apps/ui/components/primitives-blueprint.tsx
new file mode 100644
index 0000000000..f04d6f9958
--- /dev/null
+++ b/apps/ui/components/primitives-blueprint.tsx
@@ -0,0 +1,95 @@
+import { BlueprintDrawing } from "./blueprint-drawing";
+
+const gridLines = [
+  "M204 68V348 M124 124H320 M376 124H444",
+  "M244 68V348 M124 164H444",
+  "M324 68V104 M324 208V348 M124 244H444",
+  "M364 68V348 M124 284H444",
+];
+const radiusDiagonal = 120 / Math.sqrt(2);
+const angleDiagonal = 24 / Math.sqrt(2);
+const radiusEndpoint = { x: 284 + radiusDiagonal, y: 204 - radiusDiagonal };
+
+export function PrimitivesBlueprint() {
+  return (
+    <BlueprintDrawing>
+      <g opacity="0.09" strokeWidth="1" strokeOpacity="0.6">
+        {gridLines.map((d) => (
+          <path d={d} key={d} />
+        ))}
+      </g>
+
+      <g opacity="0.24" strokeWidth="1" strokeOpacity="0.65">
+        <path d="M164 58V76 M164 332V344 M404 58V76 M404 332V368 M104 84H156 M412 84H464 M104 324H156 M412 324H464" />
+        <path d="M116 372 158 330 M410 78 452 36" opacity="0.48" />
+        <path
+          d="M284 58V372 M90 204H276 M412 204H428 M456 204H478"
+          strokeDasharray="5 5"
+        />
+        <path d="M148 68H164V84 M404 68H420V84 M148 324H164V340 M404 324H420V340" />
+      </g>
+
+      <g opacity="0.27" strokeWidth="1" strokeOpacity="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" strokeOpacity="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="1" strokeOpacity="0.65">
+        <path d="M284 204H404" />
+        <path
+          d={`M308 204A24 24 0 0 0 ${284 + angleDiagonal} ${204 - angleDiagonal}`}
+        />
+        <path d="M284 216H296V204" />
+        <path d={`M${radiusEndpoint.x - 5} ${radiusEndpoint.y}h5v5`} />
+        <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 strokeWidth="1" strokeOpacity="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="1" strokeOpacity="0.65">
+        <path d="M76 82h12 M82 76v12 M470 340h12 M476 334v12" />
+        <path d="M266 401h36 M284 395v12" />
+      </g>
+    </BlueprintDrawing>
+  );
+}
diff --git a/apps/ui/components/primitives-button.tsx b/apps/ui/components/primitives-button.tsx
new file mode 100644
index 0000000000..9eb5435d4c
--- /dev/null
+++ b/apps/ui/components/primitives-button.tsx
@@ -0,0 +1,51 @@
+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="1"
+        strokeOpacity="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..d4c0a27755
--- /dev/null
+++ b/apps/ui/components/primitives-morph-details.tsx
@@ -0,0 +1,228 @@
+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="1"
+          strokeOpacity="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="288" y="170">
+              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="1"
+          strokeOpacity="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="1"
+            strokeOpacity="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..6556dcc40a
--- /dev/null
+++ b/apps/ui/components/primitives-morph-style.ts
@@ -0,0 +1,8 @@
+// The pill’s diagonal radius is the reference for continuous secondary lines.
+export const secondaryLine = {
+  opacity: 0.5,
+  strokeWidth: 1,
+  strokeOpacity: 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..9155e6c887
--- /dev/null
+++ b/apps/ui/components/primitives-morph-transitions.tsx
@@ -0,0 +1,152 @@
+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="1"
+          strokeOpacity="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="1"
+          strokeOpacity="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..59c0ea33dc
--- /dev/null
+++ b/apps/ui/components/primitives-morph.tsx
@@ -0,0 +1,341 @@
+"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 guideGapStart = height < 40 ? 298 : 348;
+  const guideGapEnd = height < 40 ? 320 : 348;
+  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`,
+    // Each extension has one guide owner; measurement marks do not retrace it.
+    guides: `M${left} 38V${guideGapStart} M${left} ${guideGapEnd}V348
+      M${right} 38V${guideGapStart} M${right} ${guideGapEnd}V348
+      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 gridPaths = [
+  "M124 68V298 M124 320V348",
+  "M164 68V240 M164 260V348",
+  "M204 68V348",
+  "M244 68V348",
+  "M284 68V121 M284 142V298 M284 320V348",
+  "M324 68V132 M324 163V348",
+  "M364 68V348",
+  "M404 68V348",
+  "M444 68V298 M444 320V348",
+  "M104 84H464",
+  "M104 124H273 M295 124H464",
+  "M104 164H172 M200 164H283 M354 164H464",
+  "M104 204H374 M394 204H464",
+  "M104 244H140 M168 244H464",
+  "M104 284H464",
+  "M104 324H464",
+];
+
+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"
+              strokeOpacity="1"
+            />
+            <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="1"
+              strokeOpacity="0.65"
+            />
+          </pattern>
+        </defs>
+        <g
+          mask={`url(#${gridMaskId})`}
+          opacity="0.08"
+          strokeWidth="1"
+          strokeOpacity="0.6"
+        >
+          {gridPaths.map((d) => (
+            <path d={d} key={d} />
+          ))}
+        </g>
+        <use
+          href={`#${guideId}`}
+          opacity="0.24"
+          strokeWidth="1"
+          strokeOpacity="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" strokeOpacity="1">
+          <Morph
+            attributeName="d"
+            values={stages.map((stage) => stage.outline)}
+          />
+        </path>
+        <g strokeWidth="1" strokeOpacity="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..1c8ca12125
--- /dev/null
+++ b/apps/ui/components/primitives-slider.tsx
@@ -0,0 +1,104 @@
+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"
+        strokeOpacity="1"
+      />
+    </g>
+  );
+}
+
+export function SliderConstruction() {
+  return (
+    <g>
+      <g
+        opacity="0.38"
+        strokeDasharray="4 4"
+        strokeWidth="1"
+        strokeOpacity="0.65"
+      >
+        <path d={travelGuides} />
+        <circle cx="204" cy="204" r="40" />
+      </g>
+      <circle
+        cx="204"
+        cy="204"
+        fill="none"
+        r="40"
+        strokeWidth="1"
+        strokeOpacity="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..3a9496d4d2
--- /dev/null
+++ b/apps/ui/components/primitives-switch.tsx
@@ -0,0 +1,114 @@
+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="1"
+        strokeOpacity="0.65"
+      />
+      <circle
+        cx="204"
+        cy="204"
+        fill="none"
+        opacity="0.14"
+        r="60"
+        strokeWidth="1"
+        strokeOpacity="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="1" strokeOpacity="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 fdb8c19bfd6fa8abf7a93420f82a56643ef94619 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sun, 8 Nov 2026 11:31:46 +0100
Subject: [PATCH 2/2] fix(site): correct wordmark links and add Particles
 footer

---
 apps/origin/components/header.tsx      |  3 +--
 apps/ui/app/particles/page.tsx         |  4 +++-
 apps/ui/components/site-footer.tsx     | 11 ++++++-----
 packages/ui/src/shared/site-footer.tsx | 11 ++++++-----
 packages/ui/src/shared/site-header.tsx | 22 ++++++----------------
 5 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/apps/origin/components/header.tsx b/apps/origin/components/header.tsx
index eec1ea3254..5075329f72 100644
--- a/apps/origin/components/header.tsx
+++ b/apps/origin/components/header.tsx
@@ -10,7 +10,6 @@ const links = [{ href: "/easings", text: "Easing Classes" }];
 
 export default function Header() {
   const isMobile = useIsMobile();
-  const cossHomeUrl = process.env.NEXT_PUBLIC_COSS_URL || "";
 
   return (
     <header className="relative mb-14 before:absolute before:-inset-x-32 before:bottom-0 before:h-px before:bg-[linear-gradient(to_right,--theme(--color-border/.3),--theme(--color-border)_200px,--theme(--color-border)_calc(100%-200px),--theme(--color-border/.3))]">
@@ -20,7 +19,7 @@ export default function Header() {
       />
       <div className="mx-auto flex h-[72px] w-full max-w-6xl items-center justify-between gap-3">
         <div className="-mt-0.5 flex shrink-0 items-start gap-1.5 font-heading text-2xl sm:text-[1.625em]">
-          <a aria-label="Home" href={cossHomeUrl}>
+          <a aria-label="Home" href="/ui">
             coss.com
           </a>
           <Link
diff --git a/apps/ui/app/particles/page.tsx b/apps/ui/app/particles/page.tsx
index 81bc348f46..7cfefb4722 100644
--- a/apps/ui/app/particles/page.tsx
+++ b/apps/ui/app/particles/page.tsx
@@ -2,6 +2,7 @@ import {
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@coss/ui/shared/page-header";
+import { SiteFooter } from "@coss/ui/shared/site-footer";
 import type { Metadata } from "next";
 import { Suspense } from "react";
 import { isValidRegistryCategory } from "@/registry/registry-categories";
@@ -80,7 +81,7 @@ export default function Page({
           </ParticlesMotion>
         </div>
       </section>
-      <div className="relative before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-border/64">
+      <div className="relative flex-1 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"
@@ -91,6 +92,7 @@ export default function Page({
           </Suspense>
         </div>
       </div>
+      <SiteFooter />
     </>
   );
 }
diff --git a/apps/ui/components/site-footer.tsx b/apps/ui/components/site-footer.tsx
index a338f87b8f..5deaa032e6 100644
--- a/apps/ui/components/site-footer.tsx
+++ b/apps/ui/components/site-footer.tsx
@@ -1,15 +1,16 @@
-import Link from "next/link";
-
 export function SiteFooter() {
+  const gatewayOrigin = process.env.NEXT_PUBLIC_COSS_URL || "https://coss.com";
+  const gatewayHome = `${gatewayOrigin.replace(/\/$/, "")}/`;
+
   return (
     <footer className="flex flex-col gap-0.5">
       <p>
-        <Link
+        <a
           className="font-bold font-heading text-lg [font-variation-settings:'GEOM'_50,'opsz'_32]"
-          href="/"
+          href={gatewayHome}
         >
           coss.com <span className="text-muted-foreground/72">ui</span>
-        </Link>
+        </a>
       </p>
       <p className="text-muted-foreground text-sm">
         Built by and for the team of{" "}
diff --git a/packages/ui/src/shared/site-footer.tsx b/packages/ui/src/shared/site-footer.tsx
index 7ab177aa3e..8096196642 100644
--- a/packages/ui/src/shared/site-footer.tsx
+++ b/packages/ui/src/shared/site-footer.tsx
@@ -1,6 +1,7 @@
-import Link from "next/link";
-
 export function SiteFooter() {
+  const gatewayOrigin = process.env.NEXT_PUBLIC_COSS_URL || "https://coss.com";
+  const gatewayHome = `${gatewayOrigin.replace(/\/$/, "")}/`;
+
   return (
     <footer className="relative mt-8 py-6 text-muted-foreground before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-border/64">
       <div
@@ -10,12 +11,12 @@ export function SiteFooter() {
       <div className="container flex w-full items-center justify-center gap-2 px-4 sm:px-6">
         <p>
           © {new Date().getFullYear()}{" "}
-          <Link
+          <a
             className="font-bold font-heading text-foreground [font-variation-settings:'GEOM'_50,'opsz'_32]"
-            href="/"
+            href={gatewayHome}
           >
             coss.com
-          </Link>{" "}
+          </a>{" "}
           – open source, open heart, open mind.
         </p>
       </div>
diff --git a/packages/ui/src/shared/site-header.tsx b/packages/ui/src/shared/site-header.tsx
index cba7161ab3..2503a28c9c 100644
--- a/packages/ui/src/shared/site-header.tsx
+++ b/packages/ui/src/shared/site-header.tsx
@@ -2,7 +2,6 @@ import { siteConfig } from "@coss/ui/lib/config";
 import { GitHubLink } from "@coss/ui/shared/github-link";
 import { ModeSwitcher } from "@coss/ui/shared/mode-switcher";
 import { ProductLabel } from "@coss/ui/shared/product-label";
-import Link from "next/link";
 
 export function SiteHeader({
   mobileNav,
@@ -16,29 +15,20 @@ export function SiteHeader({
   /** 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;
-
   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">
       <div className="container relative flex h-(--header-height) w-full items-center justify-between gap-2 px-4 sm:px-6">
         {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}>
-              coss.com
-            </a>
-          ) : (
-            <Link aria-label="Home" href={gatewayHome}>
-              coss.com
-            </Link>
-          )}
+        <a
+          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"
+          href="/ui"
+        >
+          coss.com{" "}
           <ProductLabel
             currentProduct={currentProduct}
             items={siteConfig.products}
           />
-        </div>
+        </a>
         <div className="ms-auto flex items-center gap-2 md:flex-1 md:justify-end">
           {children}
           <GitHubLink {...github} />