Motion

Duration & easing tokens

Duration demo

Each bar animates with a different duration token (standard easing).

Easing comparison

The same 1100ms duration, three curves. standard is the house default for everything else in the theme (hover/focus state changes). out decelerates into place, and this module picks it for directional entrances (fly, scale). in accelerates away, the mirror for exits.

Transitions

Drop-in replacements for svelte/transition's fade/fly/slide/scale: same params, same return shape. The only change is the import line; duration and easing now default to the tokens above.

- import { fade } from 'svelte/transition';
+ import { fade } from '@hyzer-labs/ui/motion';

{#if visible}
	<div transition:fade>Content</div>
{/if}

<!-- Same params/semantics as the original. Duration and easing now
     default to the --hz-duration-* / --hz-ease-* tokens, and
     collapse to duration: 0 under prefers-reduced-motion unless
     you pass { essential: true }. -->

- import { fly } from 'svelte/transition';
+ import { fly } from '@hyzer-labs/ui/motion';

{#if visible}
	<div transition:fly>Content</div>
{/if}

<!-- Same params/semantics as the original. Duration and easing now
     default to the --hz-duration-* / --hz-ease-* tokens, and
     collapse to duration: 0 under prefers-reduced-motion unless
     you pass { essential: true }. -->

- import { slide } from 'svelte/transition';
+ import { slide } from '@hyzer-labs/ui/motion';

{#if visible}
	<div transition:slide>Content</div>
{/if}

<!-- Same params/semantics as the original. Duration and easing now
     default to the --hz-duration-* / --hz-ease-* tokens, and
     collapse to duration: 0 under prefers-reduced-motion unless
     you pass { essential: true }. -->

- import { scale } from 'svelte/transition';
+ import { scale } from '@hyzer-labs/ui/motion';

{#if visible}
	<div transition:scale>Content</div>
{/if}

<!-- Same params/semantics as the original. Duration and easing now
     default to the --hz-duration-* / --hz-ease-* tokens, and
     collapse to duration: 0 under prefers-reduced-motion unless
     you pass { essential: true }. -->

A specific instance can opt out of the reduced-motion collapse when the motion itself carries meaning:

import { fly } from '@hyzer-labs/ui/motion';

<!-- A focus-guiding movement carries meaning, so opt it out of the
     reduced-motion collapse rather than losing the cue entirely. -->
<div transition:fly={{ y: -24, essential: true }}>Jumped to top</div>

Scroll reveal

Two attachments, same options. reveal animates one element when it enters the viewport; revealGroup animates a container's direct children, staggered by DOM order. Both hide their targets on the client only, so SSR and no-JS readers always see the content.

Which one you want depends on what should move together: one thing arriving, or several arriving in sequence.

import { reveal } from '@hyzer-labs/ui/motion';

<div class="card" {@attach reveal()}>
	<strong>Tomahawk</strong>
	<span>An overhand throw that lands on its edge.</span>
</div>

import { revealGroup } from '@hyzer-labs/ui/motion';

<div class="strip" {@attach revealGroup({ stagger: 160 })}>
	{#each cards as card}
		<div class="card">{card}</div>
	{/each}
</div>

import { Hero, Button } from '@hyzer-labs/ui';
import { reveal } from '@hyzer-labs/ui/motion';

<Hero layout="overlay" height="half">
	{#snippet media()}<img src="…" alt="" />{/snippet}

	{#snippet title()}
		<span {@attach reveal({ delay: 0 })}>Throw straighter, sooner</span>
	{/snippet}

	{#snippet subtitle()}
		<span {@attach reveal({ delay: 160 })}>One drill at a time.</span>
	{/snippet}

	{#snippet actions()}
		<span {@attach reveal({ delay: 320 })}>
			<Button>Start the course</Button>
		</span>
	{/snippet}
</Hero>

<style>
	/* transform needs a block box: reveal is a no-op on inline spans */
	span { display: block; }
</style>

View transitions

viewTransition(update) wraps document.startViewTransition. Unsupported browsers and reduced motion run update() directly instead, an instant swap with the same return shape either way. This demo swaps a local layout state (not a page navigation), so it works the same regardless of routing.

import { viewTransition } from '@hyzer-labs/ui/motion';

function swapLayout() {
	viewTransition(async () => {
		layout = layout === "grid" ? "list" : "grid";
		await tick();
	});
}

<!-- Unsupported browsers and reduced motion run the update directly:
     an instant swap, no error, no branch needed at the call site. -->

import { onNavigate } from '$app/navigation';

onNavigate((navigation) => {
	if (!document.startViewTransition) return;
	return new Promise((resolve) => {
		document.startViewTransition(async () => {
			resolve();
			await navigation.complete;
		});
	});
});

The reference theme adds no default ::view-transition-* styling, because the browser's own root cross-fade is already a sensible default. Customizing it is consumer CSS, on the same tokens as everything else:

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: var(--hz-duration-base);
	animation-timing-function: var(--hz-ease-standard);
}

Reduced motion

Every helper in @hyzer-labs/ui/motion collapses automatically under prefers-reduced-motion: reduce. Transitions run at duration: 0, reveal/revealGroup show their content immediately with no hidden state ever applied, and viewTransition runs its update directly instead of starting a real transition. Pass { essential: true } on any of them to play the full animation anyway. Reserve that for motion which carries meaning, such as a focus-guiding movement, and not for decoration. The state is read fresh on every call, so a preference change mid-session is honored on the very next transition, reveal, or view transition, with no reload needed.

Override --hz-duration-* or --hz-ease-* with a plain CSS custom property, or set motion in the hyzer config; see Theming → Tokens & Overrides.