View Transitions
Add <ViewTransitions /> to a shared layout to animate full-page navigations via the browser's cross-document View Transitions API — no client router. The card animates while the video below is held still and keeps playing across the navigation, resuming at the same timestamp.
Page 2
Each navigation is a full page load — the browser animates it with a blur transition.
Heads up: Firefox doesn't currently support the cross-document View Transitions API, so navigations there swap instantly without animating.
<script lang="ts">
import { url } from 'mochi-framework';
import { ViewTransitions } from 'mochi-framework/components';
import TransitionCard from './TransitionCard.svelte';
const type = parseTransition(url.searchParams.get('type'));
</script>
<ViewTransitions {type} regions="card" />
<TransitionCard page={1} {type} />
More demos
Client-only Islands How client-only islands work — components marked mochi:clientOnly skip SSR and mount in the browser, with a fallback snippet until then. Request Cache How the request cache works — requestMemo and requestCache run an expensive computation once per request no matter how many components call it, then discard it at the request boundary. Unique IDs How stable island IDs work — Svelte's native $props.id() gives SSR-consistent, per-instance ids, namespaced inside server islands.