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.
<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
File Uploads via form actions multipart/form-data submission, validated with fail() and success(), shown enhanced and plain. Data Loading Server-side fetch from PokéAPI cached via MochiCache and rendered at request time. Lazy Server Islands Server islands marked mochi:defer:visible only fetch when the wrapper scrolls into view.