llms.txt

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 fade transition.

Go to page 2 →

Heads up: Firefox doesn't currently support the cross-document View Transitions API, so navigations there swap instantly without animating.

Transition: fade slide scale blur flip

Music: Traditional Japanese 2 — Bounce-Bay-Records

<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

Form Errors A thrown action error shown inline via {@attach enhance(...)}, or as the Mochi error page on plain submit. Nested Components A five-level recursive tree — hydrating the root carries the whole subtree in one island. Realtime Admin Panel Live admin dashboard with WebSocket updates and server-driven state.