diff --git a/src/frontend/src/assets/aspiry/aspiry-night-vision.png b/src/frontend/src/assets/aspiry/aspiry-night-vision.png
new file mode 100644
index 000000000..939279b24
Binary files /dev/null and b/src/frontend/src/assets/aspiry/aspiry-night-vision.png differ
diff --git a/src/frontend/src/assets/aspiry/aspiry-sunglasses.png b/src/frontend/src/assets/aspiry/aspiry-sunglasses.png
new file mode 100644
index 000000000..f986346f6
Binary files /dev/null and b/src/frontend/src/assets/aspiry/aspiry-sunglasses.png differ
diff --git a/src/frontend/src/components/FooterPreferences.astro b/src/frontend/src/components/FooterPreferences.astro
index 13863dba8..1df78b029 100644
--- a/src/frontend/src/components/FooterPreferences.astro
+++ b/src/frontend/src/components/FooterPreferences.astro
@@ -170,28 +170,40 @@ const themeLabels = {
         }
       }
 
-      function applyTheme(theme: ThemeOption) {
-        // Use Starlight's theme system
-        setStoredPreference('starlight-theme', theme);
-
-        // Apply theme immediately
-        const root = document.documentElement;
-        if (theme === 'auto') {
-          const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-          root.dataset.theme = prefersDark ? 'dark' : 'light';
-        } else {
-          root.dataset.theme = theme;
+      function getThemeOrigin(element: Element, event?: MouseEvent) {
+        if (event?.detail) {
+          return { x: event.clientX, y: event.clientY };
         }
 
-        updateThemeToggle(theme);
+        const bounds = element.getBoundingClientRect();
+        return {
+          x: bounds.left + bounds.width / 2,
+          y: bounds.top + bounds.height / 2,
+        };
+      }
 
-        // Sync with Starlight's header theme select if present
-        const headerThemeSelect = document.querySelector<HTMLSelectElement>(
-          'starlight-theme-select select'
-        );
-        if (headerThemeSelect) {
-          headerThemeSelect.value = theme;
+      function applyTheme(theme: ThemeOption, origin: { x: number; y: number }) {
+        const transitionApi = (
+          window as Window & {
+            AspireThemeTransition?: {
+              setTheme: (theme: ThemeOption, origin?: { x: number; y: number }) => void;
+            };
+          }
+        ).AspireThemeTransition;
+
+        if (transitionApi) {
+          transitionApi.setTheme(theme, origin);
+          return;
         }
+
+        setStoredPreference('starlight-theme', theme);
+        document.documentElement.dataset.theme =
+          theme === 'auto'
+            ? window.matchMedia('(prefers-color-scheme: dark)').matches
+              ? 'dark'
+              : 'light'
+            : theme;
+        updateThemeToggle(theme);
       }
 
       // Get current theme from Starlight's storage
@@ -199,11 +211,11 @@ const themeLabels = {
       updateThemeToggle(isThemeOption(storedTheme) ? storedTheme : 'auto');
 
       for (const button of themeButtons) {
-        button.addEventListener('click', () => {
+        button.addEventListener('click', (event) => {
           const theme = button.dataset.themeOption;
 
           if (isThemeOption(theme)) {
-            applyTheme(theme);
+            applyTheme(theme, getThemeOrigin(button, event));
           }
         });
       }
@@ -229,9 +241,8 @@ const themeLabels = {
                 : (currentIndex + 1) % themeOptions.length;
         const nextTheme = themeOptions[nextIndex];
 
-        applyTheme(nextTheme);
-
         const nextButton = themeButtons.find((button) => button.dataset.themeOption === nextTheme);
+        applyTheme(nextTheme, getThemeOrigin(nextButton ?? themeToggle));
         nextButton?.focus();
       });
     }
diff --git a/src/frontend/src/components/ThemeTransition.astro b/src/frontend/src/components/ThemeTransition.astro
new file mode 100644
index 000000000..7ac7a101d
--- /dev/null
+++ b/src/frontend/src/components/ThemeTransition.astro
@@ -0,0 +1,577 @@
+---
+interface Props {
+  sunglassesSrc?: string;
+  nightVisionSrc?: string;
+}
+
+const { sunglassesSrc = '', nightVisionSrc = '' } = Astro.props;
+---
+
+<div
+  id="aspire-theme-transition"
+  aria-hidden="true"
+  data-sunglasses-src={sunglassesSrc}
+  data-night-vision-src={nightVisionSrc}
+>
+</div>
+
+<script>
+  import { setStoredPreference } from '@utils/browser-storage';
+
+  type ThemeChoice = 'light' | 'auto' | 'dark';
+  type ResolvedTheme = 'light' | 'dark';
+  type TransitionOrigin = { x: number; y: number };
+  type ThemeTransitionDocument = Document & {
+    startViewTransition?: (update: () => void) => ViewTransition;
+  };
+  type ViewTransition = {
+    ready: Promise<void>;
+    finished: Promise<void>;
+    skipTransition: () => void;
+  };
+  type ThemeTransitionApi = {
+    setTheme: (theme: ThemeChoice, origin?: TransitionOrigin) => void;
+  };
+
+  const root = document.documentElement;
+  const reverseToggleWindow = 3_000;
+  const aspiryPlacements = [
+    'bottom-left',
+    'bottom-center',
+    'bottom-right',
+    'left',
+    'right',
+    'top-left',
+    'top-right',
+  ] as const;
+  const aspiryGestures = ['bob', 'tilt', 'wiggle'] as const;
+  const pointerOrigins = new WeakMap<Element, TransitionOrigin>();
+  const themeTransitionDocument = document as ThemeTransitionDocument;
+  const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+  let activeTransition: ViewTransition | undefined;
+  let aspiryGeneration = 0;
+  let lastAspiryGesture: (typeof aspiryGestures)[number] | undefined;
+  let lastAspiryPlacement: (typeof aspiryPlacements)[number] | undefined;
+  let themeGeneration = 0;
+  let lastChange:
+    | {
+        from: ResolvedTheme;
+        to: ResolvedTheme;
+        startedAt: number;
+      }
+    | undefined;
+
+  function isThemeChoice(value: string | null | undefined): value is ThemeChoice {
+    return value === 'light' || value === 'auto' || value === 'dark';
+  }
+
+  function getHost(): HTMLElement | null {
+    return document.getElementById('aspire-theme-transition');
+  }
+
+  function resolveTheme(theme: ThemeChoice): ResolvedTheme {
+    if (theme !== 'auto') {
+      return theme;
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  function getElementOrigin(element: Element | null): TransitionOrigin {
+    const bounds = element?.getBoundingClientRect();
+
+    return bounds
+      ? {
+          x: bounds.left + bounds.width / 2,
+          y: bounds.top + bounds.height / 2,
+        }
+      : {
+          x: window.innerWidth / 2,
+          y: window.innerHeight / 2,
+        };
+  }
+
+  function updateThemeControls(theme: ThemeChoice) {
+    for (const toggle of document.querySelectorAll<HTMLElement>('[data-theme-choice]')) {
+      toggle.dataset.themeChoice = theme;
+
+      for (const button of toggle.querySelectorAll<HTMLButtonElement>('[data-theme-option]')) {
+        const isSelected = button.dataset.themeOption === theme;
+        button.setAttribute('aria-checked', String(isSelected));
+        button.tabIndex = isSelected ? 0 : -1;
+      }
+    }
+
+    for (const select of document.querySelectorAll<HTMLSelectElement>(
+      'starlight-theme-select select'
+    )) {
+      select.value = theme;
+    }
+  }
+
+  function applyTheme(theme: ThemeChoice) {
+    setStoredPreference('starlight-theme', theme);
+    root.dataset.theme = resolveTheme(theme);
+    updateThemeControls(theme);
+  }
+
+  function getRippleSize(origin: TransitionOrigin): number {
+    const farthestX = Math.max(origin.x, window.innerWidth - origin.x);
+    const farthestY = Math.max(origin.y, window.innerHeight - origin.y);
+
+    return Math.ceil(Math.hypot(farthestX, farthestY) * 5);
+  }
+
+  function setTransitionGeometry(origin: TransitionOrigin, size: number) {
+    root.style.setProperty('--aspire-theme-origin-x', `${origin.x}px`);
+    root.style.setProperty('--aspire-theme-origin-y', `${origin.y}px`);
+    root.style.setProperty('--aspire-theme-ripple-size', `${size}px`);
+    root.style.setProperty('--aspire-theme-ripple-left', `${origin.x - size / 2}px`);
+    root.style.setProperty('--aspire-theme-ripple-top', `${origin.y - size / 2}px`);
+  }
+
+  function shouldShowAspiry(from: ResolvedTheme, to: ResolvedTheme, startedAt: number): boolean {
+    return Boolean(
+      lastChange &&
+      lastChange.from === to &&
+      lastChange.to === from &&
+      startedAt - lastChange.startedAt <= reverseToggleWindow
+    );
+  }
+
+  function clearAspiry() {
+    for (const image of getHost()?.querySelectorAll('.aspire-theme-aspiry') ?? []) {
+      image.remove();
+    }
+  }
+
+  function pickDifferent<T extends string>(
+    options: readonly [T, ...T[]],
+    previous: T | undefined
+  ): T {
+    const available = previous ? options.filter((option) => option !== previous) : options;
+    return available[Math.floor(Math.random() * available.length)] ?? options[0];
+  }
+
+  function showAspiry(theme: ResolvedTheme, generation: number) {
+    const host = getHost();
+    if (!host || motionQuery.matches || generation !== aspiryGeneration) {
+      return;
+    }
+
+    clearAspiry();
+
+    const source = theme === 'light' ? host.dataset.sunglassesSrc : host.dataset.nightVisionSrc;
+    if (!source) {
+      return;
+    }
+
+    const image = document.createElement('img');
+    const placement = pickDifferent(aspiryPlacements, lastAspiryPlacement);
+    const gesture = pickDifferent(aspiryGestures, lastAspiryGesture);
+    lastAspiryPlacement = placement;
+    lastAspiryGesture = gesture;
+    image.className = 'aspire-theme-aspiry';
+    image.src = source;
+    image.alt = '';
+    image.dataset.placement = placement;
+    image.dataset.gesture = gesture;
+    image.addEventListener(
+      'click',
+      () => {
+        aspiryGeneration++;
+        const style = getComputedStyle(image);
+        const opacity = style.opacity;
+        const rotate = style.rotate;
+        const scale = style.scale;
+        const translate = style.translate;
+        image.getAnimations().forEach((animation) => animation.cancel());
+        image.style.opacity = opacity;
+        image.style.rotate = rotate;
+        image.style.scale = scale;
+        image.style.translate = translate;
+        image.style.transition = 'opacity 180ms ease-out';
+        requestAnimationFrame(() => {
+          image.style.opacity = '0';
+        });
+        window.setTimeout(() => image.remove(), 200);
+      },
+      { once: true }
+    );
+    image.addEventListener('animationend', () => image.remove(), { once: true });
+    host.append(image);
+  }
+
+  function setTheme(theme: ThemeChoice, origin = getElementOrigin(document.activeElement)) {
+    const from = root.dataset.theme === 'light' ? 'light' : 'dark';
+    const to = resolveTheme(theme);
+    const startedAt = performance.now();
+    const currentAspiryGeneration = ++aspiryGeneration;
+    const currentThemeGeneration = ++themeGeneration;
+    const showQuickToggleAspiry = from !== to && shouldShowAspiry(from, to, startedAt);
+
+    activeTransition?.skipTransition();
+    clearAspiry();
+
+    if (from === to || motionQuery.matches || !themeTransitionDocument.startViewTransition) {
+      applyTheme(theme);
+      if (showQuickToggleAspiry) {
+        showAspiry(to, currentAspiryGeneration);
+      }
+      if (from !== to) {
+        lastChange = { from, to, startedAt };
+      }
+      return;
+    }
+
+    const size = getRippleSize(origin);
+    setTransitionGeometry(origin, size);
+    root.dataset.aspireThemeTransition = '';
+    let transition: ViewTransition;
+
+    try {
+      transition = themeTransitionDocument.startViewTransition(() => {
+        if (currentThemeGeneration === themeGeneration) {
+          applyTheme(theme);
+        }
+      });
+    } catch (error) {
+      delete root.dataset.aspireThemeTransition;
+      applyTheme(theme);
+      console.warn(
+        'Aspire theme transition could not start; applied the theme immediately.',
+        error
+      );
+      if (showQuickToggleAspiry) {
+        showAspiry(to, currentAspiryGeneration);
+      }
+      lastChange = { from, to, startedAt };
+      return;
+    }
+
+    activeTransition = transition;
+
+    transition.ready
+      .then(() => {
+        if (showQuickToggleAspiry) {
+          window.setTimeout(() => showAspiry(to, currentAspiryGeneration), 420);
+        }
+      })
+      .catch(() => undefined);
+
+    transition.finished.finally(() => {
+      if (activeTransition === transition) {
+        activeTransition = undefined;
+        delete root.dataset.aspireThemeTransition;
+      }
+    });
+
+    lastChange = { from, to, startedAt };
+  }
+
+  function getThemeControl(element: Element | null): Element | null {
+    return element?.closest('[data-theme-option], starlight-theme-select select') ?? null;
+  }
+
+  if (!(window as Window & { AspireThemeTransition?: ThemeTransitionApi }).AspireThemeTransition) {
+    (window as Window & { AspireThemeTransition?: ThemeTransitionApi }).AspireThemeTransition = {
+      setTheme,
+    };
+
+    motionQuery.addEventListener('change', (event) => {
+      if (!event.matches) {
+        return;
+      }
+
+      aspiryGeneration++;
+      clearAspiry();
+      activeTransition?.skipTransition();
+    });
+
+    document.addEventListener(
+      'pointerdown',
+      (event) => {
+        const control = getThemeControl(event.target instanceof Element ? event.target : null);
+        if (control) {
+          pointerOrigins.set(control, { x: event.clientX, y: event.clientY });
+        }
+      },
+      true
+    );
+
+    document.addEventListener(
+      'change',
+      (event) => {
+        const target = event.target;
+        if (!(target instanceof HTMLSelectElement) || !target.closest('starlight-theme-select')) {
+          return;
+        }
+
+        if (!isThemeChoice(target.value)) {
+          return;
+        }
+
+        event.stopImmediatePropagation();
+        const origin = pointerOrigins.get(target) ?? getElementOrigin(target);
+        setTheme(target.value, origin);
+      },
+      true
+    );
+  }
+</script>
+
+<style is:global>
+  #aspire-theme-transition {
+    position: fixed;
+    inset: 0;
+    z-index: 2147483647;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  html[data-aspire-theme-transition]::view-transition-old(root),
+  html[data-aspire-theme-transition]::view-transition-old(aspire-sidebar) {
+    animation: none !important;
+    mix-blend-mode: normal;
+  }
+
+  html[data-aspire-theme-transition]::view-transition-new(root),
+  html[data-aspire-theme-transition]::view-transition-new(aspire-sidebar) {
+    z-index: 1;
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M28 240C12.56 240 0 227.44 0 212C0 206.968 1.328 202.072 3.84 197.832L70.544 82.296L70.816 81.888L103.744 24.792C108.744 16.152 118.032 10.792 128 10.792C137.968 10.792 147.256 16.152 152.248 24.784L252.248 197.992C254.664 202.064 255.992 206.96 255.992 211.992C255.992 227.432 243.432 239.992 227.992 239.992L28 240Z'/%3E%3C/svg%3E");
+    mask-repeat: no-repeat;
+    animation: aspire-theme-reveal 420ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
+    mix-blend-mode: normal;
+  }
+
+  .aspire-theme-aspiry {
+    position: fixed;
+    width: clamp(6.5rem, 12vw, 9.5rem);
+    height: auto;
+    filter: drop-shadow(0 0.65rem 1.15rem rgba(31, 30, 51, 0.28));
+    animation-duration: 5s, 5s;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), ease-in-out;
+    animation-fill-mode: both;
+    cursor: pointer;
+    pointer-events: auto;
+    will-change: opacity, translate, rotate, scale;
+    --aspiry-rest-x: 0%;
+    --aspiry-rest-y: 0%;
+    --aspiry-start-x: var(--aspiry-rest-x);
+    --aspiry-start-y: 45%;
+    --aspiry-enter-x: var(--aspiry-rest-x);
+    --aspiry-enter-y: -10%;
+    --aspiry-exit-x: var(--aspiry-rest-x);
+    --aspiry-exit-y: 45%;
+  }
+
+  .aspire-theme-aspiry[data-placement='bottom-left'] {
+    bottom: max(1rem, env(safe-area-inset-bottom));
+    left: max(1rem, env(safe-area-inset-left));
+  }
+
+  .aspire-theme-aspiry[data-placement='bottom-center'] {
+    bottom: max(1rem, env(safe-area-inset-bottom));
+    left: 50%;
+    --aspiry-rest-x: -50%;
+    --aspiry-start-x: -50%;
+    --aspiry-enter-x: -50%;
+    --aspiry-exit-x: -50%;
+  }
+
+  .aspire-theme-aspiry[data-placement='bottom-right'] {
+    right: max(1rem, env(safe-area-inset-right));
+    bottom: max(1rem, env(safe-area-inset-bottom));
+  }
+
+  .aspire-theme-aspiry[data-placement='left'] {
+    top: 52%;
+    left: 0;
+    --aspiry-rest-x: -15%;
+    --aspiry-rest-y: -50%;
+    --aspiry-start-x: -90%;
+    --aspiry-start-y: -50%;
+    --aspiry-enter-x: -5%;
+    --aspiry-enter-y: -50%;
+    --aspiry-exit-x: -90%;
+    --aspiry-exit-y: -50%;
+  }
+
+  .aspire-theme-aspiry[data-placement='right'] {
+    top: 48%;
+    right: 0;
+    --aspiry-rest-x: 15%;
+    --aspiry-rest-y: -50%;
+    --aspiry-start-x: 90%;
+    --aspiry-start-y: -50%;
+    --aspiry-enter-x: 5%;
+    --aspiry-enter-y: -50%;
+    --aspiry-exit-x: 90%;
+    --aspiry-exit-y: -50%;
+  }
+
+  .aspire-theme-aspiry[data-placement='top-left'] {
+    top: max(4.5rem, env(safe-area-inset-top));
+    left: max(1rem, env(safe-area-inset-left));
+    --aspiry-start-y: -90%;
+    --aspiry-enter-y: 10%;
+    --aspiry-exit-y: -90%;
+  }
+
+  .aspire-theme-aspiry[data-placement='top-right'] {
+    top: max(4.5rem, env(safe-area-inset-top));
+    right: max(1rem, env(safe-area-inset-right));
+    --aspiry-start-y: -90%;
+    --aspiry-enter-y: 10%;
+    --aspiry-exit-y: -90%;
+  }
+
+  .aspire-theme-aspiry[data-gesture='bob'] {
+    animation-name: aspire-theme-aspiry-entrance, aspire-theme-aspiry-bob;
+  }
+
+  .aspire-theme-aspiry[data-gesture='tilt'] {
+    animation-name: aspire-theme-aspiry-entrance, aspire-theme-aspiry-tilt;
+  }
+
+  .aspire-theme-aspiry[data-gesture='wiggle'] {
+    animation-name: aspire-theme-aspiry-entrance, aspire-theme-aspiry-wiggle;
+  }
+
+  @keyframes aspire-theme-reveal {
+    0% {
+      opacity: 0.72;
+      filter: saturate(0.25);
+      mask-position: var(--aspire-theme-origin-x) var(--aspire-theme-origin-y);
+      mask-size: 0 0;
+    }
+
+    55% {
+      opacity: 0.86;
+      filter: saturate(0.55);
+    }
+
+    100% {
+      opacity: 1;
+      filter: saturate(1);
+      mask-position: var(--aspire-theme-ripple-left) var(--aspire-theme-ripple-top);
+      mask-size: var(--aspire-theme-ripple-size) var(--aspire-theme-ripple-size);
+    }
+  }
+
+  @keyframes aspire-theme-aspiry-entrance {
+    0% {
+      opacity: 0;
+      translate: var(--aspiry-start-x) var(--aspiry-start-y);
+    }
+
+    16% {
+      opacity: 1;
+      translate: var(--aspiry-enter-x) var(--aspiry-enter-y);
+    }
+
+    24% {
+      opacity: 1;
+      translate: var(--aspiry-rest-x) var(--aspiry-rest-y);
+    }
+
+    74% {
+      opacity: 1;
+      translate: var(--aspiry-rest-x) var(--aspiry-rest-y);
+    }
+
+    88% {
+      opacity: 0.72;
+      translate: var(--aspiry-enter-x) var(--aspiry-enter-y);
+    }
+
+    100% {
+      opacity: 0;
+      translate: var(--aspiry-exit-x) var(--aspiry-exit-y);
+    }
+  }
+
+  @keyframes aspire-theme-aspiry-bob {
+    0%,
+    24%,
+    74%,
+    100% {
+      rotate: 0deg;
+      scale: 1;
+    }
+
+    38% {
+      rotate: -2deg;
+      scale: 1.04;
+    }
+
+    52% {
+      rotate: 2deg;
+      scale: 0.98;
+    }
+
+    64% {
+      rotate: 0deg;
+      scale: 1.02;
+    }
+  }
+
+  @keyframes aspire-theme-aspiry-tilt {
+    0%,
+    24%,
+    74%,
+    100% {
+      rotate: 0deg;
+      scale: 1;
+    }
+
+    38% {
+      rotate: -7deg;
+      scale: 1.02;
+    }
+
+    58% {
+      rotate: 5deg;
+      scale: 1.02;
+    }
+  }
+
+  @keyframes aspire-theme-aspiry-wiggle {
+    0%,
+    24%,
+    74%,
+    100% {
+      rotate: 0deg;
+      scale: 1;
+    }
+
+    34% {
+      rotate: -5deg;
+      scale: 1.03;
+    }
+
+    42% {
+      rotate: 5deg;
+    }
+
+    50% {
+      rotate: -3deg;
+    }
+
+    58% {
+      rotate: 3deg;
+    }
+
+    66% {
+      rotate: 0deg;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html[data-aspire-theme-transition]::view-transition-old(root),
+    html[data-aspire-theme-transition]::view-transition-new(root),
+    .aspire-theme-aspiry {
+      animation: none !important;
+    }
+  }
+</style>
diff --git a/src/frontend/src/components/starlight/Footer.astro b/src/frontend/src/components/starlight/Footer.astro
index 49432c8b3..f65b9fd96 100644
--- a/src/frontend/src/components/starlight/Footer.astro
+++ b/src/frontend/src/components/starlight/Footer.astro
@@ -8,6 +8,9 @@ import FooterPreferences from '@components/FooterPreferences.astro';
 import FooterResources from '@components/FooterResources.astro';
 import FooterSocials from '@components/FooterSocials.astro';
 import ScrollToTop from '@components/ScrollToTop.astro';
+import ThemeTransition from '@components/ThemeTransition.astro';
+import aspiryNightVision from '@assets/aspiry/aspiry-night-vision.png';
+import aspirySunglasses from '@assets/aspiry/aspiry-sunglasses.png';
 import aspireLogo from '@assets/aspire-logo-256.svg';
 
 import { isHomepage } from '@utils/helpers';
@@ -20,6 +23,7 @@ const commit = (import.meta.env.PUBLIC_GIT_COMMIT_ID || import.meta.env.GIT_COMM
 );
 ---
 
+<ThemeTransition sunglassesSrc={aspirySunglasses.src} nightVisionSrc={aspiryNightVision.src} />
 <div class="footer-wrapper">
   <div class="footer-container">
     {
diff --git a/src/frontend/tests/e2e/ui-regressions.spec.ts b/src/frontend/tests/e2e/ui-regressions.spec.ts
index f1e0096c9..b21f43ecb 100644
--- a/src/frontend/tests/e2e/ui-regressions.spec.ts
+++ b/src/frontend/tests/e2e/ui-regressions.spec.ts
@@ -545,6 +545,11 @@ test('footer preferences persist theme and keyboard style selections', async ({
   await darkThemeButton.click();
   await expectThemeSelection('dark');
   await expect.poll(() => page.evaluate(() => document.documentElement.dataset.theme)).toBe('dark');
+  await expect
+    .poll(() =>
+      page.evaluate(() => document.documentElement.hasAttribute('data-aspire-theme-transition'))
+    )
+    .toBe(false);
   await expect
     .poll(() => page.evaluate(() => localStorage.getItem('starlight-theme')))
     .toBe('dark');
@@ -555,6 +560,7 @@ test('footer preferences persist theme and keyboard style selections', async ({
   await expect
     .poll(() => page.evaluate(() => document.documentElement.dataset.theme))
     .toBe('light');
+  await expect(page.locator('#aspire-theme-transition')).toBeAttached();
   await expectMatchingPreferenceSurfaces();
 
   await languageTrigger.click();
@@ -826,6 +832,223 @@ test('aligns the scroll-to-top control with the header action at each breakpoint
   }
 });
 
+test('theme changes skip decorative motion when reduced motion is requested', async ({ page }) => {
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  await page.goto('/get-started/aspire-vscode-extension/');
+  await dismissCookieConsentIfVisible(page);
+
+  const themeToggle = page.locator('#footer-theme-toggle');
+  await themeToggle.getByRole('radio', { name: 'Dark' }).click();
+
+  await expect.poll(() => page.evaluate(() => document.documentElement.dataset.theme)).toBe('dark');
+  await expect
+    .poll(() =>
+      page.evaluate(() => document.documentElement.hasAttribute('data-aspire-theme-transition'))
+    )
+    .toBe(false);
+  await expect(page.locator('.aspire-theme-artwork')).toHaveCount(0);
+});
+
+test('latest theme request wins when a skipped transition update runs late', async ({ page }) => {
+  await page.addInitScript(() => {
+    localStorage.setItem('starlight-theme', 'light');
+    Object.defineProperty(Document.prototype, 'startViewTransition', {
+      configurable: true,
+      value(update: () => void) {
+        const finished = new Promise<void>((resolve) => {
+          window.setTimeout(() => {
+            update();
+            resolve();
+          }, 100);
+        });
+
+        return {
+          ready: finished,
+          finished,
+          skipTransition() {},
+        };
+      },
+    });
+  });
+  await page.goto('/get-started/aspire-vscode-extension/');
+  await dismissCookieConsentIfVisible(page);
+
+  await page.evaluate(() => {
+    const transitionApi = (
+      window as Window & {
+        AspireThemeTransition: {
+          setTheme: (theme: 'light' | 'dark', origin: { x: number; y: number }) => void;
+        };
+      }
+    ).AspireThemeTransition;
+
+    transitionApi.setTheme('dark', { x: innerWidth / 2, y: innerHeight / 2 });
+    transitionApi.setTheme('light', { x: innerWidth / 2, y: innerHeight / 2 });
+  });
+
+  await page.waitForTimeout(200);
+  await expect.poll(() => page.evaluate(() => document.documentElement.dataset.theme)).toBe('light');
+  await expect
+    .poll(() => page.evaluate(() => localStorage.getItem('starlight-theme')))
+    .toBe('light');
+});
+
+test('enabling reduced motion removes visible Aspiry artwork', async ({ page }) => {
+  await page.emulateMedia({ reducedMotion: 'no-preference' });
+  await page.addInitScript(() => {
+    localStorage.setItem('starlight-theme', 'light');
+  });
+  await page.goto('/get-started/aspire-vscode-extension/');
+  await dismissCookieConsentIfVisible(page);
+
+  const themeToggle = page.locator('#footer-theme-toggle');
+  await themeToggle.getByRole('radio', { name: 'Dark' }).click();
+  await expect.poll(() => page.evaluate(() => document.documentElement.dataset.theme)).toBe('dark');
+  await themeToggle.getByRole('radio', { name: 'Light' }).click();
+  await expect(page.locator('.aspire-theme-aspiry')).toHaveCount(1);
+
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+
+  await expect(page.locator('.aspire-theme-aspiry')).toHaveCount(0);
+});
+
+test('theme reveal masks both the root and named sidebar snapshots', async ({ page }) => {
+  test.skip(
+    page.viewportSize()?.width !== 1440,
+    'The named View Transition snapshot contract only needs one Chromium viewport.'
+  );
+
+  await page.addInitScript(() => {
+    localStorage.setItem('starlight-theme', 'light');
+  });
+  await page.goto('/get-started/aspire-vscode-extension/');
+  await dismissCookieConsentIfVisible(page);
+  await page.addStyleTag({
+    content: `
+      html[data-aspire-theme-transition]::view-transition-new(root),
+      html[data-aspire-theme-transition]::view-transition-new(aspire-sidebar) {
+        animation-duration: 5s !important;
+      }
+    `,
+  });
+
+  await page.locator('#footer-theme-toggle').getByRole('radio', { name: 'Dark' }).click();
+  await expect
+    .poll(() =>
+      page.evaluate(() => document.documentElement.hasAttribute('data-aspire-theme-transition'))
+    )
+    .toBe(true);
+
+  const snapshots = await page.evaluate(() => {
+    const root = document.documentElement;
+    const readSnapshot = (pseudo: string) => {
+      const style = getComputedStyle(root, pseudo);
+      return {
+        animationName: style.animationName,
+        maskImage: style.maskImage,
+      };
+    };
+
+    return {
+      newRoot: readSnapshot('::view-transition-new(root)'),
+      newSidebar: readSnapshot('::view-transition-new(aspire-sidebar)'),
+      oldRoot: readSnapshot('::view-transition-old(root)'),
+      oldSidebar: readSnapshot('::view-transition-old(aspire-sidebar)'),
+    };
+  });
+
+  expect(snapshots.newRoot.animationName).toBe('aspire-theme-reveal');
+  expect(snapshots.newSidebar.animationName).toBe('aspire-theme-reveal');
+  expect(snapshots.newRoot.maskImage).toContain('data:image/svg+xml');
+  expect(snapshots.newSidebar.maskImage).toBe(snapshots.newRoot.maskImage);
+  expect(snapshots.oldRoot.animationName).toBe('none');
+  expect(snapshots.oldSidebar.animationName).toBe('none');
+});
+
+test('quick reverse theme changes vary Aspiry placement and gesture', async ({ page }) => {
+  await page.addInitScript(() => {
+    localStorage.setItem('starlight-theme', 'light');
+  });
+  await page.goto('/get-started/aspire-vscode-extension/');
+  await dismissCookieConsentIfVisible(page);
+
+  await page.locator('#aspire-theme-transition').evaluate((host) => {
+    host.setAttribute(
+      'data-sunglasses-src',
+      'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" id="sunglasses"/%3E'
+    );
+    host.setAttribute(
+      'data-night-vision-src',
+      'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" id="night-vision"/%3E'
+    );
+  });
+
+  await page.evaluate(async () => {
+    const transitionApi = (
+      window as Window & {
+        AspireThemeTransition: {
+          setTheme: (theme: 'light' | 'dark', origin: { x: number; y: number }) => void;
+        };
+      }
+    ).AspireThemeTransition;
+    const waitForTheme = (theme: 'light' | 'dark') =>
+      new Promise<void>((resolve) => {
+        const checkTheme = () => {
+          if (document.documentElement.dataset.theme === theme) {
+            resolve();
+          } else {
+            requestAnimationFrame(checkTheme);
+          }
+        };
+        checkTheme();
+      });
+
+    transitionApi.setTheme('dark', { x: innerWidth / 2, y: innerHeight / 2 });
+    await waitForTheme('dark');
+    await new Promise((resolve) => setTimeout(resolve, 2_200));
+    transitionApi.setTheme('light', { x: innerWidth / 2, y: innerHeight / 2 });
+  });
+
+  const aspiry = page.locator('.aspire-theme-aspiry');
+  await expect(aspiry).toHaveAttribute('src', /sunglasses/);
+  await expect(aspiry).toHaveAttribute(
+    'data-placement',
+    /^(bottom-left|bottom-center|bottom-right|left|right|top-left|top-right)$/
+  );
+  await expect(aspiry).toHaveAttribute('data-gesture', /^(bob|tilt|wiggle)$/);
+  await expect(aspiry).toHaveCSS('animation-duration', '5s, 5s');
+  const firstVariation = await aspiry.evaluate((image) => ({
+    gesture: image.dataset.gesture,
+    placement: image.dataset.placement,
+  }));
+
+  await page.evaluate(() => {
+    (
+      window as Window & {
+        AspireThemeTransition: {
+          setTheme: (theme: 'dark', origin: { x: number; y: number }) => void;
+        };
+      }
+    ).AspireThemeTransition.setTheme('dark', {
+      x: innerWidth / 2,
+      y: innerHeight / 2,
+    });
+  });
+
+  await expect(aspiry).toHaveCount(0);
+  await expect(aspiry).toHaveCount(1);
+  await expect(aspiry).toHaveAttribute('src', /night-vision/);
+  const secondVariation = await aspiry.evaluate((image) => ({
+    gesture: image.dataset.gesture,
+    placement: image.dataset.placement,
+  }));
+  expect(secondVariation.gesture).not.toBe(firstVariation.gesture);
+  expect(secondVariation.placement).not.toBe(firstVariation.placement);
+
+  await aspiry.dispatchEvent('click');
+  await expect(aspiry).toHaveCount(0);
+});
+
 test('terminal tabs stay synced between pages', async ({ page }) => {
   await page.goto('/dashboard/standalone/');
   await dismissCookieConsentIfVisible(page);
diff --git a/src/frontend/tests/unit/custom-components.vitest.test.ts b/src/frontend/tests/unit/custom-components.vitest.test.ts
index 5ecd48b2a..2c549befa 100644
--- a/src/frontend/tests/unit/custom-components.vitest.test.ts
+++ b/src/frontend/tests/unit/custom-components.vitest.test.ts
@@ -22,6 +22,7 @@ import FluidGrid from '@components/FluidGrid.astro';
 import FooterLegal from '@components/FooterLegal.astro';
 import FooterPreferences from '@components/FooterPreferences.astro';
 import FooterSocials from '@components/FooterSocials.astro';
+import ThemeTransition from '@components/ThemeTransition.astro';
 import GitHubRepoStats from '@components/GitHubRepoStats.astro';
 import HeroSection from '@components/HeroSection.astro';
 import IconAside from '@components/IconAside.astro';
@@ -762,6 +763,20 @@ const basicRenderCases: BasicRenderCase[] = [
       'Select keyboard shortcuts style',
     ],
   },
+  {
+    name: 'ThemeTransition renders the Aspire reveal controller and mascot hooks',
+    Component: ThemeTransition,
+    props: {
+      sunglassesSrc: '/aspiry-sunglasses.svg',
+      nightVisionSrc: '/aspiry-night-vision.svg',
+    },
+    includes: [
+      'id="aspire-theme-transition"',
+      'data-sunglasses-src="/aspiry-sunglasses.svg"',
+      'data-night-vision-src="/aspiry-night-vision.svg"',
+      'ThemeTransition.astro?astro&type=script',
+    ],
+  },
   {
     name: 'AccessibleCodeButtons renders accessibility enhancement script',
     Component: AccessibleCodeButtons,