diff --git a/apps/web/src/components/solutions/RolloutIllustration.astro b/apps/web/src/components/solutions/RolloutIllustration.astro
index 7785abeb5..0fe8f29c4 100644
--- a/apps/web/src/components/solutions/RolloutIllustration.astro
+++ b/apps/web/src/components/solutions/RolloutIllustration.astro
@@ -1,42 +1,326 @@
 ---
-const { class: className, ...props } = Astro.props
+interface Props {
+  class?: string
+  animated?: boolean
+}
+
+const { class: className, animated = false, ...props } = Astro.props
+
+const viewBox = animated ? '0 0 600 440' : '0 0 600 400'
+const cardHeight = animated ? 360 : 320
+const connectorEndY = animated ? 300 : 290
+const qaY = 80
+const betaY = animated ? 165 : 170
+const productionY = animated ? 250 : 260
 ---
-<svg viewBox="0 0 600 400" fill="none" xmlns="http://www.w3.org/2000/svg" class:list={["w-full h-auto drop-shadow-2xl", className]} {...props}>
-  <!-- Main Container -->
-  <rect x="40" y="40" width="520" height="320" rx="12" class="fill-gray-900 stroke-gray-700" stroke-width="2"/>
-
-  <!-- Connection Line -->
-  <path d="M100 110 V290" stroke="currentColor" stroke-width="2" stroke-dasharray="8 8" class="text-gray-600 opacity-50"/>
-
-  <!-- Stage 1: QA -->
-  <g transform="translate(80, 80)">
-    <circle cx="20" cy="20" r="20" class="fill-gray-800 stroke-green-500" stroke-width="2"/>
-    <path d="M12 20l6 6 12-12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"/>
-    <text x="60" y="25" class="fill-gray-300 font-bold text-sm">Internal QA</text>
-    <rect x="250" y="15" width="100" height="8" rx="4" class="fill-gray-800"/>
-    <rect x="250" y="15" width="100" height="8" rx="4" class="fill-green-500"/>
-    <text x="370" y="24" class="fill-green-500 text-xs font-mono">100%</text>
-  </g>
-
-  <!-- Stage 2: Beta -->
-  <g transform="translate(80, 170)">
-    <circle cx="20" cy="20" r="20" class="fill-gray-800 stroke-blue-500" stroke-width="2"/>
-    <path d="M12 20l6 6 12-12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="text-blue-500"/>
-    <text x="60" y="25" class="fill-gray-300 font-bold text-sm">Beta Users</text>
-    <rect x="250" y="15" width="100" height="8" rx="4" class="fill-gray-800"/>
-    <rect x="250" y="15" width="100" height="8" rx="4" class="fill-blue-500"/>
-    <text x="370" y="24" class="fill-blue-500 text-xs font-mono">100%</text>
-  </g>
-
-  <!-- Stage 3: Production -->
-  <g transform="translate(80, 260)">
-    <circle cx="20" cy="20" r="20" class="fill-gray-800 stroke-amber-500" stroke-width="2"/>
-    <circle cx="20" cy="20" r="8" class="fill-amber-500 animate-pulse"/>
-    <text x="60" y="25" class="fill-white font-bold text-sm">Production</text>
-    <rect x="250" y="15" width="100" height="8" rx="4" class="fill-gray-800"/>
-    <rect x="250" y="15" width="25" height="8" rx="4" class="fill-amber-500"/>
-    <text x="370" y="24" class="fill-amber-500 text-xs font-mono">25%</text>
-  </g>
-
-</svg>
 
