@animochi/web (compatibility)

@animochi/web remains as a compatibility export. New projects should install @animochi/js for framework-neutral browser use or @animochi/react for React. Its existing AnimochiClient and AnimochiPlayer exports continue to work.

Install

npm install @animochi/web

Get your project details

Open SDK & Publishing in the Animochi dashboard. Copy the API origin, create an API key, and copy its one-time secret. Animation cards show the exact state key (for example wave) with a copy button.

The SDK only sees a published release. Generate or regenerate animations, then click Publish latest to SDK before calling sync().

React usage

import { AnimochiClient, AnimochiPlayer } from "@animochi/web";

const client = new AnimochiClient({
  projectId: "your-project-id",
  sdkKey: "animochi_...",
  apiOrigin: "https://animochi-web-production.up.railway.app",
  bundledFallback: {
    packageUrl: "/fallback.animochi",
    contentHash: "sha256:...",
    state: "idle",
  },
});

export function Mascot() {
  return (
    <div style={{ width: 240, height: 240 }}>
      <AnimochiPlayer client={client} state="wave" />
    </div>
  );
}

AnimochiPlayer syncs on mount by default. Use autoSync={false} when your application calls client.sync() centrally. bundledFallback is optional; its URL should point to a single-state .animochi file shipped with the web app, and it receives the same SHA-256 validation as network assets.

For non-React rendering, call await client.sync() followed by await client.resolve("wave"); the result contains a blob URL and the complete frame grid. See API.md for the HTTP contract.