react-view-transitions

Create shared element transitions by wrapping elements with `<ViewTransition>` components and configuring CSS animations. This utilizes the browser's native view transition API to morph elements like images or cards smoothly between views.

Yes, native view transition API page transitions are compatible with Next.js and React experimental builds. The implementation supports route and component-level animations, enabling directional slides or fades during page changes.

Animate list reordering and suspense reveals by implementing `<ViewTransition>` components with CSS recipes. This smoothly animates list item insertions and fades or slides in content once data has loaded for polished load states.

The best way to implement native UI animations is using the browser's native view transition API. This reduces complexity and reliance on third-party animation libraries by handling page changes, shared element morphs, and suspense reveals natively.

Yes, React experimental builds are required to use native view transitions for component-level animations. The feature requires minimal setup with `<ViewTransition>` components and CSS, implementing both route and component-level animations.

React view transitions require specific CSS recipes because the native API handles different animation types uniquely. Configuring CSS animations according to provided recipes ensures proper directional slides, fades, and shared element morphs.