Add a motion system: feedback, overlays, and view transitions

Every interactive control now acknowledges input: buttons and icon
buttons press down (scale on :active) and ease their hover states, nav
items, menu rows, segmented controls, cards, table rows, and inputs
transition over shared motion tokens (120/200/280ms, ease-out curves).
Dialogs and popovers enter with a short rise + fade over a fading
backdrop; switching routes and onboarding steps plays a quiet view
entrance keyed on the route/step. State pills cross-fade their tones
as runs progress. All motion collapses under prefers-reduced-motion.
PRODUCT.md captures the register and design principles guiding this.

AgentCompany-New/src/renderer/src/app/Onboarding.tsx

@@ -168,37 +168,39 @@ export function Onboarding({
       </section>
 
       <form className="onboarding-panel" onSubmit={submit} noValidate>
-        {step === "welcome" && (
+        <div key={step} className="step-view">
-          <WelcomeStep onNext={() => setStep("provider")} />
+          {step === "welcome" && (
-        )}
+            <WelcomeStep onNext={() => setStep("provider")} />
-        {step === "provider" && (
+          )}
-          <ProviderStep
+          {step === "provider" && (
-            providers={availableProviders}
+            <ProviderStep
-            draft={draft}
+              providers={availableProviders}
-            onChange={update}
+              draft={draft}
-            onBack={back("welcome")}
+              onChange={update}
-            onNext={guard(() => validateProvider(draft, availableProviders), "company")}
+              onBack={back("welcome")}
-          />
+              onNext={guard(() => validateProvider(draft, availableProviders), "company")}
-        )}
+            />
-        {step === "company" && (
+          )}
-          <CompanyStep
+          {step === "company" && (
-            draft={draft}
+            <CompanyStep
-            onChange={update}
+              draft={draft}
-            onBack={back("provider")}
+              onChange={update}
-            onNext={guard(() => validateCompany(draft), "mode")}
+              onBack={back("provider")}
-          />
+              onNext={guard(() => validateCompany(draft), "mode")}
-        )}
+            />
-        {step === "mode" && (
+          )}
-          <ModeStep draft={draft} onChange={update} onBack={back("company")} onNext={() => setStep("mission")} />
+          {step === "mode" && (
-        )}
+            <ModeStep draft={draft} onChange={update} onBack={back("company")} onNext={() => setStep("mission")} />
-        {step === "mission" && (
+          )}
-          <MissionStep
+          {step === "mission" && (
-            draft={draft}
+            <MissionStep
-            submitting={submitting}
+              draft={draft}
-            onChange={update}
+              submitting={submitting}
-            onBack={back("mode")}
+              onChange={update}
-          />
+              onBack={back("mode")}
-        )}
+            />
+          )}
+        </div>
         {error && <div style={{ color: "var(--red)", marginTop: 14, fontSize: 12.5 }}>{error}</div>}
       </form>
       </main>

AgentCompany-New/src/renderer/src/overlays.css

@@ -6,6 +6,7 @@
   display: grid;
   place-items: center;
   padding: 24px;
+  animation: backdrop-enter var(--motion-fast) var(--ease-out);
 }
 .modal {
   width: min(520px, 100%);
@@ -16,6 +17,15 @@
   background: var(--panel);
   box-shadow: 0 20px 60px rgba(9, 9, 11, 0.18);
   padding: 20px;
+  animation: overlay-enter var(--motion-base) var(--ease-out-expo);
+}
+@keyframes backdrop-enter {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes overlay-enter {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to { opacity: 1; transform: none; }
 }
 .modal-title { margin: 0 0 14px; font-size: 16px; font-weight: 620; letter-spacing: -0.01em; }
 .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
@@ -74,8 +84,11 @@
   color: var(--text-3);
   background: var(--panel);
   font-size: 11px;
+  transition: color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
 }
 .step-chip.active { color: var(--text-1); border-color: var(--text-1); }
+/* One onboarding step entering after the previous one leaves. */
+.step-view { animation: view-enter var(--motion-base) var(--ease-out-expo); }
 .form-grid { display: grid; gap: 14px; }
 .option-grid { display: grid; gap: 8px; }
 .option-card {
@@ -86,8 +99,13 @@
   text-align: left;
   cursor: pointer;
   width: 100%;
+  transition:
+    border-color var(--motion-fast) var(--ease-out),
+    box-shadow var(--motion-fast) var(--ease-out),
+    transform var(--motion-fast) var(--ease-out);
 }
-.option-card:hover { border-color: var(--border-strong); }
+.option-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
+.option-card:active { transform: scale(0.99); }
 .option-card.active { border-color: var(--text-1); box-shadow: inset 0 0 0 1px var(--text-1); }
 .option-card .opt-title { font-size: 13.5px; font-weight: 540; }
 .option-card .opt-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; }
