Quickstart

This illustrative example installs the ember character and performs a scene with the Sprite React component:

quickstart.tsx

import { createSprite } from "@fungi.computer/sprite";
import { Sprite } from "@fungi.computer/sprite/react";
import { builtinCharacters } from "@fungi.computer/sprite-swarm";
import { decodeScene, performanceOf } from "@fungi.computer/sprite-swarm/scene";

const service = createSprite({ characters: builtinCharacters });

function Swarm({ input, sceneId }: { input: unknown; sceneId: number }) {
  const performance = useMemo(() => {
    const scene = decodeScene(input);
    return Result.isSuccess(scene)
      ? performanceOf(sceneId, scene.success, { beat: 0, playing: true }, {})
      : undefined;
  }, [input, sceneId]);
  return (
    <Sprite
      service={service}
      src={{ local: "ember" }}
      performance={performance}
      onState={(state) => {
        if (state.status === "ready") console.log(state.progress);
      }}
    />
  );
}

Without a performance the swarm rests as Hark’s ring.