Custom Transitions
Bring your own animation to <ViewTransitions /> with custom={{ in, out }} — raw @keyframes bodies that drive the page you leave and the page you land on. Here the card does a funky 3D spin on every navigation.
Page 2
Each navigation is a full page load — the card does a custom spin while the rest of the page swaps instantly.
Heads up: Firefox doesn't currently support the cross-document View Transitions API, so navigations there swap instantly without animating.
<script lang="ts">
import { ViewTransitions } from 'mochi-framework/components';
import SpinCard from './SpinCard.svelte';
</script>
<ViewTransitions
custom={{
out: 'to { transform: rotate(540deg) scale(0); opacity: 0 }',
in: 'from { transform: rotate(-540deg) scale(0); opacity: 0 }',
}}
easing="cubic-bezier(0.68, -0.55, 0.27, 1.55)"
duration={600}
regions="card"
/>
<SpinCard page={1} />
More demos
Nested Island Max Depth How deeply nested server islands work — a four-level mochi:defer chain where each level fetches the next on demand and the prebuild precompiles the whole chain. Form Actions How form actions work — a form rendered twice, as a plain HTML POST and intercepted with {@attach enhance(...)}. isHydratable() How isHydratable() works — detect from any depth whether the current subtree will hydrate, for SSR-only fallbacks without prop forwarding.