effect-motion

Frame-exact motion graphics in code, composed with Effect.

A scene is an Effect generator program: instantiate entities, then tween or spring their properties, composing motions sequentially or in parallel. Scenes are frame-exact — animation is counted in whole frames at the scene's frame rate, never read from a wall clock — and finite, which is what lets a scene be scrubbed and replayed like a video.

Install

effect is a peer dependency — install it alongside:

bun add effect-motion effect

Write a scene

Every yield* composes another effect into the scene.

import { Motion, Scene, Shapes } from "effect-motion";

export const scene = Scene.make(function* () {
	const circle = yield* Scene.instantiate(Shapes.Circle, {
		x: 60,
		y: 150,
		radius: 16,
		fill: "#7f5af0",
	});

	yield* circle.pipe(
		Motion.tweenTo({ x: 440 }, "1 second", "easeInOutCubic"),
	);
});

Render it to SVG, play it in React with @effect-motion/react, or export it to a video with @effect-motion/export.

Documentation

Full docs, concepts, and live examples: https://github.com/julia-script/effect-motion