Quickstart

This illustrative React example configures the host’s asset policy and lazy video renderer, then presents a character document:

import { createSprite } from "@fungi.computer/sprite";
import { Sprite, SpriteProvider } from "@fungi.computer/sprite/react";

const service = createSprite({
  assets: {
    baseURL: window.location.href,
    allowedOrigins: [window.location.origin],
    maxBytes: 2_000_000,
    maxTotalBytes: 4_000_000,
    maxRequests: 4,
  },
  renderers: {
    video: () => import("@fungi.computer/sprite/video"),
  },
});

function Character() {
  return (
    <SpriteProvider service={service}>
      <Sprite
        src="/characters/my-avatar.json"
        activity="idle"
        role="img"
        aria-label="My avatar"
      />
    </SpriteProvider>
  );
}

The package tests exercise player updates, React lifetime, and asset admission. See src/player.test.ts, src/react.test.tsx, and src/assets.test.ts.