diff --git a/compiler/apps/playground/__tests__/e2e/page.spec.ts b/compiler/apps/playground/__tests__/e2e/page.spec.ts
index 4a10e8603bb28..94abe40eeb864 100644
--- a/compiler/apps/playground/__tests__/e2e/page.spec.ts
+++ b/compiler/apps/playground/__tests__/e2e/page.spec.ts
@@ -23,7 +23,8 @@ function formatPrint(data: Array<string>): Promise<string> {
 
 async function expandConfigs(page: Page): Promise<void> {
   const expandButton = page.locator('[title="Expand config editor"]');
-  expandButton.click();
+  await expandButton.click();
+  await page.waitForSelector('.monaco-editor-config', {state: 'visible'});
 }
 
 const TEST_SOURCE = `export default function TestComponent({ x }) {
diff --git a/compiler/apps/playground/components/AccordionWindow.tsx b/compiler/apps/playground/components/AccordionWindow.tsx
index bebbb0c4787a5..197f543b4ab4a 100644
--- a/compiler/apps/playground/components/AccordionWindow.tsx
+++ b/compiler/apps/playground/components/AccordionWindow.tsx
@@ -18,19 +18,21 @@ export default function AccordionWindow(props: {
   changedPasses: Set<string>;
 }): React.ReactElement {
   return (
-    <div className="flex flex-row h-full">
-      {Array.from(props.tabs.keys()).map(name => {
-        return (
-          <AccordionWindowItem
-            name={name}
-            key={name}
-            tabs={props.tabs}
-            tabsOpen={props.tabsOpen}
-            setTabsOpen={props.setTabsOpen}
-            hasChanged={props.changedPasses.has(name)}
-          />
-        );
-      })}
+    <div className="flex-1 min-w-[550px] sm:min-w-0">
+      <div className="flex flex-row h-full">
+        {Array.from(props.tabs.keys()).map(name => {
+          return (
+            <AccordionWindowItem
+              name={name}
+              key={name}
+              tabs={props.tabs}
+              tabsOpen={props.tabsOpen}
+              setTabsOpen={props.setTabsOpen}
+              hasChanged={props.changedPasses.has(name)}
+            />
+          );
+        })}
+      </div>
     </div>
   );
 }
diff --git a/compiler/apps/playground/components/Editor/ConfigEditor.tsx b/compiler/apps/playground/components/Editor/ConfigEditor.tsx
index c70cd10ba53e8..d922f27c97864 100644
--- a/compiler/apps/playground/components/Editor/ConfigEditor.tsx
+++ b/compiler/apps/playground/components/Editor/ConfigEditor.tsx
@@ -9,12 +9,19 @@ import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
 import {PluginOptions} from 'babel-plugin-react-compiler';
 import type {editor} from 'monaco-editor';
 import * as monaco from 'monaco-editor';
-import React, {useState, useRef} from 'react';
+import React, {
+  useState,
+  useRef,
+  unstable_ViewTransition as ViewTransition,
+  unstable_addTransitionType as addTransitionType,
+  startTransition,
+} from 'react';
 import {Resizable} from 're-resizable';
 import {useStore, useStoreDispatch} from '../StoreContext';
 import {monacoOptions} from './monacoOptions';
 import {IconChevron} from '../Icons/IconChevron';
 import prettyFormat from 'pretty-format';
+import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes';
 
 // @ts-expect-error - webpack asset/source loader handles .d.ts files as strings
 import compilerTypeDefs from 'babel-plugin-react-compiler/dist/index.d.ts';
@@ -36,7 +43,12 @@ export default function ConfigEditor({
           display: isExpanded ? 'block' : 'none',
         }}>
         <ExpandedEditor
-          onToggle={setIsExpanded}
+          onToggle={() => {
+            startTransition(() => {
+              addTransitionType(CONFIG_PANEL_TRANSITION);
+              setIsExpanded(false);
+            });
+          }}
           appliedOptions={appliedOptions}
         />
       </div>
@@ -44,7 +56,14 @@ export default function ConfigEditor({
         style={{
           display: !isExpanded ? 'block' : 'none',
         }}>
-        <CollapsedEditor onToggle={setIsExpanded} />
+        <CollapsedEditor
+          onToggle={() => {
+            startTransition(() => {
+              addTransitionType(CONFIG_PANEL_TRANSITION);
+              setIsExpanded(true);
+            });
+          }}
+        />
       </div>
     </>
   );
@@ -54,7 +73,7 @@ function ExpandedEditor({
   onToggle,
   appliedOptions,
 }: {
-  onToggle: (expanded: boolean) => void;
+  onToggle: () => void;
   appliedOptions: PluginOptions | null;
 }): React.ReactElement {
   const store = useStore();
@@ -111,90 +130,93 @@ function ExpandedEditor({
     : 'Invalid configs';
 
   return (
-    <Resizable
-      minWidth={300}
-      maxWidth={600}
-      defaultSize={{width: 350}}
-      enable={{right: true, bottom: false}}>
-      <div className="bg-blue-10 relative h-full flex flex-col !h-[calc(100vh_-_3.5rem)] border border-gray-300">
-        <div
-          className="absolute w-8 h-16 bg-blue-10 rounded-r-full flex items-center justify-center z-[2] cursor-pointer border border-l-0 border-gray-300"
-          title="Minimize config editor"
-          onClick={() => onToggle(false)}
-          style={{
-            top: '50%',
-            marginTop: '-32px',
-            right: '-32px',
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0,
-          }}>
-          <IconChevron displayDirection="left" className="text-blue-50" />
-        </div>
-
-        <div className="flex-1 flex flex-col m-2 mb-2">
-          <div className="pb-2">
-            <h2 className="inline-block text-blue-50 py-1.5 px-1.5 xs:px-3 sm:px-4 text-sm">
-              Config Overrides
-            </h2>
-          </div>
-          <div className="flex-1 rounded-lg overflow-hidden border border-gray-300">
-            <MonacoEditor
-              path={'config.ts'}
-              language={'typescript'}
-              value={store.config}
-              onMount={handleMount}
-              onChange={handleChange}
-              loading={''}
-              className="monaco-editor-config"
-              options={{
-                ...monacoOptions,
-                lineNumbers: 'off',
-                renderLineHighlight: 'none',
-                overviewRulerBorder: false,
-                overviewRulerLanes: 0,
-                fontSize: 12,
-                scrollBeyondLastLine: false,
-                glyphMargin: false,
-              }}
-            />
+    <ViewTransition
+      update={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}}>
+      <Resizable
+        minWidth={300}
+        maxWidth={600}
+        defaultSize={{width: 350}}
+        enable={{right: true, bottom: false}}>
+        <div className="bg-blue-10 relative h-full flex flex-col !h-[calc(100vh_-_3.5rem)] border border-gray-300">
+          <div
+            className="absolute w-8 h-16 bg-blue-10 rounded-r-full flex items-center justify-center z-[2] cursor-pointer border border-l-0 border-gray-300"
+            title="Minimize config editor"
+            onClick={onToggle}
+            style={{
+              top: '50%',
+              marginTop: '-32px',
+              right: '-32px',
+              borderTopLeftRadius: 0,
+              borderBottomLeftRadius: 0,
+            }}>
+            <IconChevron displayDirection="left" className="text-blue-50" />
           </div>
-        </div>
-        <div className="flex-1 flex flex-col m-2">
-          <div className="pb-2">
-            <h2 className="inline-block text-blue-50 py-1.5 px-1.5 xs:px-3 sm:px-4 text-sm">
-              Applied Configs
-            </h2>
+
+          <div className="flex-1 flex flex-col m-2 mb-2">
+            <div className="pb-2">
+              <h2 className="inline-block text-blue-50 py-1.5 px-1.5 xs:px-3 sm:px-4 text-sm">
+                Config Overrides
+              </h2>
+            </div>
+            <div className="flex-1 rounded-lg overflow-hidden border border-gray-300">
+              <MonacoEditor
+                path={'config.ts'}
+                language={'typescript'}
+                value={store.config}
+                onMount={handleMount}
+                onChange={handleChange}
+                loading={''}
+                className="monaco-editor-config"
+                options={{
+                  ...monacoOptions,
+                  lineNumbers: 'off',
+                  renderLineHighlight: 'none',
+                  overviewRulerBorder: false,
+                  overviewRulerLanes: 0,
+                  fontSize: 12,
+                  scrollBeyondLastLine: false,
+                  glyphMargin: false,
+                }}
+              />
+            </div>
           </div>
-          <div className="flex-1 rounded-lg overflow-hidden border border-gray-300">
-            <MonacoEditor
-              path={'applied-config.js'}
-              language={'javascript'}
-              value={formattedAppliedOptions}
-              loading={''}
-              className="monaco-editor-applied-config"
-              options={{
-                ...monacoOptions,
-                lineNumbers: 'off',
-                renderLineHighlight: 'none',
-                overviewRulerBorder: false,
-                overviewRulerLanes: 0,
-                fontSize: 12,
-                scrollBeyondLastLine: false,
-                readOnly: true,
-                glyphMargin: false,
-              }}
-            />
+          <div className="flex-1 flex flex-col m-2">
+            <div className="pb-2">
+              <h2 className="inline-block text-blue-50 py-1.5 px-1.5 xs:px-3 sm:px-4 text-sm">
+                Applied Configs
+              </h2>
+            </div>
+            <div className="flex-1 rounded-lg overflow-hidden border border-gray-300">
+              <MonacoEditor
+                path={'applied-config.js'}
+                language={'javascript'}
+                value={formattedAppliedOptions}
+                loading={''}
+                className="monaco-editor-applied-config"
+                options={{
+                  ...monacoOptions,
+                  lineNumbers: 'off',
+                  renderLineHighlight: 'none',
+                  overviewRulerBorder: false,
+                  overviewRulerLanes: 0,
+                  fontSize: 12,
+                  scrollBeyondLastLine: false,
+                  readOnly: true,
+                  glyphMargin: false,
+                }}
+              />
+            </div>
           </div>
         </div>
-      </div>
-    </Resizable>
+      </Resizable>
+    </ViewTransition>
   );
 }
 
 function CollapsedEditor({
   onToggle,
 }: {
-  onToggle: (expanded: boolean) => void;
+  onToggle: () => void;
 }): React.ReactElement {
   return (
     <div
@@ -203,7 +225,7 @@ function CollapsedEditor({
       <div
         className="absolute w-10 h-16 bg-blue-10 hover:translate-x-2 transition-transform rounded-r-full flex items-center justify-center z-[2] cursor-pointer border border-gray-300"
         title="Expand config editor"
-        onClick={() => onToggle(true)}
+        onClick={onToggle}
         style={{
           top: '50%',
           marginTop: '-32px',
diff --git a/compiler/apps/playground/components/Editor/EditorImpl.tsx b/compiler/apps/playground/components/Editor/EditorImpl.tsx
index 696bbd2559c11..9f000f85564a2 100644
--- a/compiler/apps/playground/components/Editor/EditorImpl.tsx
+++ b/compiler/apps/playground/components/Editor/EditorImpl.tsx
@@ -343,12 +343,8 @@ export default function Editor(): JSX.Element {
           <ConfigEditor appliedOptions={appliedOptions} />
         </div>
         <div className="flex flex-1 min-w-0">
-          <div className="flex-1 min-w-[550px] sm:min-w-0">
-            <Input language={language} errors={errors} />
-          </div>
-          <div className="flex-1 min-w-[550px] sm:min-w-0">
-            <Output store={deferredStore} compilerOutput={mergedOutput} />
-          </div>
+          <Input language={language} errors={errors} />
+          <Output store={deferredStore} compilerOutput={mergedOutput} />
         </div>
       </div>
     </>
diff --git a/compiler/apps/playground/components/Editor/Input.tsx b/compiler/apps/playground/components/Editor/Input.tsx
index 6cded7656b06f..8c37b12975b8b 100644
--- a/compiler/apps/playground/components/Editor/Input.tsx
+++ b/compiler/apps/playground/components/Editor/Input.tsx
@@ -13,11 +13,17 @@ import {
 import invariant from 'invariant';
 import type {editor} from 'monaco-editor';
 import * as monaco from 'monaco-editor';
-import {useEffect, useState} from 'react';
+import {
+  useEffect,
+  useState,
+  unstable_ViewTransition as ViewTransition,
+} from 'react';
 import {renderReactCompilerMarkers} from '../../lib/reactCompilerMonacoDiagnostics';
 import {useStore, useStoreDispatch} from '../StoreContext';
 import TabbedWindow from '../TabbedWindow';
 import {monacoOptions} from './monacoOptions';
+import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes';
+
 // @ts-expect-error TODO: Make TS recognize .d.ts files, in addition to loading them with webpack.
 import React$Types from '../../node_modules/@types/react/index.d.ts';
 
@@ -155,9 +161,13 @@ export default function Input({errors, language}: Props): JSX.Element {
   const [activeTab, setActiveTab] = useState('Input');
 
   return (
-    <div className="relative flex flex-col flex-none border-r border-gray-200">
-      <div className="!h-[calc(100vh_-_3.5rem)]">
-        <div className="flex flex-col h-full">
+    <ViewTransition
+      update={{
+        [CONFIG_PANEL_TRANSITION]: 'container',
+        default: 'none',
+      }}>
+      <div className="flex-1 min-w-[550px] sm:min-w-0">
+        <div className="flex flex-col h-full !h-[calc(100vh_-_3.5rem)] border-r border-gray-200">
           <TabbedWindow
             tabs={tabs}
             activeTab={activeTab}
@@ -165,6 +175,6 @@ export default function Input({errors, language}: Props): JSX.Element {
           />
         </div>
       </div>
-    </div>
+    </ViewTransition>
   );
 }
diff --git a/compiler/apps/playground/components/Editor/Output.tsx b/compiler/apps/playground/components/Editor/Output.tsx
index dcc8dea5c83bf..0ccc0747a6931 100644
--- a/compiler/apps/playground/components/Editor/Output.tsx
+++ b/compiler/apps/playground/components/Editor/Output.tsx
@@ -20,11 +20,19 @@ import parserBabel from 'prettier/plugins/babel';
 import * as prettierPluginEstree from 'prettier/plugins/estree';
 import * as prettier from 'prettier/standalone';
 import {type Store} from '../../lib/stores';
-import {memo, ReactNode, use, useState, Suspense} from 'react';
+import {
+  memo,
+  ReactNode,
+  use,
+  useState,
+  Suspense,
+  unstable_ViewTransition as ViewTransition,
+} from 'react';
 import AccordionWindow from '../AccordionWindow';
 import TabbedWindow from '../TabbedWindow';
 import {monacoOptions} from './monacoOptions';
 import {BabelFileResult} from '@babel/core';
+import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes';
 import {LRUCache} from 'lru-cache';
 
 const MemoizedOutput = memo(Output);
@@ -280,22 +288,34 @@ function OutputContent({store, compilerOutput}: Props): JSX.Element {
 
   if (!store.showInternals) {
     return (
-      <TabbedWindow
-        tabs={tabs}
-        activeTab={activeTab}
-        onTabChange={setActiveTab}
-      />
+      <ViewTransition
+        update={{
+          [CONFIG_PANEL_TRANSITION]: 'container',
+          default: 'none',
+        }}>
+        <TabbedWindow
+          tabs={tabs}
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+        />
+      </ViewTransition>
     );
   }
 
   return (
-    <AccordionWindow
-      defaultTab={store.showInternals ? 'HIR' : 'Output'}
-      setTabsOpen={setTabsOpen}
-      tabsOpen={tabsOpen}
-      tabs={tabs}
-      changedPasses={changedPasses}
-    />
+    <ViewTransition
+      update={{
+        [CONFIG_PANEL_TRANSITION]: 'accordion-container',
+        default: 'none',
+      }}>
+      <AccordionWindow
+        defaultTab={store.showInternals ? 'HIR' : 'Output'}
+        setTabsOpen={setTabsOpen}
+        tabsOpen={tabsOpen}
+        tabs={tabs}
+        changedPasses={changedPasses}
+      />
+    </ViewTransition>
   );
 }
 
diff --git a/compiler/apps/playground/components/TabbedWindow.tsx b/compiler/apps/playground/components/TabbedWindow.tsx
index d2335687c2206..1fd5f188c7de1 100644
--- a/compiler/apps/playground/components/TabbedWindow.tsx
+++ b/compiler/apps/playground/components/TabbedWindow.tsx
@@ -17,26 +17,28 @@ export default function TabbedWindow({
   onTabChange: (tab: string) => void;
 }): React.ReactElement {
   return (
-    <div className="flex flex-col h-full max-w-full">
-      <div className="flex p-2 flex-shrink-0">
-        {Array.from(tabs.keys()).map(tab => {
-          const isActive = activeTab === tab;
-          return (
-            <button
-              key={tab}
-              onClick={() => onTabChange(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',
-              )}>
-              {tab}
-            </button>
-          );
-        })}
-      </div>
-      <div className="flex-1 overflow-hidden w-full h-full">
-        {tabs.get(activeTab)}
+    <div className="flex-1 min-w-[550px] sm:min-w-0">
+      <div className="flex flex-col h-full max-w-full">
+        <div className="flex p-2 flex-shrink-0">
+          {Array.from(tabs.keys()).map(tab => {
+            const isActive = activeTab === tab;
+            return (
+              <button
+                key={tab}
+                onClick={() => onTabChange(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',
+                )}>
+                {tab}
+              </button>
+            );
+          })}
+        </div>
+        <div className="flex-1 overflow-hidden w-full h-full">
+          {tabs.get(activeTab)}
+        </div>
       </div>
     </div>
   );
diff --git a/compiler/apps/playground/lib/transitionTypes.ts b/compiler/apps/playground/lib/transitionTypes.ts
new file mode 100644
index 0000000000000..0c39e586fed54
--- /dev/null
+++ b/compiler/apps/playground/lib/transitionTypes.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export const CONFIG_PANEL_TRANSITION = 'config-panel';
diff --git a/compiler/apps/playground/next.config.js b/compiler/apps/playground/next.config.js
index fc8a9492e4ed7..f34f958ec6d2d 100644
--- a/compiler/apps/playground/next.config.js
+++ b/compiler/apps/playground/next.config.js
@@ -11,6 +11,7 @@ const path = require('path');
 const nextConfig = {
   experimental: {
     reactCompiler: true,
+    viewTransition: true,
   },
   reactStrictMode: true,
   webpack: (config, options) => {
diff --git a/compiler/apps/playground/styles/globals.css b/compiler/apps/playground/styles/globals.css
index c4558eb8b8a91..e8b92e6c7be48 100644
--- a/compiler/apps/playground/styles/globals.css
+++ b/compiler/apps/playground/styles/globals.css
@@ -69,3 +69,42 @@
     scrollbar-width: none; /* Firefox */
   }
 }
+
+::view-transition-old(.slide-in) {
+  animation-name: slideOutLeft;
+}
+::view-transition-new(.slide-in) {
+  animation-name: slideInLeft;
+}
+::view-transition-group(.slide-in) {
+  z-index: 1;
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+::view-transition-old(.container),
+::view-transition-new(.container) {
+  height: 100%;
+}
+
+::view-transition-old(.accordion-container),
+::view-transition-new(.accordion-container) {
+  height: 100%;
+  object-fit: none;
+  object-position: left;
+}