+<div class:list={['rollout-illustration', animated && 'rollout-illustration--animated']} data-rollout-illustration={animated ? 'true' : undefined}>
+  {
+    animated && (
+      <p class="sr-only" aria-live="polite" aria-atomic="true" data-rollout-status>
+        Progressive rollout illustration ready.
+      </p>
+    )
+  }
+
+  <svg viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg" class:list={['h-auto w-full drop-shadow-2xl', className]} {...props} aria-hidden="true">
+    <rect x="40" y="40" width="520" height={cardHeight} rx="12" class="fill-gray-900 stroke-gray-700" stroke-width="2"></rect>
+
+    <path d={`M100 110 V${connectorEndY}`} stroke="currentColor" stroke-width="2" stroke-dasharray="8 8" class="text-gray-600 opacity-50"></path>
+
+    <!-- Stage 1: QA -->
+    <g transform={`translate(80, ${qaY})`}>
+      <circle cx="20" cy="20" r="20" class="fill-gray-800 stroke-green-500" stroke-width="2"></circle>
+      <path d="M12 20l6 6 12-12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"></path>
+      <text x="60" y="25" class="fill-gray-300 text-sm font-bold">Internal QA</text>
+      <rect x="250" y="15" width="100" height="8" rx="4" class="fill-gray-800"></rect>
+      <rect x="250" y="15" width="100" height="8" rx="4" class="fill-green-500"></rect>
+      <text x="360" y="24" class="fill-green-500 font-mono text-xs">100%</text>
+    </g>
+
+    <!-- Stage 2: Beta -->
+    <g transform={`translate(80, ${betaY})`}>
+      <circle cx="20" cy="20" r="20" class="fill-gray-800 stroke-blue-500" stroke-width="2"></circle>
+      <path d="M12 20l6 6 12-12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="text-blue-500"></path>
+      <text x="60" y="25" class="fill-gray-300 text-sm font-bold">Beta Users</text>
+      <rect x="250" y="15" width="100" height="8" rx="4" class="fill-gray-800"></rect>
+      <rect x="250" y="15" width="100" height="8" rx="4" class="fill-blue-500"></rect>
+      <text x="360" y="24" class="fill-blue-500 font-mono text-xs">100%</text>
+    </g>
+
+    <!-- Stage 3: Production -->
+    <g transform={`translate(80, ${productionY})`}>
+      <circle cx="20" cy="20" r="20" class="rollout-prod-icon-pending fill-gray-800 stroke-amber-500" stroke-width="2"></circle>
+      <circle cx="20" cy="20" r="8" class="rollout-prod-pulse fill-amber-500"></circle>
+      <g class="rollout-prod-icon-done" opacity="0">
+        <circle cx="20" cy="20" r="20" class="fill-gray-800 stroke-green-500" stroke-width="2"></circle>
+        <path d="M12 20l6 6 12-12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"></path>
+      </g>
+      <text x="60" y="25" class="fill-white text-sm font-bold">Production</text>
+      <rect x="250" y="15" width="100" height="8" rx="4" class="fill-gray-800"></rect>
+      <rect x="250" y="15" height="8" rx="4" class="rollout-prod-bar fill-amber-500" style={animated ? 'width: 10px' : 'width: 25px'}></rect>
+      <text x="360" y="24" class="rollout-prod-label fill-amber-500 font-mono text-xs">{animated ? '10%' : '25%'}</text>
+    </g>
+
+    <!-- Device cohort grid -->
+    {
+      animated && (
+        <g class="rollout-device-grid" transform="translate(80, 332)">
+          {Array.from({ length: 32 }).map((_, index) => (
+            <circle
+              cx={(index % 8) * 14 + 6}
+              cy={Math.floor(index / 8) * 14 + 6}
+              r="4"
+              class="rollout-device-dot"
+              style="fill:#1f2937;stroke:#374151"
+              data-device-index={index}
+              stroke-width="1"
+            />
+          ))}
+        </g>
+      )
+    }
+
+    <!-- Health signal -->
+    {
+      animated && (
+        <g class="rollout-health" transform="translate(248, 328)" opacity="0">
+          <rect x="0" y="0" width="132" height="40" rx="8" class="fill-green-500/10 stroke-green-500/40" stroke-width="1" />
+          <circle cx="16" cy="20" r="8" class="fill-green-500/20" />
+          <path d="M12 20l3 3 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-400" />
+          <text x="32" y="18" class="fill-green-400 text-[10px] font-semibold">
+            Crash-free
+          </text>
+          <text x="32" y="31" class="fill-green-400/90 text-[10px]">
+            Ready to expand
+          </text>
+        </g>
+      )
+    }
+
+    <!-- Rollback ready badge -->
+    {
+      animated && (
+        <g class="rollout-rollback" transform="translate(408, 56)" opacity="0">
+          <rect x="0" y="0" width="108" height="26" rx="6" class="fill-blue-500/10 stroke-blue-400/30" stroke-width="1" />
+          <text x="10" y="17" class="fill-blue-300 text-[10px] font-semibold">
+            Rollback ready
+          </text>
+        </g>
+      )
+    }
+  </svg>
+</div>
+
+<style>
+  .rollout-illustration--animated .rollout-prod-bar {
+    transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  .rollout-illustration--animated .rollout-health,
+  .rollout-illustration--animated .rollout-rollback,
+  .rollout-illustration--animated .rollout-prod-icon-done {
+    transition: opacity 350ms ease;
+  }
+
+  .rollout-illustration--animated .rollout-device-dot {
+    transition:
+      fill 300ms ease,
+      stroke 300ms ease;
+  }
+
+  .rollout-illustration--animated.is-complete .rollout-prod-pulse,
+  .rollout-illustration--animated.is-complete .rollout-prod-icon-pending {
+    opacity: 0;
+  }
+
+  .rollout-illustration--animated.is-complete .rollout-prod-icon-done {
+    opacity: 1;
+  }
+
+  .rollout-illustration--animated.is-reduced .rollout-prod-bar {
+    width: 100px !important;
+    transition: none;
+  }
+
+  .rollout-illustration--animated.is-reduced .rollout-prod-label {
+    fill: #22c55e;
+  }
+
+  .rollout-illustration--animated.is-reduced .rollout-prod-label.fill-amber-500 {
+    fill: #22c55e;
+  }
+
+  .rollout-illustration--animated.is-reduced .rollout-health,
+  .rollout-illustration--animated.is-reduced .rollout-rollback,
+  .rollout-illustration--animated.is-reduced .rollout-prod-icon-done {
+    opacity: 1;
+  }
+
+  .rollout-illustration--animated.is-reduced .rollout-prod-pulse,
+  .rollout-illustration--animated.is-reduced .rollout-prod-icon-pending {
+    opacity: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .rollout-illustration--animated .rollout-prod-bar,
+    .rollout-illustration--animated .rollout-health,
+    .rollout-illustration--animated .rollout-rollback,
+    .rollout-illustration--animated .rollout-prod-icon-done,
+    .rollout-illustration--animated .rollout-device-dot {
+      transition: none;
+    }
+  }
+</style>
+
+<script>
+  const BAR_MAX = 100
+  const DOT_INACTIVE = { fill: '#1f2937', stroke: '#374151' }
+  const DOT_ACTIVE = { fill: '#f59e0b', stroke: '#fbbf24' }
+  const DOT_COMPLETE = { fill: '#22c55e', stroke: '#4ade80' }
+
+  function setDotColors(dot: SVGCircleElement, colors: { fill: string; stroke: string }) {
+    dot.style.fill = colors.fill
+    dot.style.stroke = colors.stroke
+  }
+
+  function announceStatus(root: HTMLElement, message: string) {
+    const status = root.querySelector<HTMLElement>('[data-rollout-status]')
+    if (status) status.textContent = message
+  }
+
+  function setProductionState(root: HTMLElement, percent: number) {
+    const bar = root.querySelector<SVGRectElement>('.rollout-prod-bar')
+    const label = root.querySelector<SVGElement>('.rollout-prod-label')
+    const dots = root.querySelectorAll<SVGCircleElement>('.rollout-device-dot')
+
+    if (bar) bar.style.width = `${(percent / 100) * BAR_MAX}px`
+    if (label) label.textContent = `${percent}%`
+
+    const activeCount = Math.round((percent / 100) * dots.length)
+    dots.forEach((dot, index) => {
+      setDotColors(dot, index < activeCount ? DOT_ACTIVE : DOT_INACTIVE)
+    })
+  }
+
+  function showHealth(root: HTMLElement) {
+    const health = root.querySelector<SVGElement>('.rollout-health')
+    if (health) health.setAttribute('opacity', '1')
+  }
+
+  function showRollback(root: HTMLElement) {
+    const badge = root.querySelector<SVGElement>('.rollout-rollback')
+    if (badge) badge.setAttribute('opacity', '1')
+  }
+
+  function highlightPlay(root: HTMLElement, index: number) {
+    const section = root.closest('[data-solution-app-examples]')
+    if (!section) return
+
+    section.querySelectorAll('[data-rollout-play]').forEach((item) => {
+      item.classList.remove('is-rollout-active')
+    })
+
+    const target = section.querySelector(`[data-rollout-play="${index}"]`)
+    target?.classList.add('is-rollout-active')
+  }
+
+  function finish(root: HTMLElement) {
+    root.classList.add('is-complete')
+    const label = root.querySelector<SVGElement>('.rollout-prod-label')
+    if (label) label.classList.replace('fill-amber-500', 'fill-green-500')
+
+    const bar = root.querySelector<SVGRectElement>('.rollout-prod-bar')
+    if (bar) bar.classList.replace('fill-amber-500', 'fill-green-500')
+
+    root.querySelectorAll<SVGCircleElement>('.rollout-device-dot').forEach((dot) => {
+      setDotColors(dot, DOT_COMPLETE)
+    })
+
+    showRollback(root)
+    highlightPlay(root, 2)
+    announceStatus(root, 'Production rollout complete at 100 percent. Rollback remains ready.')
+  }
+
+  function applyReducedState(root: HTMLElement) {
+    root.classList.add('is-reduced', 'is-complete')
+    setProductionState(root, 100)
+    showHealth(root)
+    showRollback(root)
+
+    const label = root.querySelector<SVGElement>('.rollout-prod-label')
+    if (label) label.classList.replace('fill-amber-500', 'fill-green-500')
+
+    const bar = root.querySelector<SVGRectElement>('.rollout-prod-bar')
+    if (bar) bar.classList.replace('fill-amber-500', 'fill-green-500')
+
+    root.querySelectorAll<SVGCircleElement>('.rollout-device-dot').forEach((dot) => {
+      setDotColors(dot, DOT_COMPLETE)
+    })
+
+    highlightPlay(root, 2)
+    announceStatus(root, 'Production rollout complete at 100 percent. Crash-free and rollback ready.')
+  }
+
+  function wait(ms: number) {
+    return new Promise((resolve) => window.setTimeout(resolve, ms))
+  }
+
+  async function playRollout(root: HTMLElement) {
+    if (root.dataset.rolloutPlayed === 'true') return
+    root.dataset.rolloutPlayed = 'true'
+
+    setProductionState(root, 10)
+    highlightPlay(root, 0)
+    announceStatus(root, 'Production rollout started at 10 percent of devices.')
+    await wait(900)
+
+    showHealth(root)
+    highlightPlay(root, 1)
+    announceStatus(root, 'Crash-free health check passed. Ready to expand rollout.')
+    await wait(1100)
+
+    setProductionState(root, 50)
+    announceStatus(root, 'Production rollout expanded to 50 percent of devices.')
+    await wait(700)
+
+    setProductionState(root, 100)
+    announceStatus(root, 'Production rollout expanded to 100 percent of devices.')
+    await wait(600)
+
+    finish(root)
+  }
+
+  function initRolloutIllustration(root: HTMLElement) {
+    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+    if (reduceMotion) {
+      applyReducedState(root)
+      return
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) return
+          observer.disconnect()
+          void playRollout(root)
+        })
+      },
+      { threshold: 0.45 },
+    )
+
+    observer.observe(root)
+  }
+
+  function bootRolloutIllustrations() {
+    document.querySelectorAll<HTMLElement>('[data-rollout-illustration="true"]').forEach((root) => {
+      if (root.dataset.rolloutInit === 'true') return
+      root.dataset.rolloutInit = 'true'
+      initRolloutIllustration(root)
+    })
+  }
+
+  bootRolloutIllustrations()
+  document.addEventListener('astro:page-load', bootRolloutIllustrations)
+</script>
diff --git a/apps/web/src/components/solutions/SolutionAppExample.astro b/apps/web/src/components/solutions/SolutionAppExample.astro
index bd85a953b..3fd2c1108 100644
--- a/apps/web/src/components/solutions/SolutionAppExample.astro
+++ b/apps/web/src/components/solutions/SolutionAppExample.astro
@@ -6,13 +6,15 @@ import { renameCat, shortNumber } from '@/services/misc'
 import { getRelativeLocaleUrl } from '@/services/links'
 import TeamAvatars from '@/components/TeamAvatars.astro'
 import HumanSupport from '@/components/HumanSupport.astro'
