View Transitions

React 19's <ViewTransition> enables smooth animations between route changes.

Page-Level Transitions

From app/[slug]/page.tsx:

import { ViewTransition } from 'react';

export default async function BlogPostPage({ params }) {
  return (
    <ViewTransition enter="slide-from-right" exit="slide-to-right">
      <article>...</article>
    </ViewTransition>
  );
}

import { ViewTransition } from 'react';

export default async function BlogPostPage({ params }) {
  return (
    <ViewTransition enter="slide-from-right" exit="slide-to-right">
      <article>...</article>
    </ViewTransition>
  );
}

Shared Element Transitions

From app/dashboard/_components/PostList.tsx—connect elements across pages with the same name:

<Link href={`/dashboard/${post.slug}`}>
  <ViewTransition name={`post-card-${post.slug}`} share="morph">
    <Card>{post.title}</Card>
  </ViewTransition>
</Link>

<Link href={`/dashboard/${post.slug}`}>
  <ViewTransition name={`post-card-${post.slug}`} share="morph">
    <Card>{post.title}</Card>
  </ViewTransition>
</Link>

The card morphs into the detail page when navigating.

Browser Support

Uses the browser's native View Transitions API. In unsupported browsers, navigation works normally—progressive enhancement.