@@ -116,6 +134,11 @@
   display: flex;
   flex-direction: column;
   gap: 1px;
+  animation: menu-enter var(--motion-fast) var(--ease-out-expo);
+}
+@keyframes menu-enter {
+  from { opacity: 0; transform: translateY(-3px) scale(0.99); }
+  to { opacity: 1; transform: none; }
 }
 .popover-panel.end { right: 0; }
 .popover-panel.start { left: 0; }
@@ -138,6 +161,7 @@
   font-size: 13px;
   text-align: left;
   width: 100%;
+  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
 }
 .menu-row:hover { background: var(--hover); color: var(--text-1); }
 .menu-row.active { background: var(--panel-3); color: var(--text-1); font-weight: 540; }

AgentCompany-New/src/renderer/src/shared/Shell.tsx

@@ -151,7 +151,9 @@ export function Shell({
           </div>
         </header>
         <div className={FLUSH_ROUTES.has(route) ? "content flush" : "content"}>
-          <TopbarSlotContext.Provider value={actionsSlot}>{children}</TopbarSlotContext.Provider>
+          <TopbarSlotContext.Provider value={actionsSlot}>
+            <div key={route} className="route-view">{children}</div>
+          </TopbarSlotContext.Provider>
         </div>
       </main>
       <SearchDialog

AgentCompany-New/src/renderer/src/styles.css

@@ -27,6 +27,11 @@
   --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
   --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
   --font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
+  --motion-fast: 120ms;
+  --motion-base: 200ms;
+  --motion-slow: 280ms;
+  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 * { box-sizing: border-box; }
@@ -74,8 +79,10 @@ a { color: inherit; }
   border-radius: var(--r-md);
   cursor: pointer;
   margin-bottom: 18px;
+  transition: background var(--motion-fast) var(--ease-out);
 }
 .sidebar-org:hover { background: var(--hover); }
+.sidebar-org:active { background: var(--panel-3); }
 .brand-mark {
   width: 22px;
   height: 22px;
@@ -111,7 +118,9 @@ a { color: inherit; }
   cursor: text;
   border: 0;
   width: 100%;
+  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
 }
+.search-bar:hover { background: var(--panel-3); color: var(--text-2); }
 .search-kbd {
   margin-left: auto;
   font-size: 11px;
@@ -140,11 +149,13 @@ a { color: inherit; }
   text-align: left;
   width: 100%;
   min-width: 0;
+  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
 }
 .nav-item:hover { background: var(--hover); color: var(--text-1); }
+.nav-item:active { transform: scale(0.985); }
 .nav-item.active { background: var(--panel-3); color: var(--text-1); font-weight: 540; }
 .nav-item.active svg { color: var(--text-1); }
-.nav-item svg { color: var(--text-3); flex-shrink: 0; }
+.nav-item svg { color: var(--text-3); flex-shrink: 0; transition: color var(--motion-fast) var(--ease-out); }
 .nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .nav-badge {
   margin-left: auto;
@@ -187,6 +198,7 @@ a { color: inherit; }
   font-size: 13px;
   text-align: left;
   width: 100%;
+  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
 }
 .org-menu-row:hover { background: var(--hover); color: var(--text-1); }
 .org-menu-row.active { background: var(--panel-3); color: var(--text-1); font-weight: 540; }
@@ -199,6 +211,7 @@ a { color: inherit; }
   border-radius: 4px;
   cursor: pointer;
   opacity: 0;
+  transition: opacity var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
 }
 .org-menu-row:hover .org-menu-delete { opacity: 1; }
 .org-menu-delete:hover { background: var(--panel-3); }
@@ -262,6 +275,7 @@ a { color: inherit; }
   font-size: 13px;
   text-align: left;
   width: 100%;
+  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
 }
 .org-menu-action:hover { background: var(--hover); color: var(--text-1); }
 .brand-mark.sm {
@@ -322,6 +336,19 @@ a { color: inherit; }
   overflow: auto;
   padding: 28px 32px 40px;
 }
