Tokens and Presets

Use semantic timing, springs, delays, stagger values, and reusable keyframe presets.

Overview

The token layer keeps custom motion aligned with the package. It separates timing intent from raw milliseconds and provides a compact set of fade, scale, menu, and toast keyframe presets.

Behaviour and customization

motionIntents maps feedback, disclosure, layout, navigation, overlay, reorder, and selection to standard transitions. stagger calculates a stable sequence delay from named token values.

Choose an intent before choosing a raw duration. Use a preset as a starting point, then adjust only the keyframes that describe the product-specific movement.

Usage

<script lang="ts">
	import { Motion, motionIntents, presets, stagger } from 'fractalsvelte/motion';
</script>

{#each items as item, index}
	<Motion initial={presets.fadeUp.initial} animate={presets.fadeUp.animate} transition={{ ...motionIntents.disclosure, delay: stagger(index, 'tight') }}>
		{item.label}
	</Motion>
{/each}

API

Prop	Type	Default	Description
`transitions`	`record`	`-`	instant, fast, standard, emphasized, gentle, and snappy transitions.
`motionIntents`	`record`	`-`	Semantic component-author timing choices.
`presets`	`record`	`-`	fade, fadeUp, scale, menu, and toast keyframes.
`stagger`	`function`	`-`	Derives a token-based sequential delay.

Components and blocks

Use this primitive directly for custom interfaces; Fractalsvelte also applies it or its motion language in these areas:

All public motion primitives and built-in components

For exact built-in component timing and reduced-motion behaviour, see the Motion guide.