View Transitions

View as Markdown

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.

// 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.

// 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.