View-transition pack

Preview Available in release assets

Offer an explicitly imported native cross-document view-transition vocabulary for a few stable page identities without taking ownership of navigation.

View-transition pack primary example

<article>
  <nav aria-label="Breadcrumb" data-transition="persistent-navigation">
    <a href="/articles">Articles</a>
  </nav>
  <h1 data-transition="page-title">A native cross-document transition</h1>
  <a href="/articles/next">
    <img data-transition="page-media" src="/media/field-notes.jpg" alt="Field notes beside a lake">
  </a>
  <p>The link remains ordinary navigation when cross-document view transitions are unsupported or motion is reduced.</p>
</article>

Show code

<article>
  <nav aria-label="Breadcrumb" data-transition="persistent-navigation">
    <a href="/articles">Articles</a>
  </nav>
  <h1 data-transition="page-title">A native cross-document transition</h1>
  <a href="/articles/next">
    <img data-transition="page-media" src="/media/field-notes.jpg" alt="Field notes beside a lake">
  </a>
  <p>The link remains ordinary navigation when cross-document view transitions are unsupported or motion is reduced.</p>
</article>

Anatomy

Optional CSS asset
Cross-document opt-in
Stable named page title
Stable named media
Stable persistent navigation

Variants and sizes

Page title continuity
Shared media continuity
Persistent navigation

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Supported
Unsupported
Reduced motion
Back and forward navigation
Interrupted navigation
Print

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Ordinary links and browser history remain canonical. The browser coordinates eligible same-origin cross-document transitions; this pack adds no navigation interception, routing, snapshot store, or JavaScript lifecycle.

Accessibility

Use transitions only for continuity, never to convey state. Keep names unique per rendered document, preserve focus and announcements through normal navigation, and treat prefers-reduced-motion as an immediate transition. Test zoom, forced colors, Back/Forward, interrupted loads, and assistive technology before broad adoption.

Contract

PLATFORM

Basis

Native View Transition API; no APG widget

Evidence

tests/unit/library/view-transitions.test.ts

API

Import /optional/view-transitions.css explicitly. Add data-transition=page-title|page-media|persistent-navigation only to stable matching elements across documents. Override --thin-view-transition-duration if needed. Do not use data-pattern.

Behavior tier: native

Custom properties

PropertyDefaultDescription

--thin-view-transition-durationvar(--thin-motion-normal)Duration of named cross-document view transitions.

Fallback

If CSS, @view-transition, named pseudo-elements, or cross-document transitions are unsupported, links perform ordinary full-page navigation with identical content and focus behavior.

Assets and dependencies

/optional/view-transitions.css

Dependencies: None

Source: packages/ui/src/items/view-transitions/style.ts