Animation tokens, presets, and reduced motion support for the gentleduck ecosystem. Optionally integrates with the motion library for rich enter/exit animations.

Quick Start

bun add @gentleduck/motion

import { useDuckReducedMotion, motionTransition } from '@gentleduck/motion'

function Fade() {
  const reduced = useDuckReducedMotion()
  const transition = motionTransition(reduced, { duration: 200, easing: 'ease-out' })
  // ...
}

Features

• Easing presets -- duckMotionEasing.standard, .exit, .expo, .easeOut, .spring
• Duration tokens -- duckMotionDurationMs.fast (150ms), .normal (200ms), .slow (300ms), .exit (180ms fallback)
• Spring transitions -- springDefault, springSnappy, springGentle, springBouncy, springStiff, springSmooth, springInstant
• CSS custom properties -- --gentleduck-motion-dur, --gentleduck-motion-ease via @gentleduck/motion/css
• Reduced motion -- useDuckReducedMotion(), motionTransition()
• Animation presets -- tree-shakeable presets like fadeIn, scaleIn, slideUp with blur and asymmetric exits
• Directional presets -- createDirectionalPreset('bottom') for menu/popover animations; createSlidePreset for pure slides
• Motion library integration -- MotionProvider, LazyMotion feature loaders, useMotionPreset hook

Exports

| Entry point | What it provides | | --- | --- | | @gentleduck/motion | Tokens, easing, reduced motion hooks, CVA animation variants | | @gentleduck/motion/css | CSS file with motion custom properties and reduced motion fallback | | @gentleduck/motion/transitions | Duration/easing mapped to motion Transition objects, spring presets | | @gentleduck/motion/motion-presets | useMotionPreset hook | | @gentleduck/motion/motion-features | loadDomAnimation, loadDomMax LazyMotion feature loaders | | @gentleduck/motion/motion-provider | MotionProvider wrapping LazyMotion + MotionConfig | | @gentleduck/motion/presets | Individual tree-shakeable preset exports (fadeIn, scaleIn, etc.) | | @gentleduck/motion/presets/fade-in | Single preset import for best tree-shaking |

License

MIT