diff --git a/AGENTS.md b/AGENTS.md
index 894bb0cbe..fb5e60273 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -102,6 +102,7 @@ export class MyComponent extends AsyncHandler {
 - Do not add Angular Material. Use the controls in `src/app/ui/controls` (form field, select, autocomplete, chip list, tabs, tooltip, spinner, progress bar, dialog close, toasts) and the Angular CDK (dialog, menu, overlay). Their styles are in `src/styles.css`
 - Form errors: put `<div error>` in an `app-form-field`. It shows when its `[formField]` or `ngModel` control is touched and invalid
 - Add a `ripple` attribute to an element for a press ripple. Use native `<input type="checkbox">` for checkboxes, with `role="switch"` for a switch
+- Motion: each route change is a view transition (styles in `src/styles.css`). Add a `page-transition` attribute to a routed content area to crossfade it. For enter motion use the `animate-fade-in`, `animate-dialog-enter` and `animate-slide-in-up` classes. For exit motion use `animate.leave`. Stop motion that moves or scales for `prefers-reduced-motion`
 - Use **IconComponent** for icons. The default icon font is a subset of the icons in the source. After you add icons, run `bun config/icon-subset.ts` (needs `pip install fonttools brotli`). An icon that is not in the subset still shows, but it loads the full 420 KB font
 - `src/index.html` has a splash that shows until the app loads. Lighthouse measures its title as the largest contentful paint, so keep the title larger than the content of the first page
 - Use `feat/*`, `fix/*`, `perf/*`, or `refactor/*` for branch names
diff --git a/src/app/admin/admin.component.ts b/src/app/admin/admin.component.ts
index 272a7f916..1dd2bf011 100644
--- a/src/app/admin/admin.component.ts
+++ b/src/app/admin/admin.component.ts
@@ -22,6 +22,7 @@ import { TranslatePipe } from '../ui/translate.pipe';
             <div class="flex h-full w-px flex-1 flex-col overflow-hidden">
                 <div class="z-0 flex h-1/2 flex-1">
                     <nav
+                        admin-nav
                         class="border-base-200 relative z-10 h-full space-y-2 overflow-auto border-r px-2 pt-10 sm:w-56 sm:py-4"
                         [attr.aria-label]="'COMMON.MANAGE' | translate"
                     >
@@ -47,6 +48,7 @@ import { TranslatePipe } from '../ui/translate.pipe';
                     <main
                         id="main-content"
                         tabindex="-1"
+                        page-transition
                         class="relative z-0 h-full w-1/2 flex-1 overflow-auto outline-none"
                     >
                         <router-outlet />
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 248bda3fb..b2b74b66e 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -6,15 +6,31 @@ import {
     provideZonelessChangeDetection,
 } from '@angular/core';
 import {
+    ActivatedRouteSnapshot,
     provideRouter,
     withHashLocation,
     withNavigationErrorHandler,
+    withViewTransitions,
 } from '@angular/router';
 import { provideServiceWorker } from '@angular/service-worker';
 import { appRoutes } from './app.routes';
 import { reloadApplicationOnChunkLoadError } from './common/application';
 import { SentryReportingErrorHandler } from './common/sentry';
 
+/** Upper bound of route levels that `routePath` walks */
+const MAX_ROUTE_DEPTH = 32;
+
+/** Path of a router state without its query params, e.g. `systems/sys-1/about` */
+function routePath(route: ActivatedRouteSnapshot) {
+    let leaf = route;
+    for (let i = 0; leaf.firstChild && i < MAX_ROUTE_DEPTH; i++) {
+        leaf = leaf.firstChild;
+    }
+    return leaf.pathFromRoot
+        .flatMap((level) => level.url.map((segment) => segment.path))
+        .join('/');
+}
+
 export const appConfig: ApplicationConfig = {
     providers: [
         provideBrowserGlobalErrorListeners(),
@@ -26,6 +42,16 @@ export const appConfig: ApplicationConfig = {
             withNavigationErrorHandler((event) =>
                 reloadApplicationOnChunkLoadError(event.error),
             ),
+            // Styles for the transitions are in styles.css. A change of
+            // query params only, e.g. a filter, does not animate.
+            withViewTransitions({
+                skipInitialTransition: true,
+                onViewTransitionCreated: ({ transition, from, to }) => {
+                    if (routePath(from) === routePath(to)) {
+                        transition.skipTransition();
+                    }
+                },
+            }),
         ),
         provideServiceWorker('ngsw-worker.js', {
             enabled: !isDevMode(), // Disable in development, enable in production
diff --git a/src/app/ui/controls/toast-outlet.component.ts b/src/app/ui/controls/toast-outlet.component.ts
index 244c33174..a1fc4d348 100644
--- a/src/app/ui/controls/toast-outlet.component.ts
+++ b/src/app/ui/controls/toast-outlet.component.ts
@@ -27,7 +27,11 @@ import { dismissToast, Toast, toasts } from '../../common/notifications';
         <ng-template #panel>
             <div class="toast-stack">
                 @for (toast of list(); track toast.id) {
-                    <div class="toast" [class]="toast.type">
+                    <div
+                        class="toast"
+                        [class]="toast.type"
+                        animate.leave="toast-leave"
+                    >
                         <span class="toast-message">{{ toast.message }}</span>
                         @if (toast.action) {
                             <button type="button" (click)="act(toast)">
diff --git a/src/app/ui/global-banner.component.ts b/src/app/ui/global-banner.component.ts
index 981a47243..d7c779a4b 100644
--- a/src/app/ui/global-banner.component.ts
+++ b/src/app/ui/global-banner.component.ts
@@ -14,7 +14,7 @@ export interface BannerDetails {
     template: `
         @if (!has_viewed) {
             <div
-                class="flex w-full items-center space-x-4 p-4"
+                class="animate-fade-in flex w-full items-center space-x-4 p-4"
                 [class.bg-info]="banner.type === 'info' || !banner.type"
                 [class.text-info-content]="
                     banner.type === 'info' || !banner.type
diff --git a/src/app/ui/item-selection.component.ts b/src/app/ui/item-selection.component.ts
index 44fc643f6..cdd3d590c 100644
--- a/src/app/ui/item-selection.component.ts
+++ b/src/app/ui/item-selection.component.ts
@@ -49,11 +49,11 @@ import { VirtualScrollComponent } from './virtual-scroll.component';
         </div>
         @if (show_view()) {
             <button
-                class="bg-base-100/80 absolute inset-0"
+                class="animate-fade-in bg-base-100/80 absolute inset-0"
                 (click)="close()"
             >
                 <button
-                    class="bg-base-100 border-base-300 absolute top-2 left-1/2 flex w-lg max-w-[calc(100%-1rem)] -translate-x-1/2 flex-col space-y-2 overflow-hidden rounded-sm border shadow-sm"
+                    class="animate-dialog-enter bg-base-100 border-base-300 absolute top-2 left-1/2 flex w-lg max-w-[calc(100%-1rem)] -translate-x-1/2 flex-col space-y-2 overflow-hidden rounded-sm border shadow-sm"
                     (click)="$event.stopPropagation()"
                 >
                     <div
diff --git a/src/app/ui/item-shell.component.ts b/src/app/ui/item-shell.component.ts
index 2dbfd543e..f93e31178 100644
--- a/src/app/ui/item-shell.component.ts
+++ b/src/app/ui/item-shell.component.ts
@@ -90,9 +90,10 @@ function mediaQuery(query: string) {
                             @if (loading()) {
                                 <item-details-skeleton />
                             } @else if (display_item()?.id) {
-                                <!-- Tabs and menus load once an item shows -->
+                                <!-- Tabs and menus load once an item shows. They fade in over the skeleton. -->
                                 @defer (on immediate) {
                                     <item-details
+                                        class="animate-fade-in"
                                         [item]="display_item()"
                                         [extra_actions]="extra_actions()"
                                         [type]="
@@ -103,11 +104,12 @@ function mediaQuery(query: string) {
                                         [base]="name()"
                                         [tabs]="tabs()"
                                         [scrolled]="scroll() > 0"
-                                        class="z-10"
+                                        class="animate-fade-in z-10"
                                     />
                                     <div
                                         #el
-                                        class="relative z-0 h-1/2 w-full flex-1 overflow-auto"
+                                        page-transition
+                                        class="animate-fade-in relative z-0 h-1/2 w-full flex-1 overflow-auto"
                                         (scroll)="scroll.set(el.scrollTop)"
                                     >
                                         <router-outlet />
diff --git a/src/app/ui/item-tablist.component.ts b/src/app/ui/item-tablist.component.ts
index 019a7fb6e..4d4eebe0d 100644
--- a/src/app/ui/item-tablist.component.ts
+++ b/src/app/ui/item-tablist.component.ts
@@ -66,6 +66,8 @@ export interface ItemTab {
                         #rla="routerLinkActive"
                         [attr.aria-current]="rla.isActive ? 'page' : null"
                     >
+                        <!-- Moves to the new tab in the page transition -->
+                        <span indicator></span>
                         <icon class="text-xl" [icon]="link.icon" />&nbsp;
                         <div class="name">{{ link.name }}&nbsp;</div>
                         @if (link.count || link.count === 0) {
@@ -79,7 +81,9 @@ export interface ItemTab {
                                         class="h-3 w-3 animate-spin rounded-full border-2 border-current/30 border-t-current"
                                     ></span>
                                 } @else {
-                                    {{ link.count || '0' }}
+                                    <span class="animate-fade-in">{{
+                                        link.count || '0'
+                                    }}</span>
                                 }
                             </div>
                         }
@@ -123,6 +127,7 @@ export interface ItemTab {
             }
 
             a {
+                position: relative;
                 display: flex;
                 flex: 1 0 auto;
                 align-items: center;
@@ -133,7 +138,6 @@ export interface ItemTab {
                 letter-spacing: 0.09em;
                 white-space: nowrap;
                 color: var(--base-content);
-                border-bottom: 2px solid transparent;
             }
 
             a:hover {
@@ -146,7 +150,14 @@ export interface ItemTab {
 
             a.active {
                 color: var(--secondary);
-                border-bottom-color: var(--secondary);
+            }
+
+            a.active [indicator] {
+                position: absolute;
+                inset: auto 0 0;
+                height: 2px;
+                background-color: var(--secondary);
+                view-transition-name: tab-indicator;
             }
         `,
     ],
diff --git a/src/app/ui/sidebar-menu.component.ts b/src/app/ui/sidebar-menu.component.ts
index 6b747986c..80edea0ab 100644
--- a/src/app/ui/sidebar-menu.component.ts
+++ b/src/app/ui/sidebar-menu.component.ts
@@ -46,6 +46,7 @@ import { UserMenuTooltipComponent } from './user-menu-tooltip.component';
             [class.compact]="compact()"
             [class.sm:w-52]="!compact()"
             [class.!flex]="open()"
+            [class.open]="open()"
             [class.pointer-events-auto!]="open()"
         >
             <nav
@@ -267,6 +268,19 @@ import { UserMenuTooltipComponent } from './user-menu-tooltip.component';
                     width: 4.5rem;
                 }
             }
+
+            /* On small screens the menu covers the page. It slides in when it opens. */
+            @media (max-width: 39.99rem) and (prefers-reduced-motion: no-preference) {
+                .open {
+                    animation: menu-enter 200ms var(--ease-enter);
+                }
+            }
+
+            @keyframes menu-enter {
+                from {
+                    transform: translateX(-100%);
+                }
+            }
         `,
     ],
     imports: [
diff --git a/src/app/ui/upload-list.component.ts b/src/app/ui/upload-list.component.ts
index 3827c2ea2..5ddf30e05 100644
--- a/src/app/ui/upload-list.component.ts
+++ b/src/app/ui/upload-list.component.ts
@@ -18,7 +18,7 @@ import { TranslatePipe } from './translate.pipe';
         @if (show()) {
             <div
                 upload-list
-                class="border-base-300 bg-base-100 text-base-content pointer-events-auto absolute bottom-2 left-2 overflow-hidden rounded-sm border text-sm shadow-sm"
+                class="animate-slide-in-up border-base-300 bg-base-100 text-base-content pointer-events-auto absolute bottom-2 left-2 overflow-hidden rounded-sm border text-sm shadow-sm"
             >
                 <div
                     class="bg-base-200 text-base-content flex items-center gap-2 p-2"
diff --git a/src/styles.css b/src/styles.css
index 1770ed41e..a1daaa181 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -111,7 +111,8 @@
     --radius-md: 6px;
     --radius-lg: 8px;
     --motion-snap: 120ms cubic-bezier(0.8, -0.4, 0.5, 1);
-    --motion-enter: 160ms cubic-bezier(0.24, 1, 0.32, 1);
+    --ease-enter: cubic-bezier(0.24, 1, 0.32, 1);
+    --motion-enter: 160ms var(--ease-enter);
     /* Solid, unblurred shadows of raised surfaces */
     --shadow-high:
         0 4px 0 2px rgb(16 16 48 / 0.03), 0 1px 0 1px rgb(16 16 48 / 0.03);
@@ -238,26 +239,6 @@ span.highlight {
     font-family: 'Fira Code Variable', monospace;
 }
 
-@keyframes crossfade {
-    0% {
-        background-color: #d32f2f;
-    }
-    20% {
-        background-color: #7b1fa2;
-    }
-    40% {
-        background-color: #1976d2;
-    }
-    60% {
-        background-color: #00796b;
-    }
-    80% {
-        background-color: #ff8f00;
-    }
-    100% {
-        background-color: #d32f2f;
-    }
-}
 
 #placeos .markdown {
     ol {
@@ -554,26 +535,6 @@ span.highlight {
     font-family: 'Fira Code Variable', monospace;
 }
 
-@keyframes crossfade {
-    0% {
-        background-color: #d32f2f;
-    }
-    20% {
-        background-color: #7b1fa2;
-    }
-    40% {
-        background-color: #1976d2;
-    }
-    60% {
-        background-color: #00796b;
-    }
-    80% {
-        background-color: #ff8f00;
-    }
-    100% {
-        background-color: #d32f2f;
-    }
-}
 
 #placeos .markdown {
     ol {
@@ -1012,6 +973,7 @@ app-select {
     color: var(--base-content);
     box-shadow: 0 2px 0 var(--base-300);
     font-size: 0.875rem;
+    animation: dialog-enter var(--motion-enter);
 }
 
 .select-panel {
@@ -1321,7 +1283,9 @@ input[type='checkbox'][role='switch'] {
         animation-duration: 4s;
     }
 
-    .cdk-dialog-container {
+    .cdk-dialog-container,
+    .select-panel,
+    .cdk-menu {
         animation: none;
     }
 }
@@ -1438,6 +1402,11 @@ input[type='checkbox'][role='switch'] {
     animation: fade-in-scale 150ms ease-out;
     @apply shadow-lg;
 
+    /* Set by animate.leave in the toast outlet while the toast closes */
+    &.toast-leave {
+        animation: fade-out 120ms ease-in forwards;
+    }
+
     &.success {
         background-color: var(--success);
         color: var(--success-content);
@@ -1833,35 +1802,69 @@ a[icon] {
     min-height: 0;
 }
 
-/* Expandable with width animation */
-#placeos .expandable-all {
-    display: grid;
-    grid-template-rows: 0fr;
-    width: 0;
-    overflow: hidden;
-    transition:
-        grid-template-rows 200ms ease-in-out,
-        width 200ms ease-in-out;
+/* Page transitions. The router starts a view transition on each navigation
+   (withViewTransitions in app.config.ts). The rest of the window changes at
+   once. Only these parts animate:
+   - `[page-transition]`: the routed content. It crossfades.
+   - the active tab, admin page and main menu link. They move to the new link. */
+[page-transition] {
+    view-transition-name: page;
 }
 
-#placeos .expandable-all.expanded {
-    grid-template-rows: 1fr;
-    width: auto;
+[admin-nav] a[aria-current='page'] {
+    view-transition-name: admin-nav-active;
 }
 
-#placeos .expandable-all > * {
-    overflow: hidden;
-    min-height: 0;
+[sidebar-menu] a[aria-current='page'] {
+    view-transition-name: menu-active;
+}
+
+::view-transition-group(root),
+::view-transition-old(root),
+::view-transition-new(root) {
+    animation: none;
+}
+
+/* The page area can change size, e.g. from admin to systems. Show the
+   snapshots at their own size, so they do not stretch. */
+::view-transition-group(page) {
+    animation: none;
+}
+
+::view-transition-old(page),
+::view-transition-new(page) {
+    height: 100%;
+    object-fit: none;
+    object-position: top left;
+}
+
+::view-transition-old(page) {
+    animation: fade-out 80ms ease-in both;
 }
 
-/* Fade animation */
-#placeos .fade-in-out {
-    opacity: 0;
-    transition: opacity 200ms ease-in-out;
+::view-transition-new(page) {
+    animation: fade-in var(--motion-enter) both;
 }
 
-#placeos .fade-in-out.visible {
-    opacity: 1;
+::view-transition-group(tab-indicator),
+::view-transition-group(admin-nav-active),
+::view-transition-group(menu-active) {
+    animation-duration: 200ms;
+    animation-timing-function: var(--ease-enter);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    ::view-transition-group(*),
+    ::view-transition-old(*),
+    ::view-transition-new(*) {
+        animation: none !important;
+    }
+}
+
+@keyframes fade-out {
+    to {
+        opacity: 0;
+    }
 }
 
 /* Keyframe animations for enter transitions */
@@ -1900,39 +1903,21 @@ a[icon] {
     animation: fade-in 200ms ease-out;
 }
 
-#placeos .animate-fade-in-scale {
-    animation: fade-in-scale 200ms ease-out;
+/* The same enter motion as dialogs, for panels that are not CDK dialogs */
+#placeos .animate-dialog-enter {
+    animation: dialog-enter var(--motion-enter);
 }
 
 #placeos .animate-slide-in-up {
     animation: slide-in-up 200ms ease-out;
 }
 
-/* Slide animations */
-#placeos .slide-up {
-    transform: translateY(100%);
-    opacity: 0;
-    transition:
-        transform 200ms ease-in-out,
-        opacity 200ms ease-in-out;
-}
-
-#placeos .slide-up.visible {
-    transform: translateY(0);
-    opacity: 1;
-}
-
-#placeos .slide-down {
-    transform: translateY(-100%);
-    opacity: 0;
-    transition:
-        transform 200ms ease-in-out,
-        opacity 200ms ease-in-out;
-}
-
-#placeos .slide-down.visible {
-    transform: translateY(0);
-    opacity: 1;
+/* Fades stay. Motion that moves or scales stops. */
+@media (prefers-reduced-motion: reduce) {
+    #placeos .animate-dialog-enter,
+    #placeos .animate-slide-in-up {
+        animation: none;
+    }
 }
 
 #placeos {