[docs] Add ViewTransition demos in the animation guide

[mnajdova]

I mostly created this to test and see how our components would support ViewTransition.

There are some issues with popups. Closing worked fully, but opening did not animate. Based on Claude it fails because:

Right after React's DOM update callback finished, the popup element was in the DOM with hidden and display: none, even though React had already assigned it a view-transition-name. The browser captures the new snapshot at that moment, so neither the popup nor the cover inside it can be captured.

The cause is in Base UI. The root computes mounted synchronously via useTransitionStatus, but pushes it into the popup store with useSyncedValues, which writes in a layout effect. Dialog.Popup reads mounted from the store and renders hidden={!mounted}, so the opening commit always paints the popup hidden and a follow-up synchronous update reveals it. That second update happens after the snapshot. The same store flag gates the modal InternalBackdrop in the Portal.

This applies to every component built on the popup store: Dialog, Alert Dialog, Popover, Menu, Select, Combobox, Tooltip, Preview Card, and so on. Normally the one-commit lag is invisible because both commits happen before paint. View transitions are the first thing that observes it.

Possible fix

would be making the popup's hidden attribute derive from a value that is correct on the opening commit rather than the store's lagging copy. That could mean syncing mounted into the store during render, or having the Popup read mounted from the root through context. Either touches the shared popup store, so it affects all popups and needs more testing. For now, I added the "Popups" note in the Animation handbook, but we could discuss if we want to fix it first..

Two other things:

• Accordion technically worked when wrapping each item, including closing, because Base UI's delayed panel removal happens inside a boundary that persists. But the height change shifts the page, so the root cross-fades and every bit of text on the page ghosts for the duration. Not demo-worthy.
• Wrapping Tabs.Panel in a boundary that stays mounted fails for a different reason: Base UI removes the exiting panel a frame later with flushSync, and Chrome skips a transition when a captured element disappears mid-animation. That is why the Tabs demo renders only the active panel, so the boundary itself unmounts inside the Transition.

---

We can discuss this next week, to wait the minimum package age to pass and the CI to be happy :)

[code-infra-dashboard]

Bundle size

Bundle	Parsed size	Gzip size
@base-ui/react	🔺+602B(+0.13%)	🔺+379B(+0.25%)

Details of bundle changes

Performance

Total duration: 942.36 ms +18.20 ms^(+2.0%) | Renders: 72 ^(▼-4) | Paint: 1,538.93 ms +60.75 ms^(+4.1%)

Test	Duration	Renders
Dialog mount (300 instances)	28.61 ms 🔺+6.60 ms(+30.0%)	1 (+0)
Select open (500 options)	43.35 ms +5.53 ms(+14.6%)	12 (▼-2)
Menu open (500 items)	60.39 ms -3.15 ms(-5.0%)	9 (▼-2)

12 tests within noise — details

Metric alarms

Test	Metric	Change
Dialog mount (300 instances)	bench:paint	🔺 +14.49 ms

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	2a086f3
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/6aabbd6bb30451000870a4aa
😎 Deploy Preview	https://deploy-preview-5708--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@5708
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@5708
  

commit: 2a086f3