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 1
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
Isomorphic URL How the isomorphic URL helper works — one import that reads the request URL on the server and window.location on the client. File Routes How file routes work — serve a file from disk with Mochi.file(), as a static path or a per-request resolver. Request ID How request IDs work — every request gets a UUID v7 on getRequestContext().requestId that rides every lifecycle event for correlation.