@stew-engine/player

@stew-engine/player

Plays animations made in Stew. One small file, no dependencies.

npm i @stew-engine/player

Use it

Every component you export from Stew (React, Vue, Angular or a Web Component) already calls the player for you. Paste the component into your app, install the package, and it plays exactly like it did in the editor.

Want to drive it yourself? mount takes the artwork's <svg> and the scene data Stew exported next to it:

import { mount } from "@stew-engine/player";

const stew = mount(svg, SCENE);          // shows its first frame, starts on its trigger
stew.player.pause();                     // play, pause, reverse, restart, seek...
stew.set("boolean", "checked", true);    // feeds a data clip, by its name
stew.destroy();                          // stops everything, the artwork back as it was

mount(svg, scene, options?)

stew.player

play(), pause(), reverse(), restart(), seek(seconds), timeScale, repeat (-1 loops forever), time, duration, playing, on("complete", fn) and cue(seconds, fn). The types ship with the package, with a note on every one.

Server rendering

Importing it on the server is safe: it touches nothing until you call mount. Call mount in the browser (useEffect, onMounted, ngAfterViewInit or connectedCallback).

Licence

PolyForm Shield 1.0.0 (the full text is LICENSE.md in the package). In plain words:

• Free to use in your websites, apps and products, commercial ones too.
• Not allowed: using it to build a product that competes with Stew. Need that? Get in touch through stewfactory.app.

The plain words are a summary, the licence text is what counts. The player bundles transformation-matrix (MIT), see THIRD_PARTY_NOTICES.md.

Working on it (Stew's own repo)

It is the app's own Stew scene (the one every preview inside Stew plays) bundled with Stew's engine (engine/) into one file that imports nothing: an export moves exactly as the editor shows it. What only the editor needs stays out (src/exportOnly/).

• npm run player:build writes dist/stew-player.js (the module), dist/types/ (its .d.ts) and public/stew-player.js (the same player as a plain script, for the app's own previews of an export). It runs on npm run dev and npm run build.
• player/test/bundle.test.ts holds it to its budget, to importing nothing and to carrying nothing of GSAP, React or the editor.
• The animation check plays every download on the bundle as it ships.
• Publishing: bump version, then npm publish from this folder. prepublish.mjs runs first and stops the publish unless everything the bundle is made of is committed, then builds dist/ from scratch and runs the bundle test.