diff --git a/docs/data/base/components/transitions/AllTransitionsDemo.js b/docs/data/base/components/transitions/AllTransitionsDemo.js
deleted file mode 100644
index 67290e1288843e..00000000000000
--- a/docs/data/base/components/transitions/AllTransitionsDemo.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/system';
-import { Unstable_Popup as PopupBase } from '@mui/base/Unstable_Popup';
-import { Button as ButtonBase } from '@mui/base/Button';
-import { CssAnimation, CssTransition } from '@mui/base/Transitions';
-
-const styles = `
-  @keyframes open-animation {
-    0% {
-      opacity: 0;
-      transform: translateY(-8px) scale(0.95);
-    }
-
-    50% {
-      opacity: 1;
-      transform: translateY(4px) scale(1.05);
-    }
-
-    100% {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-
-  @keyframes close-animation {
-    0% {
-      opacity: 1;
-      transform: scale(1) rotate(0deg);
-      filter: blur(0);
-    }
-
-    100% {
-      opacity: 0;
-      transform: scale(1.5) rotate(8deg);
-      filter: blur(4px);
-    }
-  }
-
-  .anim-open {
-    animation: open-animation 1s ease-out both;
-  }
-
-  .anim-close {
-    animation: close-animation 1s ease-out forwards;
-  }
-
-  .open {
-    opacity: 1;
-    transform: translateY(0) scale(1)
-    filter: blur(0);
-    transition: transform 0.2s cubic-bezier(0.345, 0.275, 0.505, 1.625), opacity 0.2s ease-out;
-  }
-
-  .close {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.95);
-    filter: blur(3px);
-    transition: transform 0.4s ease-out, opacity 0.4s ease-out, filter 0.2s ease-out;
-  }
-`;
-
-const grey = {
-  200: '#DAE2ED',
-  700: '#434D5B',
-  900: '#1C2025',
-};
-
-const blue = {
-  200: '#99CCFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0066CC',
-};
-
-const Button = styled(ButtonBase)(
-  ({ theme }) => `
-  min-width: 175px;
-  font-family: 'IBM Plex Sans', sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  background-color: ${blue[500]};
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: background-color, box-shadow, 120ms ease;
-  cursor: pointer;
-  border: 1px solid ${blue[500]};
-  box-shadow: 0 1px 1px ${
-    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.1)'
-  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
-
-  &:hover {
-    background-color: ${blue[600]};
-  }
-
-  &:active {
-    background-color: ${blue[700]};
-    box-shadow: none;
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
-    outline: none;
-  }
-`,
-);
-
-const Popup = styled(PopupBase)`
-  width: max-content;
-`;
-
-const PopupBody = styled('div')(
-  ({ theme }) => `
-  width: max-content;
-  padding: 12px 16px;
-  margin: 8px;
-  border-radius: 8px;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  box-shadow: ${
-    theme.palette.mode === 'dark'
-      ? `0px 4px 8px rgb(0 0 0 / 0.7)`
-      : `0px 4px 8px rgb(0 0 0 / 0.1)`
-  };
-  font-family: 'IBM Plex Sans', sans-serif;
-  font-size: 0.875rem;
-  z-index: 1;
-`,
-);
-
-const Section = styled('div')`
-  display: flex;
-  gap: 12px;
-  padding: 8px;
-
-  @media (max-width: 700px) {
-    flex-direction: column;
-  }
-`;
-
-export default function AllTransitionsDemo() {
-  return (
-    <div>
-      <style>{styles}</style>
-      <Section>
-        <PopupWithTrigger>
-          <CssTransition
-            enterClassName="open"
-            exitClassName="close"
-            lastTransitionedPropertyOnExit="transform"
-          >
-            <PopupBody>Animated with the CSS Transition component.</PopupBody>
-          </CssTransition>
-        </PopupWithTrigger>
-        <PopupWithTrigger2>
-          <CssAnimation
-            enterClassName="anim-open"
-            exitClassName="anim-close"
-            enterAnimationName="open-animation"
-            exitAnimationName="close-animation"
-          >
-            <PopupBody>Animated with the CSS Animation component.</PopupBody>
-          </CssAnimation>
-        </PopupWithTrigger2>
-      </Section>
-    </div>
-  );
-}
-
-function PopupWithTrigger(props) {
-  const [anchor, setAnchor] = React.useState(null);
-  const [open, setOpen] = React.useState(false);
-
-  const { children, ...other } = props;
-
-  return (
-    <React.Fragment>
-      <Button ref={setAnchor} onClick={() => setOpen((o) => !o)}>
-        {open ? 'Hide popup' : 'Open CSS Transition'}
-      </Button>
-      <Popup anchor={anchor} open={open} {...other}>
-        {children}
-      </Popup>
-    </React.Fragment>
-  );
-}
-
-PopupWithTrigger.propTypes = {
-  children: PropTypes.node,
-};
-
-function PopupWithTrigger2(props) {
-  const [anchor, setAnchor] = React.useState(null);
-  const [open, setOpen] = React.useState(false);
-
-  const { children, ...other } = props;
-
-  return (
-    <React.Fragment>
-      <Button ref={setAnchor} onClick={() => setOpen((o) => !o)}>
-        {open ? 'Hide popup' : 'Open CSS Animation'}
-      </Button>
-      <Popup anchor={anchor} open={open} {...other}>
-        {children}
-      </Popup>
-    </React.Fragment>
-  );
-}
-
-PopupWithTrigger2.propTypes = {
-  children: PropTypes.node,
-};
diff --git a/docs/data/base/components/transitions/AllTransitionsDemo.tsx b/docs/data/base/components/transitions/AllTransitionsDemo.tsx
deleted file mode 100644
index acfa976e71cc4d..00000000000000
--- a/docs/data/base/components/transitions/AllTransitionsDemo.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/system';
-import { Unstable_Popup as PopupBase, PopupProps } from '@mui/base/Unstable_Popup';
-import { Button as ButtonBase } from '@mui/base/Button';
-import { CssAnimation, CssTransition } from '@mui/base/Transitions';
-
-const styles = `
-  @keyframes open-animation {
-    0% {
-      opacity: 0;
-      transform: translateY(-8px) scale(0.95);
-    }
-
-    50% {
-      opacity: 1;
-      transform: translateY(4px) scale(1.05);
-    }
-
-    100% {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-
-  @keyframes close-animation {
-    0% {
-      opacity: 1;
-      transform: scale(1) rotate(0deg);
-      filter: blur(0);
-    }
-
-    100% {
-      opacity: 0;
-      transform: scale(1.5) rotate(8deg);
-      filter: blur(4px);
-    }
-  }
-
-  .anim-open {
-    animation: open-animation 1s ease-out both;
-  }
-
-  .anim-close {
-    animation: close-animation 1s ease-out forwards;
-  }
-
-  .open {
-    opacity: 1;
-    transform: translateY(0) scale(1)
-    filter: blur(0);
-    transition: transform 0.2s cubic-bezier(0.345, 0.275, 0.505, 1.625), opacity 0.2s ease-out;
-  }
-
-  .close {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.95);
-    filter: blur(3px);
-    transition: transform 0.4s ease-out, opacity 0.4s ease-out, filter 0.2s ease-out;
-  }
-`;
-
-const grey = {
-  200: '#DAE2ED',
-  700: '#434D5B',
-  900: '#1C2025',
-};
-
-const blue = {
-  200: '#99CCFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0066CC',
-};
-
-const Button = styled(ButtonBase)(
-  ({ theme }) => `
-  min-width: 175px;
-  font-family: 'IBM Plex Sans', sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  background-color: ${blue[500]};
-  padding: 8px 16px;
-  border-radius: 8px;
-  color: white;
-  transition: background-color, box-shadow, 120ms ease;
-  cursor: pointer;
-  border: 1px solid ${blue[500]};
-  box-shadow: 0 1px 1px ${
-    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.1)'
-  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
-
-  &:hover {
-    background-color: ${blue[600]};
-  }
-
-  &:active {
-    background-color: ${blue[700]};
-    box-shadow: none;
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
-    outline: none;
-  }
-`,
-);
-
-const Popup = styled(PopupBase)`
-  width: max-content;
-`;
-
-const PopupBody = styled('div')(
-  ({ theme }) => `
-  width: max-content;
-  padding: 12px 16px;
-  margin: 8px;
-  border-radius: 8px;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  box-shadow: ${
-    theme.palette.mode === 'dark'
-      ? `0px 4px 8px rgb(0 0 0 / 0.7)`
-      : `0px 4px 8px rgb(0 0 0 / 0.1)`
-  };
-  font-family: 'IBM Plex Sans', sans-serif;
-  font-size: 0.875rem;
-  z-index: 1;
-`,
-);
-
-const Section = styled('div')`
-  display: flex;
-  gap: 12px;
-  padding: 8px;
-
-  @media (max-width: 700px) {
-    flex-direction: column;
-  }
-`;
-
-export default function AllTransitionsDemo() {
-  return (
-    <div>
-      <style>{styles}</style>
-      <Section>
-        <PopupWithTrigger>
-          <CssTransition
-            enterClassName="open"
-            exitClassName="close"
-            lastTransitionedPropertyOnExit="transform"
-          >
-            <PopupBody>Animated with the CSS Transition component.</PopupBody>
-          </CssTransition>
-        </PopupWithTrigger>
-        <PopupWithTrigger2>
-          <CssAnimation
-            enterClassName="anim-open"
-            exitClassName="anim-close"
-            enterAnimationName="open-animation"
-            exitAnimationName="close-animation"
-          >
-            <PopupBody>Animated with the CSS Animation component.</PopupBody>
-          </CssAnimation>
-        </PopupWithTrigger2>
-      </Section>
-    </div>
-  );
-}
-
-function PopupWithTrigger(props: PopupProps) {
-  const [anchor, setAnchor] = React.useState<HTMLButtonElement | null>(null);
-  const [open, setOpen] = React.useState(false);
-
-  const { children, ...other } = props;
-
-  return (
-    <React.Fragment>
-      <Button ref={setAnchor} onClick={() => setOpen((o) => !o)}>
-        {open ? 'Hide popup' : 'Open CSS Transition'}
-      </Button>
-      <Popup anchor={anchor} open={open} {...other}>
-        {children}
-      </Popup>
-    </React.Fragment>
-  );
-}
-function PopupWithTrigger2(props: PopupProps) {
-  const [anchor, setAnchor] = React.useState<HTMLButtonElement | null>(null);
-  const [open, setOpen] = React.useState(false);
-
-  const { children, ...other } = props;
-
-  return (
-    <React.Fragment>
-      <Button ref={setAnchor} onClick={() => setOpen((o) => !o)}>
-        {open ? 'Hide popup' : 'Open CSS Animation'}
-      </Button>
-      <Popup anchor={anchor} open={open} {...other}>
-        {children}
-      </Popup>
-    </React.Fragment>
-  );
-}
diff --git a/docs/pages/blog/base-ui-2024-plans.md b/docs/pages/blog/base-ui-2024-plans.md
index 36ac9f457f9cce..f1c1dd0cc76ccf 100644
--- a/docs/pages/blog/base-ui-2024-plans.md
+++ b/docs/pages/blog/base-ui-2024-plans.md
@@ -67,9 +67,14 @@ Animation is a key element for adding delight to any application.
 We've already kicked off work on animation support by releasing the [CSS Transition](/base-ui/react-transitions/#css-transition) and [CSS Animation](/base-ui/react-transitions/#css-animation) components, as well as the `useTransitionTrigger` and `useTransitionStateManager` hooks.
 They're currently available for use with the Popup, Menu, and Select, and the plan is to extend support to more components while also adding more features.
 
