View Transitions — Neutron Docs

Neutron has built-in support for the View Transitions API, allowing for native, smooth animations between pages without a heavy SPA runtime.

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

Static Routes: When a link is clicked, Neutron intercepts the navigation. It fetches the new HTML, and then uses document.startViewTransition() to swap the DOM.
App Routes: View transitions hook into the client-side router to animate the component tree update.

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" }} />

The browser will automatically morph the image from Page 1 to Page 2.