View Transition

Switch content inside one persistent surface, with animated dimensions and directional page transitions.

API

Import createViewTransition from @repo/ploss/attach and call it during component initialization.

createViewTransition(() => ({ value, direction }))

You own the active view key. Optional direction is forward or backward.

views.container

Attach to one dedicated container with {@attach views.container}.

views.pageProps(key)

Spread onto each direct-child page wrapper. Includes the attachment and initial visibility attributes for SSR.

views.page(key)

Low-level page attachment for client-side integrations. Prefer pageProps for server-rendered pages.

Use unique, stable keys from a finite set. Pages stay mounted, preserving local state. Keep padding on page content. The caller owns navigation and focus; the utility handles dimensions, animation and inactive-page isolation. Reduced motion follows the system preference.