-{{"demo": "../../data/base/components/transitions/AllTransitionsDemo.js"}}
+<iframe src="https://codesandbox.io/embed/3pdm56?view=preview&module=%2Fdemo.tsx&hidenavigation=1"
+     style="width:100%; height: 300px; border:0; border-radius: 4px; overflow:hidden;"
+     title="/blog/base-ui-2024-plans/"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
 
-<p class="blog-description" style="margin: -16px 0 0 0;">The CSS Animation transition is exaggerated here for the sake of demonstration.</p>
+<p class="blog-description">The CSS Animation transition is exaggerated here for the sake of demonstration.</p>
 
 ## Getting many issues out of the way
 
@@ -90,14 +95,14 @@ Rest assured that Base UI _is_ a standalone library, and it doesn't come packag
 <img alt="Material UI vs. Base UI: independent but related products." src="/static/blog/base-ui-2024-plans/material-vs-base.png" width="1200" height="450" loading="lazy" />
 
 Base UI is no longer _merely_ "Material UI without the styles"—as we've seen with developer trends over the last few years, the potential for growth and adoption of headless components could actually dwarf Material UI in the near future.
-To acknowledge that Base UI has the potential to outgrow Material UI, we plan to move it to its own dedicated GitHub repo for more focused communication and collaboration with the community that's growing around it.
+To acknowledge that Base UI has the potential to outgrow Material UI, we plan to move it to its own dedicated GitHub repository for more focused communication and collaboration with the community that's growing around it.
 
 ## Join us on the ride
 
 If you're passionate about extending the web platform with powerful, accessible, unstyled components, [we're hiring UI Engineers](/careers/staff-ui-engineer-base-ui/) to work on the Base UI team and help us accelerate its growth.
 
 Lastly, we'd love to hear your feedback.
