Docs

Presets

Reusable fade, scale, and slide keyframe bundles.

Presets are plain data objects compatible with Motion and Presence. Import from @kamod-ch/motion/presets.

Scale preset

Fade + scale

Available presets

fade, scale
slideUp, slideDown, slideLeft, slideRight
stagger(interval, startDelay) — delay factory for list entrances
resolvePreset(preset, reducedMotion) — pick reduced fallback

tsx

import { Motion } from "@kamod-ch/motion/motion";
import { slideUp, resolvePreset } from "@kamod-ch/motion/presets";
import { useReducedMotion } from "@kamod-ch/motion/hooks/use-reduced-motion";

const reduced = useReducedMotion();
const preset = resolvePreset(slideUp, reduced);

<Motion
initial={preset.initial}
animate={preset.animate}
exit={preset.exit}
transition={preset.transition}
/>

Import @kamod-ch/motion/presets/tokens.css for shared duration and easing CSS variables.