View transitions

ViewTransitions

Factory components that set viewTransitionName for shared-element transitions across navigations.

ViewTransitions

Namespace of element helpers — each key is a standard HTML tag. Every component requires a stable name string that matches between the outgoing and incoming route.

import React from 'react';
import { ,  } from 'manicjs';

export function ({ , ,  }: { : string; : string; : string }) {
  return (
    < ={`/products/${}`}>
      <. ={`product-${}`} src={} ={} />
Type '{ name: string; src: string; alt: string; }' is not assignable to type 'IntrinsicAttributes & ViewTransitionProps'.
  Property 'src' does not exist on type 'IntrinsicAttributes & ViewTransitionProps'.
      <. ={`product-title-${}`}>{}</.>
    </>
  );
}

Supported tags

GroupElements
Layoutdiv, span, main, section, article, header, footer, nav, aside
Headingsh1, h2, h3
Contentp, img, button, a, ul, li

Props

Each helper forwards native DOM props except it injects style.viewTransitionName from name.

Prop

Type

CSS customization

app/global.css
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 240ms;
}

Browser support

When document.startViewTransition is missing, Manic swaps routes instantly — no runtime errors.

See also

View Transitions

ViewTransitions element namespace and navigation integration overview.

setViewTransitions

Enable or disable wrapping navigations in document.startViewTransition at runtime.

On this page

ViewTransitions
Supported tags
Props
CSS customization
Browser support
See also