+import RolloutIllustration from '@/components/solutions/RolloutIllustration.astro'
 
 interface Props {
   solution: SolutionAppExampleKey
   randomize?: boolean
+  animateRollout?: boolean
 }
 
-const { solution, randomize = false } = Astro.props
+const { solution, randomize = false, animateRollout = false } = Astro.props
 const locale = Astro.locals.locale
 const example = solutionAppExamples[solution]
 const copy = (key: MessageKey, values?: MessageValues) => m[key](values, { locale })
@@ -26,6 +28,7 @@ const categories = [...new Set(appExamples.map(({ app }) => renameCat(app.catego
 const registerUrl = getRelativeLocaleUrl(locale, 'register')
 const talkToTeamUrl = 'https://book.capgo.app/enterprise-inquiry/'
 const showExampleCtas = solution === 'enterprise'
+const showRolloutIllustration = animateRollout || solution === 'production-updates'
 ---
 
 {
@@ -146,9 +149,18 @@ const showExampleCtas = solution === 'enterprise'
               <h3 class="mt-3 text-2xl leading-8 font-semibold tracking-tight text-balance text-white">{copy('solution_app_examples_cta_title')}</h3>
               <p class="mt-4 text-base leading-7 text-pretty text-gray-400">{copy('solution_app_examples_cta_text')}</p>
 
+              {showRolloutIllustration && (
+                <div class="solution-app-examples-rollout mt-6 overflow-hidden rounded-lg border border-white/10 bg-[#111]/80 p-2 sm:p-3">
+                  <RolloutIllustration animated={animateRollout} class="text-amber-500" />
+                </div>
+              )}
+
               <div class="solution-app-examples-plays mt-6 space-y-3 border-y border-white/10 py-5">
-                {plays.map((play) => (
-                  <div class="grid grid-cols-[auto_1fr] gap-3 text-sm leading-6 text-gray-300">
+                {plays.map((play, index) => (
+                  <div
+                    class="solution-app-examples-play grid grid-cols-[auto_minmax(0,1fr)] gap-3 rounded-md px-1 text-sm leading-6 text-gray-300 transition-colors duration-300"
+                    data-rollout-play={animateRollout ? index : undefined}
+                  >
                     <span class="mt-1 flex h-5 w-5 items-center justify-center rounded-full bg-blue-500/15 text-blue-300 ring-1 ring-blue-400/25">
                       <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                         <path
@@ -158,7 +170,7 @@ const showExampleCtas = solution === 'enterprise'
                         />
                       </svg>
                     </span>
-                    <span>{play}</span>
+                    <span class="min-w-0 text-pretty break-words">{play}</span>
                   </div>
                 ))}
               </div>
@@ -197,3 +209,22 @@ const showExampleCtas = solution === 'enterprise'
     list.removeAttribute('aria-busy')
   }
 </script>
+
+<style>
+  .solution-app-examples-play.is-rollout-active {
+    background: rgb(59 130 246 / 0.08);
+    color: rgb(226 232 240);
+  }
+
+  .solution-app-examples-play.is-rollout-active span:first-child {
+    background: rgb(59 130 246 / 0.28);
+    color: rgb(191 219 254);
+    box-shadow: 0 0 0 1px rgb(96 165 250 / 0.45);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .solution-app-examples-play {
+      transition: none;
+    }
+  }
+</style>
diff --git a/apps/web/src/pages/index.astro b/apps/web/src/pages/index.astro
index adf621ebf..ef8902348 100644
--- a/apps/web/src/pages/index.astro
+++ b/apps/web/src/pages/index.astro
@@ -95,7 +95,7 @@ const content = {
     <!-- <CompaniesLogo /> -->
     <ProblemSolution />
     <HowItWorks />
-    <SolutionAppExample solution="production-updates" randomize />
+    <SolutionAppExample solution="production-updates" randomize animateRollout />
     <MonitoringFeatures />
     <ReleaseIntelligence />
     <DeviceLogs />