diff --git a/public/js/demos/commands/overdrive.js b/public/js/demos/commands/overdrive.js
index 315b397d8..04ced5a61 100644
--- a/public/js/demos/commands/overdrive.js
+++ b/public/js/demos/commands/overdrive.js
@@ -1,51 +1,33 @@
-// Overdrive command demo - shows a static list becoming a morphing shared-element transition
+// Overdrive command demo - shows standard rectangular layout vs organic, non-standard composition
 export default {
   id: 'overdrive',
-  caption: 'Static list with page jump → Shared element morph transition',
+  caption: 'Standard rectangular layout → Organic, technically ambitious composition',
 
   before: `
-    <div style="width: 100%; max-width: 240px; padding: 16px; font-family: system-ui, sans-serif;">
-      <div style="font-size: 11px; color: #999; margin-bottom: 10px;">PROJECTS</div>
-      <div style="display: flex; flex-direction: column; gap: 8px;">
-        <div style="padding: 10px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 4px; display: flex; align-items: center; gap: 10px;">
-          <div style="width: 28px; height: 28px; background: #e0e0e0; border-radius: 4px;"></div>
-          <div>
-            <div style="font-size: 12px; color: #333; font-weight: 500;">Redesign</div>
-            <div style="font-size: 11px; color: #999;">3 tasks</div>
-          </div>
-        </div>
-        <div style="padding: 10px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 4px; display: flex; align-items: center; gap: 10px;">
-          <div style="width: 28px; height: 28px; background: #e0e0e0; border-radius: 4px;"></div>
-          <div>
-            <div style="font-size: 12px; color: #333; font-weight: 500;">Launch</div>
-            <div style="font-size: 11px; color: #999;">7 tasks</div>
-          </div>
-        </div>
+    <div style="width: 100%; max-width: 240px; padding: 20px 16px; text-align: center; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px;">
+      <div style="width: 48px; height: 48px; background: #ddd; border-radius: 50%; margin: 0 auto 12px;"></div>
+      <div style="font-size: 14px; font-weight: 600; color: #333; margin-bottom: 4px;">Sarah Chen</div>
+      <div style="font-size: 12px; color: #888; margin-bottom: 16px;">Design Lead</div>
+      <div style="display: flex; justify-content: center; gap: 24px; padding-top: 12px; border-top: 1px solid #e0e0e0;">
+        <div style="text-align: center;"><div style="font-size: 14px; font-weight: 600; color: #333;">142</div><div style="font-size: 10px; color: #999;">Projects</div></div>
+        <div style="text-align: center;"><div style="font-size: 14px; font-weight: 600; color: #333;">38</div><div style="font-size: 10px; color: #999;">Reviews</div></div>
       </div>
     </div>
   `,
 
   after: `
-    <div style="width: 100%; max-width: 240px; padding: 16px; font-family: 'Instrument Sans', sans-serif;">
-      <div style="font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--color-ash); margin-bottom: 10px;">PROJECTS</div>
-      <div style="display: flex; flex-direction: column; gap: 6px;">
-        <div style="padding: 10px; background: color-mix(in oklch, var(--color-accent) 6%, var(--color-paper)); border: 1px solid color-mix(in oklch, var(--color-accent) 15%, var(--color-paper)); border-radius: 6px; display: flex; align-items: center; gap: 10px; view-transition-name: project-card;">
-          <div style="width: 28px; height: 28px; background: var(--color-accent); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; font-weight: 600;">R</div>
-          <div style="flex: 1;">
-            <div style="font-size: 0.8125rem; color: var(--color-ink); font-weight: 500;">Redesign</div>
-            <div style="font-size: 0.6875rem; color: var(--color-ash);">3 tasks</div>
-          </div>
-          <div style="font-size: 0.5625rem; padding: 2px 6px; background: color-mix(in oklch, var(--color-accent) 12%, transparent); color: var(--color-accent); border-radius: 3px; font-weight: 500;">Active</div>
-        </div>
-        <div style="padding: 10px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px; display: flex; align-items: center; gap: 10px;">
-          <div style="width: 28px; height: 28px; background: var(--color-mist); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--color-ash); font-size: 10px; font-weight: 600;">L</div>
-          <div style="flex: 1;">
-            <div style="font-size: 0.8125rem; color: var(--color-ink); font-weight: 500;">Launch</div>
-            <div style="font-size: 0.6875rem; color: var(--color-ash);">7 tasks</div>
-          </div>
+    <div style="width: 100%; max-width: 240px; padding: 20px 16px; position: relative; overflow: hidden; background: var(--color-paper); border-radius: 24px 24px 8px 8px;">
+      <div style="position: absolute; top: -30px; right: -20px; width: 100px; height: 100px; background: color-mix(in oklch, var(--color-accent) 10%, transparent); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; filter: blur(1px);"></div>
+      <div style="position: absolute; bottom: -15px; left: -10px; width: 70px; height: 70px; background: color-mix(in oklch, var(--color-accent) 6%, transparent); border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;"></div>
+      <div style="position: relative; z-index: 1;">
+        <div style="width: 48px; height: 48px; background: var(--color-accent); border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 15px; font-weight: 600; font-family: 'Cormorant Garamond', serif;">SC</div>
+        <div style="font-size: 0.9375rem; font-weight: 600; color: var(--color-ink); margin-bottom: 2px; font-family: 'Cormorant Garamond', serif;">Sarah Chen</div>
+        <div style="font-size: 0.6875rem; color: var(--color-ash); margin-bottom: 16px; letter-spacing: 0.04em; font-family: 'Instrument Sans', sans-serif;">Design Lead</div>
+        <div style="display: flex; justify-content: center; gap: 20px; padding-top: 12px; border-top: 1px solid var(--color-mist);">
+          <div style="text-align: center;"><div style="font-size: 0.875rem; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums;">142</div><div style="font-size: 0.5625rem; color: var(--color-ash); letter-spacing: 0.06em;">Projects</div></div>
+          <div style="text-align: center;"><div style="font-size: 0.875rem; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums;">38</div><div style="font-size: 0.5625rem; color: var(--color-ash); letter-spacing: 0.06em;">Reviews</div></div>
         </div>
       </div>
-      <div style="margin-top: 8px; font-size: 0.625rem; color: var(--color-ash); font-style: italic;">view-transition-name on cards for shared element morphing</div>
     </div>
   `
 };