gentleduck motion

Philosophy

@gentleduck/motion provides a small, predictable motion layer. It focuses on shared easing/duration tokens and reduced-motion safety so transitions stay consistent across packages.

Installation

npm install @gentleduck/motion

npm install @gentleduck/motion

Usage

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

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

const reduced = useDuckReducedMotion()
const transition = motionTransition(reduced, { duration: 240, easing: 'var(--duck-motion-ease)' })

const reduced = useDuckReducedMotion()
const transition = motionTransition(reduced, { duration: 240, easing: 'var(--duck-motion-ease)' })

API Reference

CSS entrypoint

• @gentleduck/motion/css: motion tokens and reduced-motion defaults.

react

• useDuckReducedMotion()
• motionTransition(reduced, normal)
• onDuckReducedMotionChange(callback)

waapi

• prefersReducedMotion()
• animateIfAllowed(element, keyframes, options, reducedMotion?)

Tokens

• duckEasing
• duckDuration
• duckMotionCssVar