@kinem/core

Functional, compositional animation for TypeScript. An animation is a pure function from progress to value. You compose animations with ordinary combinators, then hand the result to a renderer.

import { easeOut, parallel, play, sequence, spring, tween } from "@kinem/core"

const entrance = sequence(
  tween({ opacity: [0, 1] }, { duration: 200 }),
  parallel(
    spring({ y: [20, 0] }, { stiffness: 180, damping: 14 }),
    tween({ rotate: ["-5deg", "0deg"] }, { duration: 400, easing: easeOut }),
  ),
)

play(entrance, ".card")

tween, spring, keyframes, parallel, sequence, stagger, timeline all return an AnimationDef. play() auto-routes compositor-safe properties to WAAPI and the rest to rAF; playValues(), playUniforms(), and strokeDraw cover Canvas 2D, WebGL, and SVG paths.

Install

pnpm add @kinem/core
# or: npm install @kinem/core
# or: yarn add @kinem/core

For a smaller bundle that skips the color, transform, path, and CSS-unit interpolators, import from @kinem/core/slim and register only what you need via registerInterpolator.

Reactive values

motionValue<T>(initial) cells hold animatable state with get / set / on plus a 30 ms getVelocity() window. time() returns a self-driving MotionValue<number> of milliseconds since creation; it auto-starts an rAF loop on the first listener and stops on the last. velocity(source) derives a per-second derivative of any source MotionValue. combine(sources, fn) folds N source cells into a derived cell that updates whenever any source updates and unsubscribes on destroy. motionValueEvent(mv, "change", listener) is a small subscription wrapper.

import { combine, motionValue, time, velocity, motionValueEvent } from "@kinem/core"

const t = time()
const x = motionValue(0)
const vx = velocity(x)
const dist = combine([x], (a) => Math.abs(a))
motionValueEvent(vx, "change", (v) => console.log("v", v))

trackNamed(name) registers an ambient entry in the devtools tracker so features without their own animation handle (a hand-rolled rAF loop, a gesture state machine) still appear in the panel under a readable label. The returned function unregisters the entry. See docs/recipes/reactive-values.md for end-to-end patterns.

Drag-to-sort

createReorderController({ axis, getValues, commit }) is the framework-agnostic engine behind every adapter's Reorder component. It owns rect math, sibling translates, and order commits; framework adapters wire pointer events into startDrag / move / end.

Framework adapters

• @kinem/react
• @kinem/vue
• @kinem/svelte
• @kinem/solid

Docs

Full guide, API reference, and migration notes from gsap and motion in the main repo.

License

Dual licensed under Apache 2.0 or MIT.