diff --git a/compiler/apps/playground/components/Editor/EditorImpl.tsx b/compiler/apps/playground/components/Editor/EditorImpl.tsx
index 9f000f85564a2..e7068534cd0cb 100644
--- a/compiler/apps/playground/components/Editor/EditorImpl.tsx
+++ b/compiler/apps/playground/components/Editor/EditorImpl.tsx
@@ -24,7 +24,11 @@ import BabelPluginReactCompiler, {
   printFunctionWithOutlined,
   type LoggerEvent,
 } from 'babel-plugin-react-compiler';
-import {useDeferredValue, useMemo} from 'react';
+import {
+  useDeferredValue,
+  useMemo,
+  unstable_ViewTransition as ViewTransition,
+} from 'react';
 import {useStore} from '../StoreContext';
 import ConfigEditor from './ConfigEditor';
 import Input from './Input';
diff --git a/compiler/apps/playground/components/TabbedWindow.tsx b/compiler/apps/playground/components/TabbedWindow.tsx
index 1fd5f188c7de1..c324e3ce4505a 100644
--- a/compiler/apps/playground/components/TabbedWindow.tsx
+++ b/compiler/apps/playground/components/TabbedWindow.tsx
@@ -4,8 +4,14 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, {
+  startTransition,
+  useId,
+  unstable_ViewTransition as ViewTransition,
+  unstable_addTransitionType as addTransitionType,
+} from 'react';
 import clsx from 'clsx';
+import {TOGGLE_TAB_TRANSITION} from '../lib/transitionTypes';
 
 export default function TabbedWindow({
   tabs,
@@ -16,6 +22,16 @@ export default function TabbedWindow({
   activeTab: string;
   onTabChange: (tab: string) => void;
 }): React.ReactElement {
+  const id = useId();
+  const transitionName = `tab-highlight-${id}`;
+
+  const handleTabChange = (tab: string): void => {
+    startTransition(() => {
+      addTransitionType(TOGGLE_TAB_TRANSITION);
+      onTabChange(tab);
+    });
+  };
+
   return (
     <div className="flex-1 min-w-[550px] sm:min-w-0">
       <div className="flex flex-col h-full max-w-full">
@@ -25,13 +41,29 @@ export default function TabbedWindow({
             return (
               <button
                 key={tab}
-                onClick={() => onTabChange(tab)}
+                onClick={() => handleTabChange(tab)}
                 className={clsx(
-                  'active:scale-95 transition-transform py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full text-sm',
-                  !isActive && 'hover:bg-primary/5',
-                  isActive && 'bg-highlight text-link',
+                  'transition-transform py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full text-sm relative',
+                  isActive ? 'text-link' : 'hover:bg-primary/5',
                 )}>
-                {tab}
+                {isActive && (
+                  <ViewTransition
+                    name={transitionName}
+                    share={{
+                      [TOGGLE_TAB_TRANSITION]: 'tab-highlight',
+                      default: 'none',
+                    }}
+                    update={{default: 'none'}}>
+                    <div className="absolute inset-0 bg-highlight rounded-full" />
+                  </ViewTransition>
+                )}
+                <ViewTransition
+                  update={{
+                    [TOGGLE_TAB_TRANSITION]: 'tab-text',
+                    default: 'none',
+                  }}>
+                  <span className="relative z-1">{tab}</span>
+                </ViewTransition>
               </button>
             );
           })}
diff --git a/compiler/apps/playground/lib/transitionTypes.ts b/compiler/apps/playground/lib/transitionTypes.ts
index 0c39e586fed54..0233a7a4923ab 100644
--- a/compiler/apps/playground/lib/transitionTypes.ts
+++ b/compiler/apps/playground/lib/transitionTypes.ts
@@ -6,3 +6,4 @@
  */
 
 export const CONFIG_PANEL_TRANSITION = 'config-panel';
+export const TOGGLE_TAB_TRANSITION = 'toggle-tab';
diff --git a/compiler/apps/playground/styles/globals.css b/compiler/apps/playground/styles/globals.css
index e8b92e6c7be48..c85951ea15276 100644
--- a/compiler/apps/playground/styles/globals.css
+++ b/compiler/apps/playground/styles/globals.css
@@ -108,3 +108,11 @@
   object-fit: none;
   object-position: left;
 }
+
+::view-transition-old(.tab-highlight),
+::view-transition-new(.tab-highlight) {
+  height: 100%;
+}
+::view-transition-group(.tab-text) {
+	z-index: 1;
+}