Skip to main content
@gentleduck/motionWIP

Motion that feels the same everywhere

Duration tokens, easing curves, springs, and presets that respect reduced motion. Optional loaders keep the motion library light.

Get startedView source

  • Duration tokens

    duckMotionDurationMs.fast is 150 ms, .normal is 200 ms, and .slow is 300 ms. Every animated component shares the same timing.

  • Easing curves

    duckMotionEasing.standard, .exit, .expo, .easeOut, and .spring. Cubic-bezier curves tuned for UI motion.

  • Reduced motion

    useDuckReducedMotion() and motionTransition() drop durations to zero when the user opts out. Your code stays the same.

  • Presets

    Tree-shakeable fadeIn, scaleIn, and slideUp, plus blur and asymmetric-exit variants. Pick one and drop it in.

  • Springs

    springDefault, springSnappy, and springGentle. Pass them straight to the motion library.

  • Feature loaders

    MotionProvider, LazyMotion feature loaders, and useMotionPreset(). Load only the features you use.

Install

Install the package and import the tokens, presets, and reduced-motion helpers.

  1. Install

    bun add @gentleduck/motion

  2. Import the helpers

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

Free & open source

gentleduck is MIT licensed and will always be free and open source. Every package ships with full source access — fork it, modify it, own it.

Become a Sponsor