@clayzo/animation

The stable, typed authoring surface for Clayzo animation documents.

npm install -D @clayzo/animation

import {
  ANIMATION_DOCUMENT_VERSION,
  assertValidAnimationDocument,
  constant,
  packageClayzoBundle,
  withComputedRevision,
  type AnimationDocument,
} from "@clayzo/animation";

const document = withComputedRevision({
  version: ANIMATION_DOCUMENT_VERSION,
  id: "example",
  revision: "",
  name: "Example",
  // canvas, timing, assets, compositions, components, markers, capabilities…
} as AnimationDocument);

assertValidAnimationDocument(document);
const portable = await packageClayzoBundle(document, { assetBytes: {} });

States are a state machine over markers:

import { stateMachine, withStateMachine } from "@clayzo/animation";

const button = withStateMachine(
  document,
  stateMachine({ initial: "idle" })
    .state("idle", { marker: "idle" })
    .state("hover", { marker: "hover", playback: "once" })
    .state("loading", { marker: "loading", playback: "loop" })
    .on("pointerenter", "idle", "hover", { hitArea: "button" })
    .on("pointerleave", "hover", "idle", { hitArea: "button" })
    .when("*", "loading", { input: "loading", operator: "eq", value: true }),
  { inputs: { loading: "boolean" }, hitAreas: { button: { nodeId: "button" } } },
);

This package intentionally contains document contracts, builder macros, validation, canonical serialization, revision stamping, and .clayzo packaging only. Rendering, evaluation, review, conversion, preview, and export are provided by the clayzo CLI and the renderer packages.

For playback, use @clayzo/webgl-player for the lightweight runtime or @clayzo/canvaskit-player for maximum fidelity. Playback never contacts Clayzo authentication services.