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 1
Each navigation is a full page load — the browser animates it with a slide 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
Isomorphic URL How the isomorphic URL helper works — one import that reads the request URL on the server and window.location on the client. Tailwind Todo App Classic todo app styled with Tailwind CSS. Using form return data How form action return data works — an action returns success({...}); {@attach enhance(...)} updates the UI in place, plain HTML re-renders.