@nomiedge/motion

Token-driven animation primitives for the Nomiedge Design Language: a reduced-motion-correct hook, a pure transition() string builder, a cssVars() CSS-custom-property exporter, four composable presets, and a Transition/MotionConfig component pair.

Install

pnpm add @nomiedge/motion

Why no framer-motion

See docs/adr/0004-no-framer-motion.md. This package is CSS-transitions-only, on purpose — no JS animation loop, RSC-safe by default, near-zero bytes.

Usage

import { transition, fade, useReducedMotion } from "@nomiedge/motion";

// Pure, RSC-safe — usable directly in a Server Component's className/style.
const style = { transition: transition(["opacity"], { duration: "fast", easing: "standard" }) };

// Client-side, respects the user's reduced-motion preference automatically.
function MyComponent() {
  const reduced = useReducedMotion();
  // ...
}

See /docs/motion in the brand portal for a live playground of every preset.