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 scale 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
Hydratable How hydratable() works — compute a value once on the server and reuse it on the client instead of re-running async work during hydration. Real-time Chat How WebSocket routes work — a hydrated island over Mochi.ws() with pub/sub broadcast and in-memory history. Mode Watcher Light/dark mode in an island — mode-watcher's <ModeWatcher />, toggleMode/setMode, and the mode / userPrefersMode / systemPrefersMode runes driving the global <html> theme.