# View Transitions

Neutron's `ViewTransitions` component enables the browser's View Transitions API for supported same-origin navigations. Unsupported browsers keep normal navigation behavior.

## Enabling View Transitions

To enable view transitions, add the `<ViewTransitions />` component to your root layout.

```tsx
// src/routes/_layout.tsx
import type { ComponentChildren } from "preact";
import { ViewTransitions } from "@neutron-build/core/client";

export default function RootLayout({ children }: { children?: ComponentChildren }) {
  return (
    <div>
      <ViewTransitions />
      {children}
    </div>
  );
}
```

## How It Works

1. **Browser navigation:** Plain links and static routes remain browser-owned. The component opts the document into cross-document transitions with CSS and adds lightweight prefetching.
2. **Client navigation:** `Link` and `navigate()` use the client router's transition support on app routes.

## Customizing Animations

You can name specific elements to animate them distinctly during the transition using the `view-transition-name` CSS property.

```tsx
// Page 1: List
<img src="avatar.jpg" style={{ viewTransitionName: "avatar" }} />

// Page 2: Detail
<img src="avatar-large.jpg" style={{ viewTransitionName: "avatar" }} />
```

Supporting browsers can animate the named element between the two views.