-The best place to share your ideas and requests is in [the GitHub repo](https://github.com/mui/material-ui/issues?q=is:open+is:issue+label:%22package:+base-ui%22).
+The best place to share your ideas and requests is in [the GitHub repository](https://github.com/mui/material-ui/issues?q=is:open+is:issue+label:%22package:+base-ui%22).
 Check out the existing issues and add your thoughts, and feel free to open your own issue if you don't see your concerns addressed elsewhere.
 
 Happy development! 👋
diff --git a/docs/public/static/blog/base-ui-2024-plans/base-ui-milestone.png b/docs/public/static/blog/base-ui-2024-plans/base-ui-milestone.png
index 999dc2bbed0a05..e643db697b28d6 100644
Binary files a/docs/public/static/blog/base-ui-2024-plans/base-ui-milestone.png and b/docs/public/static/blog/base-ui-2024-plans/base-ui-milestone.png differ
diff --git a/docs/public/static/blog/base-ui-2024-plans/card.png b/docs/public/static/blog/base-ui-2024-plans/card.png
index 68d388a36987db..7fb1cc54df3ddf 100644
Binary files a/docs/public/static/blog/base-ui-2024-plans/card.png and b/docs/public/static/blog/base-ui-2024-plans/card.png differ
diff --git a/docs/public/static/blog/base-ui-2024-plans/material-vs-base.png b/docs/public/static/blog/base-ui-2024-plans/material-vs-base.png
index 4b7c5cd4275c63..a655098a6c8a53 100644
Binary files a/docs/public/static/blog/base-ui-2024-plans/material-vs-base.png and b/docs/public/static/blog/base-ui-2024-plans/material-vs-base.png differ