Stew Engine.
Our own animation engine, written from scratch.
import { cursorAction, nodeBend, ruleOn } from "@stew/engine";
// it drifts on a looping clip of its own
drift.play();
// the whole circle runs from you...
cursorAction(circle, { kind: "runAway",
strength: 56, radius: 170 }, stage, clock);
// ...and every node is pulled two ways at once
nodeBend(circle.outline, circle.nodes.flatMap(() => [
{ kind: "follow", strength: 12, maxDistance: 18 },
{ kind: "runAway", strength: 26, radius: 96 },
]), stage, clock);
// catch one: its clip plays while you hover
ruleOn(caught, { on: "hover" }, [circle.body], saved);The whole engine is about 23 KB compressed, with no outside code. A scene without interactions needs only about 17 KB of it.
While it plays it makes next to no waste for the browser to clean up. Each frame, it only updates what changed.
More than 400 cases check every movement in Chrome and in Safari's engine. Real saved projects are compared with the previous engine, frame by frame.
Stew Factory's editor, share pages and videos play on it. So does every animated download.
Playing right here.
This little scene runs on Stew Engine, live in your browser. Pause it, or drag the bar to any moment.
Readable, on purpose.
An animation is the same JSON Stew Factory saves: one track for each thing that moves, with its times, values and eases. Stew Engine comes with its own TypeScript types, so an AI, or a person, can read an animation and write one directly.
{
"targetUid": "ball",
"property": "y",
"keyframes": [
{ "time": 0, "value": 0, "easing": "power2.out" },
{ "time": 0.5, "value": -64, "easing": "power2.in" },
{ "time": 1, "value": 0 },
{ "time": 1.2, "value": 0, "easing": "power2.out" },
{ "time": 1.7, "value": -64, "easing": "power2.in" },
{ "time": 2.2, "value": 0 }
]
}The ball's hop from the demo, exactly as Stew Engine reads it.