+/* One route's content entering: a quiet rise that signals the view changed.
+   The wrapper is structural for flush routes, so it must stay a flex column. */
+.route-view {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  animation: view-enter var(--motion-slow) var(--ease-out-expo);
+}
+@keyframes view-enter {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: none; }
+}
 /* Split-layout routes fill the content area and let their panes scroll
    independently instead of scrolling the whole page. */
 .content.flush {
@@ -412,6 +439,7 @@ a { color: inherit; }
   color: var(--text-2);
   font-size: 15px;
   line-height: 1;
+  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
 }
 .org-zoom-btn:hover:not(:disabled) { background: var(--hover); color: var(--text-1); }
 .org-zoom-btn:disabled { color: var(--text-4); cursor: default; }
@@ -441,7 +469,7 @@ a { color: inherit; }
   box-shadow: var(--shadow-sm);
   text-align: left;
   cursor: pointer;
-  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+  transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
 }
 .org-node-card:hover:not(:disabled) { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
 .org-node-card:disabled { cursor: default; }
@@ -462,3 +490,11 @@ a { color: inherit; }
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

AgentCompany-New/src/renderer/src/styles/components.css

@@ -24,8 +24,15 @@
   font-size: 12.5px;
   font-weight: 500;
   white-space: nowrap;
+  transition:
+    background var(--motion-fast) var(--ease-out),
+    border-color var(--motion-fast) var(--ease-out),
+    color var(--motion-fast) var(--ease-out),
+    transform var(--motion-fast) var(--ease-out),
+    opacity var(--motion-fast) var(--ease-out);
 }
 .button:hover { background: var(--panel-2); }
+.button:active:not(:disabled) { transform: scale(0.97); }
 .button.primary { background: var(--text-1); color: #fff; border-color: var(--text-1); }
 .button.primary:hover { background: #27272a; }
 .button.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
@@ -43,8 +50,15 @@
   background: var(--panel);
   color: var(--text-2);
   flex-shrink: 0;
+  transition:
+    background var(--motion-fast) var(--ease-out),
+    border-color var(--motion-fast) var(--ease-out),
+    color var(--motion-fast) var(--ease-out),
+    transform var(--motion-fast) var(--ease-out),
+    opacity var(--motion-fast) var(--ease-out);
 }
 .icon-button:hover { background: var(--panel-2); color: var(--text-1); }
+.icon-button:active:not(:disabled) { transform: scale(0.94); }
 .icon-button.ghost { border-color: transparent; background: transparent; }
 .icon-button.ghost:hover { background: var(--hover); color: var(--text-1); }
 .icon-button:disabled { opacity: 0.4; cursor: default; }
@@ -68,7 +82,9 @@
   color: var(--text-2);
   font-size: 12px;
   font-weight: 500;
+  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
 }
+.segmented .segment:hover:not(.active) { color: var(--text-1); }
 .segmented .segment.active { background: var(--panel-3); color: var(--text-1); font-weight: 540; }
 
 .pill {
@@ -84,8 +100,9 @@
   font-size: 11px;
   font-weight: 500;
   white-space: nowrap;
+  transition: background var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
 }
-.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
+.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); transition: background var(--motion-base) var(--ease-out); }
 .pill.amber { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
 .pill.amber .dot { background: var(--amber); }
 .pill.green { background: var(--green-soft); color: var(--green); border-color: transparent; }
@@ -127,8 +144,10 @@
   padding: 8px 10px;
   outline: none;
   font-size: 13px;
+  transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
 }
-.input:focus { border-color: var(--text-1); }
+.input:focus { border-color: var(--text-1); box-shadow: 0 0 0 3px rgba(9, 9, 11, 0.06); }
+input[type="checkbox"] { accent-color: var(--accent); }
 textarea.input { min-height: 84px; resize: vertical; line-height: 1.5; }
 .field {
   display: flex;
@@ -166,10 +185,10 @@ textarea.input { min-height: 84px; resize: vertical; line-height: 1.5; }
   border-bottom: 1px solid var(--border-soft);
 }
 .table-row:last-child { border-bottom: 0; }
-.table-row.clickable { cursor: pointer; }
+.table-row.clickable { cursor: pointer; transition: background var(--motion-fast) var(--ease-out); }
 .table-row.clickable:hover { background: var(--hover); }
-.clickable-card { transition: border-color 0.1s ease; }
+.clickable-card { transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
-.clickable-card:hover { border-color: var(--border-strong); }
+.clickable-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
 
 .link-button {
   border: 0;
@@ -178,6 +197,7 @@ textarea.input { min-height: 84px; resize: vertical; line-height: 1.5; }
   cursor: pointer;
   font: inherit;
   color: var(--text-3);
+  transition: color var(--motion-fast) var(--ease-out);
 }
 .link-button:hover { color: var(--text-1); }