effect-motion 0.3.2 → 0.4.0

package/dist/CameraHelpers.d.ts

@@ -5,6 +5,7 @@ import * as Entity from "./Entity.js";
 import * as Instance from "./Instance.js";
 import * as Runner from "./Runner.js";
 import * as Timing from "./Timing.js";
+export type { CameraState } from "./Camera.js";
 /**
  * The public Camera surface: the entity/identity from Camera.js plus the
  * directing helpers. This module (not Camera.ts) is what index exports as
@@ -19,7 +20,6 @@ import * as Timing from "./Timing.js";
  * `move`/`moveTo`.
  */
 export { Camera, identity } from "./Camera.js";
-export type { CameraState } from "./Camera.js";
 type AnyInstance = Instance.Instance<any, any, any>;
 /**
  * A helper target: an Instance (position read live each frame), an Effect

package/dist/CameraHelpers.js

@@ -68,11 +68,11 @@ const targetReader = Effect.fnUntraced(function* (target, offset) {
 const setPoi = (data, p) => Object.assign({}, data, { poiX: p.x, poiY: p.y, poiZ: p.z });
 // the camera's WORLD position: x/y are pan-from-viewport-center
 const worldPosition = Effect.fnUntraced(function* (cam) {
-    const { settings } = yield* Runner.Runner;
+    const { comp } = yield* Runner.Runner;
     const data = (yield* Scene.data(cam));
     return {
-        x: settings.width / 2 + data.x,
-        y: settings.height / 2 + data.y,
+        x: comp.width / 2 + data.x,
+        y: comp.height / 2 + data.y,
         z: data.z ?? 0,
     };
 });
@@ -162,8 +162,8 @@ const poiOrDie = (data) => {
 };
 const orbitImpl = Effect.fnUntraced(function* (camOrEffect, from, to, duration, timing) {
     const cam = yield* Instance.flatten(camOrEffect);
-    const { settings } = yield* Runner.Runner;
-    const origin = { x: settings.width / 2, y: settings.height / 2 };
+    const { comp } = yield* Runner.Runner;
+    const origin = { x: comp.width / 2, y: comp.height / 2 };
     const startData = (yield* Scene.data(cam));
     const poi = poiOrDie(startData);
     const world = {
@@ -197,8 +197,8 @@ export const orbitTo = dual((args) => Instance.isInstance(args[0]), ((cam, azimu
 export const orbit = dual((args) => Instance.isInstance(args[0]), orbitImpl);
 const dollyImpl = Effect.fnUntraced(function* (camOrEffect, from, to, duration, timing) {
     const cam = yield* Instance.flatten(camOrEffect);
-    const { settings } = yield* Runner.Runner;
-    const origin = { x: settings.width / 2, y: settings.height / 2 };
+    const { comp } = yield* Runner.Runner;
+    const origin = { x: comp.width / 2, y: comp.height / 2 };
     const startData = (yield* Scene.data(cam));
     const poi = poiOrDie(startData);
     const world = {

package/dist/Renderer.js

@@ -5,6 +5,7 @@ import * as Color from "./Color.js";
 import * as Projection from "./Projection.js";
 import { circleOfConfusion, quantizeSigma } from "./render/dof.js";
 import { builtinPaints } from "./render/shapes.js";
+import * as Group from "./shapes/Group.js";
 import { Hud } from "./shapes/Hud.js";
 // in frame data, a `children: string[]` field means child instance ids
 const childIdsOf = (data) => {
@@ -92,7 +93,10 @@ dpr = 1) => Effect.gen(function* () {
     // top tier. `inWorldContainer` marks any ordinary container above —
     // a Hud there would compose world offsets into screen coordinates,
     // which is incoherent and dies loudly.
-    const flatten = (id, offset, hud, inWorldContainer) => Effect.gen(function* () {
+    const flatten = (id, offset, hud, inWorldContainer, 
+    // where this node's paintables land: the top-level list, or an
+    // enclosing sub-composition's own sub-list
+    sink) => Effect.gen(function* () {
         if (visited.has(id)) {
             return yield* Effect.die(new Error(`Renderer: instance "${id}" is referenced more than once (duplicate parent or cycle)`));
         }
@@ -115,12 +119,50 @@ dpr = 1) => Effect.gen(function* () {
             z: offset.z + (data.z ?? 0),
         };
         const childIds = childIdsOf(entry.data).filter((childId) => isVisible(frame, childId));
+        // a SIZED container is a sub-composition (Scene.play's mount
+        // group, or any Group given bounds): its subtree collects into
+        // its own unit at the group's depth — clipped, backed, and
+        // transformed as one layer, AE-precomp-style
+        const isComp = Array.isArray(entry.data.children) &&
+            typeof data.width === "number" &&
+            typeof data.height === "number";
+        if (isComp) {
+            const proj = Projection.project(effectiveCamera, world, origin);
+            const subs = [];
+            yield* Effect.all(childIds.map((childId) => flatten(childId, world, subtreeHud, inWorldContainer || !subtreeHud, subs)));
+            const groupData = entry.data;
+            sink.push({
+                id,
+                entry,
+                projection: {
+                    screen: Projection.billboardAffine(proj, {
+                        x: data.x ?? 0,
+                        y: data.y ?? 0,
+                    }),
+                    depth: proj.depth,
+                    scale: proj.scale,
+                },
+                hud: subtreeHud,
+                comp: {
+                    width: data.width,
+                    height: data.height,
+                    ...(groupData.backgroundColor !== undefined
+                        ? { backgroundColor: groupData.backgroundColor }
+                        : {}),
+                    opacity: groupData.opacity ?? 1,
+                    transform: groupData.transform ?? Group.identityTransform,
+                    anchor: { x: proj.x, y: proj.y },
+                    subs,
+                },
+            });
+            return;
+        }
         if (childIds.length > 0) {
             // a pure container: contribute position, recurse, paint
             // nothing itself (the root, Groups, Huds). ponytail: only
             // translation composes down — a Group's 2D affine transform
             // is not yet threaded into child world coords.
-            yield* Effect.all(childIds.map((childId) => flatten(childId, world, subtreeHud, inWorldContainer || !subtreeHud)));
+            yield* Effect.all(childIds.map((childId) => flatten(childId, world, subtreeHud, inWorldContainer || !subtreeHud, sink)));
             return;
         }
         // a skeletal path leaf (Path): every command point is an
@@ -140,7 +182,7 @@ dpr = 1) => Effect.gen(function* () {
             // the segment branch does — path paints ignore it (their
             // geometry is already screen-space) but the field stays coherent
             const first = projected.subpaths[0]?.points[0] ?? origin;
-            paintables.push({
+            sink.push({
                 id,
                 entry,
                 projection: {
@@ -194,7 +236,7 @@ dpr = 1) => Effect.gen(function* () {
             // Upgrade: split the segment where its (linear) view depth
             // crosses DoF bucket boundaries → gradient blur along the
             // line plus per-piece sort keys.
-            paintables.push({
+            sink.push({
                 id,
                 entry,
                 projection: {
@@ -235,7 +277,7 @@ dpr = 1) => Effect.gen(function* () {
             // the tilted plane is entirely behind the near plane — cull
             return;
         }
-        paintables.push({
+        sink.push({
             id,
             entry,
             projection: {
@@ -257,15 +299,16 @@ dpr = 1) => Effect.gen(function* () {
     visited.add(frame.root);
     yield* Effect.all(childIdsOf(rootEntry.data)
         .filter((childId) => isVisible(frame, childId))
-        .map((childId) => flatten(childId, { x: 0, y: 0, z: 0 }, false, false)));
+        .map((childId) => flatten(childId, { x: 0, y: 0, z: 0 }, false, false, paintables)));
     // painter's order: two tiers — world content by depth (farthest
     // first), then HUD content by depth among itself, each with a stable
     // id tie-break so equal-depth paintables paint deterministically.
     // ponytail: naive O(n log n) per frame — swap for a spatial structure
     // only if a scene with thousands of objects proves it.
-    paintables.sort((a, b) => (a.hud ? 1 : 0) - (b.hud ? 1 : 0) ||
+    const byPaintOrder = (a, b) => (a.hud ? 1 : 0) - (b.hud ? 1 : 0) ||
         b.projection.depth - a.projection.depth ||
-        (a.id < b.id ? -1 : a.id > b.id ? 1 : 0));
+        (a.id < b.id ? -1 : a.id > b.id ? 1 : 0);
+    paintables.sort(byPaintOrder);
     const meta = {
         frameRate: frame.frameRate,
         width: frame.width,
@@ -292,12 +335,110 @@ dpr = 1) => Effect.gen(function* () {
             yield* Tvg.Scene.add(scene, bucketScene);
         }
     });
+    // paint one paintable into `target`: a leaf via its entity's paint fn,
+    // a sub-composition as one clipped nested scene (below)
+    const paintOne = (p, target) => Effect.gen(function* () {
+        if (p.comp !== undefined) {
+            return yield* paintComp(p, p.comp, target);
+        }
+        // the concrete paint fn for this entity name; the map is exhaustive
+        // over Entities by construction (PaintFunctions<Entities>). The
+        // specific member depends on the instance's entity, known only at
+        // runtime — hence the cast to the erased paint-fn type.
+        const paint = builtinPaints[p.entry.entity.name];
+        if (paint === undefined) {
+            return yield* Effect.die(new Error(`Renderer: no paint function for entity "${p.entry.entity.name}"`));
+        }
+        yield* paint({
+            entity: p.entry.entity,
+            id: p.id,
+            data: p.entry.data,
+            projection: p.projection,
+            canvas,
+            scene: target,
+            meta,
+        });
+    });
+    // A sub-composition paints as ONE layer: inner scene clipped to the
+    // bounds (background rect first, then the subtree in painter's order),
+    // outer scene carrying the group's transform and opacity — the clip
+    // lives inside, so the bounds move/scale WITH the unit, as an AE
+    // precomp layer's frame does.
+    const paintComp = (p, comp, target) => Effect.gen(function* () {
+        const scale = p.projection.scale;
+        // bounds start at the group's anchor: a comp's local space is
+        // top-left-anchored like every shape (world = screen at rest)
+        const w = comp.width * scale;
+        const h = comp.height * scale;
+        const x = comp.anchor.x;
+        const y = comp.anchor.y;
+        const outer = yield* Tvg.Scene.make();
+        const clipShape = yield* Tvg.Shape.make();
+        yield* Tvg.Shape.appendRect(clipShape, x, y, w, h);
+        yield* Tvg.Paint.clip(outer, clipShape);
+        if (comp.backgroundColor !== undefined) {
+            const { r, g, b, a } = Color.bytes(comp.backgroundColor);
+            if (a > 0) {
+                const bg = yield* Tvg.Shape.make();
+                yield* Tvg.Shape.appendRect(bg, x, y, w, h);
+                yield* Tvg.Shape.setFillColor(bg, r, g, b, a);
+                yield* Tvg.Scene.add(outer, bg);
+            }
+        }
+        // ponytail: the unit's content paints sharp — depth of field
+        // treats the comp as one layer at its anchor depth (like a
+        // tilted plane's quad); bucket inside the unit if a deep comp
+        // ever needs per-child blur.
+        for (const sub of [...comp.subs].sort(byPaintOrder)) {
+            if (sub.projection.scale <= 0 && sub.projection.quad === undefined) {
+                continue;
+            }
+            yield* paintOne(sub, outer);
+        }
+        if (!Group.isIdentityTransform(comp.transform)) {
+            // the group's local matrix conjugated into screen space about
+            // the BOUNDS CENTER (AE scales a precomp layer about its
+            // anchor, default the layer center):
+            // screen = T(c)·S(scale)·M·S(1/scale)·T(-c), c = bounds center
+            const cx = x + w / 2;
+            const cy = y + h / 2;
+            const t = (e, f) => ({
+                a: 1,
+                b: 0,
+                c: 0,
+                d: 1,
+                e,
+                f,
+            });
+            const s = (k) => ({
+                a: k,
+                b: 0,
+                c: 0,
+                d: k,
+                e: 0,
+                f: 0,
+            });
+            const m = [
+                t(cx, cy),
+                s(scale),
+                comp.transform,
+                s(1 / scale),
+                t(-cx, -cy),
+            ].reduce(Group.multiplyTransforms);
+            yield* Tvg.Paint.setTransform(outer, m);
+        }
+        if (comp.opacity < 1) {
+            yield* Tvg.Paint.setOpacity(outer, Math.round(Math.max(0, Math.min(1, comp.opacity)) * 255));
+        }
+        yield* Tvg.Scene.add(target, outer);
+    });
     // paint far→near. A paintable whose anchor is behind the camera
     // (scale <= 0) is culled here so paint functions never see an invalid
     // placement — EXCEPT a tilted plane carrying a quad: its polygon is
     // already near-plane-clipped, and it can be visible (near part in
     // front) while its anchor corner is behind.
-    for (const { id, entry, projection, hud } of paintables) {
+    for (const p of paintables) {
+        const { projection, hud } = p;
         if (projection.scale <= 0 && projection.quad === undefined) {
             continue;
         }
@@ -311,23 +452,7 @@ dpr = 1) => Effect.gen(function* () {
             bucketScene = sigma === 0 ? scene : yield* Tvg.Scene.make();
             bucketSigma = sigma;
         }
-        // the concrete paint fn for this entity name; the map is exhaustive
-        // over Entities by construction (PaintFunctions<Entities>). The
-        // specific member depends on the instance's entity, known only at
-        // runtime — hence the cast to the erased paint-fn type.
-        const paint = builtinPaints[entry.entity.name];
-        if (paint === undefined) {
-            return yield* Effect.die(new Error(`Renderer: no paint function for entity "${entry.entity.name}"`));
-        }
-        yield* paint({
-            entity: entry.entity,
-            id,
-            data: entry.data,
-            projection,
-            canvas,
-            scene: bucketScene,
-            meta,
-        });
+        yield* paintOne(p, bucketScene);
     }
     yield* closeBucket;
 });
@@ -368,7 +493,9 @@ export const render = (frame, options) => Effect.gen(function* () {
     }
     yield* Tvg.Canvas.add(canvas, scene);
     yield* Tvg.Canvas.update(canvas);
-    yield* Tvg.Canvas.draw(canvas);
+    // clear the target buffer: with a transparent background nothing else
+    // overwrites the previous frame's (or uninitialized) pixels
+    yield* Tvg.Canvas.draw(canvas, true);
     yield* Tvg.Canvas.sync(canvas);
     const buffer = yield* Tvg.Canvas.render(canvas);
     return {

package/dist/Runner.d.ts

@@ -15,13 +15,12 @@ export declare const ROOT_ID = "root";
 export type Seed = number | string;
 /** the fixed default: scenes are deterministic even with no seed set */
 export declare const defaultSeed: Seed;
+/**
+ * Playback settings — how the movie RUNS. What the movie IS (resolution,
+ * background) lives on the root scene as its composition config.
+ */
 export type Settings = {
     frameRate: number;
-    /** output resolution — carried on every frame so renderers can size themselves */
-    width: number;
-    height: number;
-    /** canvas background — carried on every frame so renderers can paint it (default a near-black, not pure #000) */
-    backgroundColor: Color.Color;
     /**
      * seeds the scene's pseudo-random service (effect's Random via
      * withSeed); the fixed default keeps default-constructed scenes
@@ -37,6 +36,18 @@ export type Settings = {
      */
     maxFrames: number;
 };
+/**
+ * A scene's composition config, After Effects–style: what the comp IS.
+ * The runner inherits the ROOT scene's config; a nested scene keeps its
+ * own as its bounds (see Scene.play).
+ */
+export type CompConfig = {
+    width: number;
+    height: number;
+    /** carried on every frame so renderers can paint it; transparent = nothing painted */
+    backgroundColor: Color.Color;
+};
+export declare const defaultComp: CompConfig;
 export type GroupInstance = Instance.Of<typeof Group>;
 /**
  * A child in a polymorphic `children` list: a plain string (→ a `Text`),
@@ -79,38 +90,47 @@ export declare const CurrentParent: Context.Reference<Instance.Instance<"shapes/
         readonly e: Schema.Number;
         readonly f: Schema.Number;
     }>>;
+    width: Schema.optionalKey<Schema.Number>;
+    height: Schema.optionalKey<Schema.Number>;
+    backgroundColor: Schema.optionalKey<typeof Color.Color>;
     children: Schema.withConstructorDefault<Schema.$Array<Schema.String>>;
 }>, {
-    "~position": Entity.TraitLens<Schema.Struct.ReadonlySide<{
-        x: Schema.withConstructorDefault<Schema.Number>;
-        y: Schema.withConstructorDefault<Schema.Number>;
-        z: Schema.withConstructorDefault<Schema.Number>;
-        opacity: Schema.withConstructorDefault<Schema.Number>;
-        transform: Schema.withConstructorDefault<Schema.Struct<{
+    "~position": Entity.TraitLens<{
+        readonly x: number;
+        readonly y: number;
+        readonly z: number;
+        readonly opacity: number;
+        readonly transform: Schema.Struct.ReadonlySide<{
             readonly a: Schema.Number;
             readonly b: Schema.Number;
             readonly c: Schema.Number;
             readonly d: Schema.Number;
             readonly e: Schema.Number;
             readonly f: Schema.Number;
-        }>>;
-        children: Schema.withConstructorDefault<Schema.$Array<Schema.String>>;
-    }, "Type">, Entity.Position>;
-    "~opacity": Entity.TraitLens<Schema.Struct.ReadonlySide<{
-        x: Schema.withConstructorDefault<Schema.Number>;
-        y: Schema.withConstructorDefault<Schema.Number>;
-        z: Schema.withConstructorDefault<Schema.Number>;
-        opacity: Schema.withConstructorDefault<Schema.Number>;
-        transform: Schema.withConstructorDefault<Schema.Struct<{
+        }, "Type">;
+        readonly width?: number;
+        readonly height?: number;
+        readonly backgroundColor?: Color.Color;
+        readonly children: readonly string[];
+    }, Entity.Position>;
+    "~opacity": Entity.TraitLens<{
+        readonly x: number;
+        readonly y: number;
+        readonly z: number;
+        readonly opacity: number;
+        readonly transform: Schema.Struct.ReadonlySide<{
             readonly a: Schema.Number;
             readonly b: Schema.Number;
             readonly c: Schema.Number;
             readonly d: Schema.Number;
             readonly e: Schema.Number;
             readonly f: Schema.Number;
-        }>>;
-        children: Schema.withConstructorDefault<Schema.$Array<Schema.String>>;
-    }, "Type">, number>;
+        }, "Type">;
+        readonly width?: number;
+        readonly height?: number;
+        readonly backgroundColor?: Color.Color;
+        readonly children: readonly string[];
+    }, number>;
 }> | null>;
 /**
  * A branch of animation as the runner tracks it: its fiber and its
@@ -135,50 +155,57 @@ declare const Runner_base: Context.ServiceClass<Runner, "Runner", {
             readonly e: Schema.Number;
             readonly f: Schema.Number;
         }>>;
+        width: Schema.optionalKey<Schema.Number>;
+        height: Schema.optionalKey<Schema.Number>;
+        backgroundColor: Schema.optionalKey<typeof Color.Color>;
         children: Schema.withConstructorDefault<Schema.$Array<Schema.String>>;
     }>, {
-        "~position": Entity.TraitLens<Schema.Struct.ReadonlySide<{
-            x: Schema.withConstructorDefault<Schema.Number>;
-            y: Schema.withConstructorDefault<Schema.Number>;
-            z: Schema.withConstructorDefault<Schema.Number>;
-            opacity: Schema.withConstructorDefault<Schema.Number>;
-            transform: Schema.withConstructorDefault<Schema.Struct<{
+        "~position": Entity.TraitLens<{
+            readonly x: number;
+            readonly y: number;
+            readonly z: number;
+            readonly opacity: number;
+            readonly transform: Schema.Struct.ReadonlySide<{
                 readonly a: Schema.Number;
                 readonly b: Schema.Number;
                 readonly c: Schema.Number;
                 readonly d: Schema.Number;
                 readonly e: Schema.Number;
                 readonly f: Schema.Number;
-            }>>;
-            children: Schema.withConstructorDefault<Schema.$Array<Schema.String>>;
-        }, "Type">, Entity.Position>;
-        "~opacity": Entity.TraitLens<Schema.Struct.ReadonlySide<{
-            x: Schema.withConstructorDefault<Schema.Number>;
-            y: Schema.withConstructorDefault<Schema.Number>;
-            z: Schema.withConstructorDefault<Schema.Number>;
-            opacity: Schema.withConstructorDefault<Schema.Number>;
-            transform: Schema.withConstructorDefault<Schema.Struct<{
+            }, "Type">;
+            readonly width?: number;
+            readonly height?: number;
+            readonly backgroundColor?: Color.Color;
+            readonly children: readonly string[];
+        }, Entity.Position>;
+        "~opacity": Entity.TraitLens<{
+            readonly x: number;
+            readonly y: number;
+            readonly z: number;
+            readonly opacity: number;
+            readonly transform: Schema.Struct.ReadonlySide<{
                 readonly a: Schema.Number;
                 readonly b: Schema.Number;
                 readonly c: Schema.Number;
                 readonly d: Schema.Number;
                 readonly e: Schema.Number;
                 readonly f: Schema.Number;
-            }>>;
-            children: Schema.withConstructorDefault<Schema.$Array<Schema.String>>;
-        }, "Type">, number>;
+            }, "Type">;
+            readonly width?: number;
+            readonly height?: number;
+            readonly backgroundColor?: Color.Color;
+            readonly children: readonly string[];
+        }, number>;
     }>;
     instantiate: <Name extends string, Data extends Schema.Top, Traits extends Partial<Entity.EntityTraits<Data["Type"]>>>(entity: Entity.Entity<Name, Data, Traits>, props: InstantiateProps<Data["~type.make.in"]>) => Effect.Effect<Instance.Instance<Name, Data, Traits>, never, Runner>;
     appendChild: (parent: GroupInstance, child: Instance.Instance) => void;
     removeChild: (parent: GroupInstance, child: Instance.Instance) => void;
     settings: {
         frameRate: number;
-        width: number;
-        height: number;
-        backgroundColor: Color.Color;
         seed: Seed;
         maxFrames: number;
     };
+    comp: CompConfig;
     getDataUnsafe: <Name extends string, Data extends Schema.Top>(instance: Instance.Instance<Name, Data>) => Data["Type"] | null;
     setDataUnsafe: <Name extends string, Data extends Schema.Top>(instance: Instance.Instance<Name, Data>, data: unknown) => void;
     state: Effect.Effect<{
@@ -279,7 +306,7 @@ declare const Runner_base: Context.ServiceClass<Runner, "Runner", {
     recordFailure: (cause: Cause.Cause<unknown>) => void;
     failureCause: () => Cause.Cause<unknown> | undefined;
 }> & {
-    readonly make: (settings?: Partial<Settings> | undefined) => Effect.Effect<{
+    readonly make: (settings?: Partial<Settings> | undefined, comp?: CompConfig | undefined) => Effect.Effect<{
         root: Instance.Instance<"shapes/Group", Schema.Struct<{
             x: Schema.withConstructorDefault<Schema.Number>;
             y: Schema.withConstructorDefault<Schema.Number>;
@@ -293,50 +320,57 @@ declare const Runner_base: Context.ServiceClass<Runner, "Runner", {
                 readonly e: Schema.Number;
                 readonly f: Schema.Number;
             }>>;
+            width: Schema.optionalKey<Schema.Number>;
+            height: Schema.optionalKey<Schema.Number>;
+            backgroundColor: Schema.optionalKey<typeof Color.Color>;
             children: Schema.withConstructorDefault<Schema.$Array<Schema.String>>;
         }>, {
-            "~position": Entity.TraitLens<Schema.Struct.ReadonlySide<{
-                x: Schema.withConstructorDefault<Schema.Number>;
-                y: Schema.withConstructorDefault<Schema.Number>;
-                z: Schema.withConstructorDefault<Schema.Number>;
-                opacity: Schema.withConstructorDefault<Schema.Number>;
-                transform: Schema.withConstructorDefault<Schema.Struct<{
+            "~position": Entity.TraitLens<{
+                readonly x: number;
+                readonly y: number;
+                readonly z: number;
+                readonly opacity: number;
+                readonly transform: Schema.Struct.ReadonlySide<{
                     readonly a: Schema.Number;
                     readonly b: Schema.Number;
                     readonly c: Schema.Number;
                     readonly d: Schema.Number;
                     readonly e: Schema.Number;
                     readonly f: Schema.Number;
-                }>>;
-                children: Schema.withConstructorDefault<Schema.$Array<Schema.String>>;
-            }, "Type">, Entity.Position>;
-            "~opacity": Entity.TraitLens<Schema.Struct.ReadonlySide<{
-                x: Schema.withConstructorDefault<Schema.Number>;
-                y: Schema.withConstructorDefault<Schema.Number>;
-                z: Schema.withConstructorDefault<Schema.Number>;
-                opacity: Schema.withConstructorDefault<Schema.Number>;
-                transform: Schema.withConstructorDefault<Schema.Struct<{
+                }, "Type">;
+                readonly width?: number;
+                readonly height?: number;
+                readonly backgroundColor?: Color.Color;
+                readonly children: readonly string[];
+            }, Entity.Position>;
+            "~opacity": Entity.TraitLens<{
+                readonly x: number;
+                readonly y: number;
+                readonly z: number;
+                readonly opacity: number;
+                readonly transform: Schema.Struct.ReadonlySide<{
                     readonly a: Schema.Number;
                     readonly b: Schema.Number;
                     readonly c: Schema.Number;
                     readonly d: Schema.Number;
                     readonly e: Schema.Number;
                     readonly f: Schema.Number;
-                }>>;
-                children: Schema.withConstructorDefault<Schema.$Array<Schema.String>>;
-            }, "Type">, number>;
+                }, "Type">;
+                readonly width?: number;
+                readonly height?: number;
+                readonly backgroundColor?: Color.Color;
+                readonly children: readonly string[];
+            }, number>;
         }>;
         instantiate: <Name extends string, Data extends Schema.Top, Traits extends Partial<Entity.EntityTraits<Data["Type"]>>>(entity: Entity.Entity<Name, Data, Traits>, props: InstantiateProps<Data["~type.make.in"]>) => Effect.Effect<Instance.Instance<Name, Data, Traits>, never, Runner>;
         appendChild: (parent: GroupInstance, child: Instance.Instance) => void;
         removeChild: (parent: GroupInstance, child: Instance.Instance) => void;
         settings: {
             frameRate: number;
-            width: number;
-            height: number;
-            backgroundColor: Color.Color;
             seed: Seed;
             maxFrames: number;
         };
+        comp: CompConfig;
         getDataUnsafe: <Name extends string, Data extends Schema.Top>(instance: Instance.Instance<Name, Data>) => Data["Type"] | null;
         setDataUnsafe: <Name extends string, Data extends Schema.Top>(instance: Instance.Instance<Name, Data>, data: unknown) => void;
         state: Effect.Effect<{

package/dist/Runner.js

@@ -13,13 +13,18 @@ export const TypeId = "~motion/SceneRunner";
 export const ROOT_ID = "root";
 /** the fixed default: scenes are deterministic even with no seed set */
 export const defaultSeed = "effect-motion";
+export const defaultComp = {
+    width: 1920,
+    height: 1080,
+    backgroundColor: Color.transparent,
+};
 /**
  * The ambient mount parent for `instantiate` — provided per scene
  * evaluation (`Scene.play({ parent })`); `null` means the runner root.
  */
 export const CurrentParent = Context.Reference("motion/Runner/CurrentParent", { defaultValue: () => null });
 export class Runner extends Context.Service()("Runner", {
-    make: Effect.fnUntraced(function* (settings = {}) {
+    make: Effect.fnUntraced(function* (settings = {}, comp = defaultComp) {
         const instances = {};
         // each instance's current parent group id (or null = detached / root).
         // Tracked so appendChild detaches from the old parent in O(1) rather
@@ -66,9 +71,6 @@ export class Runner extends Context.Service()("Runner", {
         const resolvedSettings = {
             ...settings,
             frameRate: settings.frameRate ?? 60,
-            width: settings.width ?? 500,
-            height: settings.height ?? 300,
-            backgroundColor: settings.backgroundColor ?? Color.rgba(22, 22, 29),
             seed: settings.seed ?? defaultSeed,
             maxFrames: settings.maxFrames ?? 36_000,
         };
@@ -80,13 +82,13 @@ export class Runner extends Context.Service()("Runner", {
         // camera is present from the start, so `depth`/zoom work with no author
         // ceremony; `setCamera` swaps which instance is active.
         const camera = Instance.make(Camera, "camera");
-        setDataUnsafe(camera, identity(resolvedSettings.width));
+        setDataUnsafe(camera, identity(comp.width));
         let activeCameraId = camera.id;
         const cameraState = () => {
             const data = instances[activeCameraId]?.data;
             // a destroyed active camera falls back to identity rather than dying:
             // the view is not scene-critical state
-            return data ?? identity(resolvedSettings.width);
+            return data ?? identity(comp.width);
         };
         // append `id` to a group's children and record it as the child's parent
         const attach = (parent, id) => {
@@ -172,8 +174,7 @@ export class Runner extends Context.Service()("Runner", {
                         return undefined;
                     }
                     const p = props;
-                    const focalLength = p.focalLength ??
-                        Projection.defaultFocalLength(resolvedSettings.width);
+                    const focalLength = p.focalLength ?? Projection.defaultFocalLength(comp.width);
                     return {
                         focalLength,
                         z: p.z ?? focalLength,
@@ -218,6 +219,8 @@ export class Runner extends Context.Service()("Runner", {
             // leaving it detached from the tree (still alive, just unmounted)
             removeChild,
             settings: resolvedSettings,
+            // the root scene's composition config (resolution + background)
+            comp,
             getDataUnsafe,
             setDataUnsafe,
             state: Effect.sync(() => {
@@ -229,9 +232,9 @@ export class Runner extends Context.Service()("Runner", {
                     instances: renderable,
                     root: ROOT_ID,
                     frameRate: resolvedSettings.frameRate,
-                    width: resolvedSettings.width,
-                    height: resolvedSettings.height,
-                    backgroundColor: resolvedSettings.backgroundColor,
+                    width: comp.width,
+                    height: comp.height,
+                    backgroundColor: comp.backgroundColor,
                     camera: cameraState(),
                 };
             }),

package/dist/Scene.d.ts

@@ -17,13 +17,21 @@ export declare const TypeId: "~motion/Scene";
 export interface Scene<E = never, R = never> {
     readonly [TypeId]: typeof TypeId;
     readonly runner: Effect.Effect<void, E, R | Scope.Scope>;
+    /**
+     * composition config, After Effects–style: what this comp IS. The
+     * runner inherits the ROOT scene's; a played scene keeps its own as
+     * its bounds (see {@link play}). Unlike annotations, read by the runtime.
+     */
+    readonly width: number;
+    readonly height: number;
+    readonly backgroundColor: Color.Color;
     /** tooling-facing metadata; never read by the runtime */
     readonly annotations: Context.Context<never>;
     annotate<I, S>(key: Context.Key<I, S>, value: S): Scene<E, R>;
     annotateMerge(context: Context.Context<never>): Scene<E, R>;
 }
 export type AnyScene = Scene<never, never>;
-export declare const make: <const Eff extends Effect.Effect<any, any, any>, const AEff>(f: () => Generator<Eff, AEff, never>) => Scene<[Eff] extends [never] ? never : [Eff] extends [Effect.Effect<infer _A, infer E, infer _R>] ? E : never, [Eff] extends [never] ? never : [Eff] extends [Effect.Effect<infer _A, infer _E, infer R>] ? R : never>;
+export declare const make: <const Eff extends Effect.Effect<any, any, any>, const AEff>(f: () => Generator<Eff, AEff, never>, meta?: Partial<Runner.CompConfig>) => Scene<[Eff] extends [never] ? never : [Eff] extends [Effect.Effect<infer _A, infer E, infer _R>] ? E : never, [Eff] extends [never] ? never : [Eff] extends [Effect.Effect<infer _A, infer _E, infer R>] ? R : never>;
 export declare const instantiate: <Name extends string, Data extends Schema.Top, Traits extends Partial<Entity.EntityTraits<Data["Type"]>>>(entity: Entity.Entity<Name, Data, Traits>, props: Runner.InstantiateProps<Data["~type.make.in"]>) => Effect.Effect<Instance.Instance<Name, Data, Traits>, never, Runner.Runner>;
 export declare const tick: Effect.Effect<void, never, Runner.Runner>;
 /**
@@ -49,7 +57,8 @@ export interface Frame<Entities extends Entity.AnyEntity = Entity.AnyEntity> {
     instances: Record<string, EntriesFromEntities<Entities>>;
     /** id of the root group (conventionally "root"); never rendered itself */
     root: string;
-    /** render metadata from the runner settings — a frame is self-describing */
+    /** render metadata — frameRate from the runner settings, resolution and
+     * background from the ROOT scene's comp config; a frame is self-describing */
     frameRate: number;
     width: number;
     height: number;
@@ -82,12 +91,11 @@ export declare const appendChild: (parent: Runner.GroupInstance, child: Instance
 export declare const removeChild: (parent: Runner.GroupInstance, child: Instance.Instance) => Effect.Effect<void, never, Runner.Runner>;
 export declare const settings: () => Effect.Effect<{
     frameRate: number;
-    width: number;
-    height: number;
-    backgroundColor: Color.Color;
     seed: Runner.Seed;
     maxFrames: number;
 }, never, Runner.Runner>;
+/** the movie's composition config — the ROOT scene's width/height/background */
+export declare const comp: () => Effect.Effect<Runner.CompConfig, never, Runner.Runner>;
 /**
  * The active camera instance — an ordinary instance carrying `~position`
  * (world x/y/z), Euler orientation (`rotX`/`rotY`/`rotZ`), and
@@ -217,21 +225,35 @@ export declare const fork: <A, E = never, R = never>(effect: Effect.Effect<A, E,
  */
 export declare const background: <A, E = never, R = never>(effect: Effect.Effect<A, E, R>) => Effect.Effect<BranchHandle<A, E>, never, Runner.Runner | Exclude<Exclude<R, never>, Phaser.Phaser>>;
 export interface PlayOptions {
-    /** group to mount the scene's instances under (default: the root) */
+    /** group to mount the child's bounds group under (default: the ambient parent) */
     readonly parent?: Runner.GroupInstance;
     /** seed for this evaluation (default: the movie's seed) */
     readonly seed?: Runner.Seed;
 }
+/**
+ * A played scene's branch handle plus its mount group — the child comp as
+ * one unit. Move/fade the group (trait lenses) or scale it (transform
+ * operations) to transform the whole nested scene, bounds included.
+ */
+export interface PlayHandle<A = void, E = never> extends BranchHandle<A, E> {
+    readonly group: Runner.GroupInstance;
+}
 /**
  * Play a scene as a branch of the current scene — the explicit door to
- * nesting. The child shares the movie's runner, phaser, frame rate, and
- * frame cap, and gets its own scope, branch handle, mount parent, and a
- * FRESH seeded Random stream: `play(scene)` inside a movie seeded `S`
- * animates exactly like `run(scene, { seed: S })` standalone. Awaited
- * like a fork — `yield* handle.finished` for sequential nesting, or
- * don't await for concurrent scenes.
+ * nesting, After Effects–precomp-style. The child shares the movie's
+ * runner, phaser, frame rate, and frame cap, and gets its own scope,
+ * branch handle, and a FRESH seeded Random stream: `play(scene)` inside a
+ * movie seeded `S` animates exactly like `run(scene, { seed: S })`
+ * standalone. Each evaluation mounts the child under an implicit group
+ * carrying the child scene's bounds (width/height/backgroundColor):
+ * content clips to them, a non-transparent background paints within them,
+ * and the group is placed so the child's bounds CENTER in the enclosing
+ * comp (the movie, or the enclosing played scene) — a child smaller or
+ * bigger than the movie renders centered. Awaited like a fork —
+ * `yield* handle.finished` for sequential nesting, or don't await for
+ * concurrent scenes.
  */
-export declare const play: <E, R>(scene: Scene<E, R>, options?: PlayOptions) => Effect.Effect<BranchHandle<void, E>, never, Runner.Runner | Exclude<R, Scope.Scope>>;
+export declare const play: <E, R>(scene: Scene<E, R>, options?: PlayOptions) => Effect.Effect<PlayHandle<void, E>, never, Runner.Runner | Exclude<R, Scope.Scope>>;
 /**
  * Run effects in lockstep parallel, sharing frame phases — the public
  * counterpart to the low-level `Phaser.all`. Takes no schedule: pacing a

package/dist/Scene.js

@@ -7,18 +7,22 @@ import * as Random from "effect/Random";
 import * as Stream from "effect/Stream";
 import * as Phaser from "./Phaser.js";
 import * as Runner from "./Runner.js";
+import { Group } from "./shapes/Group.js";
 import * as Time from "./Time.js";
 export const TypeId = "~motion/Scene";
-export const make = (f) => {
-    return makeScene(Effect.scoped(Effect.gen(f)), Context.empty());
+export const make = (f, meta = {}) => {
+    return makeScene(Effect.scoped(Effect.gen(f)), Context.empty(), meta);
 };
 // annotate/annotateMerge return new scene values sharing the same body
-const makeScene = (runnerEffect, annotations) => ({
+const makeScene = (runnerEffect, annotations, meta) => ({
     [TypeId]: TypeId,
     runner: runnerEffect,
     annotations,
-    annotate: (key, value) => makeScene(runnerEffect, Context.add(annotations, key, value)),
-    annotateMerge: (context) => makeScene(runnerEffect, Context.merge(annotations, context)),
+    width: meta.width ?? Runner.defaultComp.width,
+    height: meta.height ?? Runner.defaultComp.height,
+    backgroundColor: meta.backgroundColor ?? Runner.defaultComp.backgroundColor,
+    annotate: (key, value) => makeScene(runnerEffect, Context.add(annotations, key, value), meta),
+    annotateMerge: (context) => makeScene(runnerEffect, Context.merge(annotations, context), meta),
 });
 export const instantiate = Effect.fnUntraced(function* (entity, props) {
     const runner = yield* Runner.Runner;
@@ -76,7 +80,12 @@ export const step = (runningScene) => Effect.gen(function* () {
     return (yield* runningScene.runner.state);
 });
 export const run = (scene, settings = {}) => Effect.gen(function* () {
-    const runner = yield* Runner.Runner.make(settings);
+    // the runner inherits the ROOT scene's composition config
+    const runner = yield* Runner.Runner.make(settings, {
+        width: scene.width,
+        height: scene.height,
+        backgroundColor: scene.backgroundColor,
+    });
     let done = false;
     // the body is itself a branch: Scene.finish inside it demotes the
     // root (count--) while the body keeps ticking as a tail
@@ -189,6 +198,11 @@ export const settings = Effect.fnUntraced(function* () {
     const runner = yield* Runner.Runner;
     return runner.settings;
 });
+/** the movie's composition config — the ROOT scene's width/height/background */
+export const comp = Effect.fnUntraced(function* () {
+    const runner = yield* Runner.Runner;
+    return runner.comp;
+});
 /**
  * The active camera instance — an ordinary instance carrying `~position`
  * (world x/y/z), Euler orientation (`rotX`/`rotY`/`rotZ`), and
@@ -353,24 +367,57 @@ export const background = (effect) => Effect.gen(function* () {
 });
 /**
  * Play a scene as a branch of the current scene — the explicit door to
- * nesting. The child shares the movie's runner, phaser, frame rate, and
- * frame cap, and gets its own scope, branch handle, mount parent, and a
- * FRESH seeded Random stream: `play(scene)` inside a movie seeded `S`
- * animates exactly like `run(scene, { seed: S })` standalone. Awaited
- * like a fork — `yield* handle.finished` for sequential nesting, or
- * don't await for concurrent scenes.
+ * nesting, After Effects–precomp-style. The child shares the movie's
+ * runner, phaser, frame rate, and frame cap, and gets its own scope,
+ * branch handle, and a FRESH seeded Random stream: `play(scene)` inside a
+ * movie seeded `S` animates exactly like `run(scene, { seed: S })`
+ * standalone. Each evaluation mounts the child under an implicit group
+ * carrying the child scene's bounds (width/height/backgroundColor):
+ * content clips to them, a non-transparent background paints within them,
+ * and the group is placed so the child's bounds CENTER in the enclosing
+ * comp (the movie, or the enclosing played scene) — a child smaller or
+ * bigger than the movie renders centered. Awaited like a fork —
+ * `yield* handle.finished` for sequential nesting, or don't await for
+ * concurrent scenes.
  */
 export const play = (scene, options) => Effect.gen(function* () {
     const runner = yield* Runner.Runner;
-    const mounted = options?.parent === undefined
-        ? scene.runner.pipe(Effect.scoped)
-        : scene.runner.pipe(Effect.scoped, Effect.provideService(Runner.CurrentParent, options.parent));
-    const body = mounted.pipe(
+    // default placement: the child's bounds centered in the enclosing
+    // comp — the ambient (or explicit) parent's bounds when it is a
+    // sized group, the movie's comp at the root. An unsized parent
+    // group has no bounds to center in; the child mounts at its origin.
+    const ambient = options?.parent ?? (yield* Runner.CurrentParent);
+    const enclosing = (() => {
+        if (ambient === null) {
+            return runner.comp;
+        }
+        const data = runner.getDataUnsafe(ambient);
+        return data !== null &&
+            typeof data.width === "number" &&
+            typeof data.height === "number"
+            ? { width: data.width, height: data.height }
+            : null;
+    })();
+    // the child's comp bounds ride on the mount group: the renderer clips
+    // the subtree to them and paints the child's background within them
+    const group = yield* runner
+        .instantiate(Group, {
+        x: enclosing === null ? 0 : (enclosing.width - scene.width) / 2,
+        y: enclosing === null ? 0 : (enclosing.height - scene.height) / 2,
+        width: scene.width,
+        height: scene.height,
+        backgroundColor: scene.backgroundColor,
+    })
+        .pipe(Effect.provideService(Runner.CurrentParent, ambient));
+    const body = scene.runner.pipe(Effect.scoped, 
+    // the child's instances mount under its bounds group
+    Effect.provideService(Runner.CurrentParent, group), 
     // fresh stream per evaluation: nested playback must equal a
     // standalone run with the same seed, never inherit the parent's
     // stream position
     Random.withSeed(options?.seed ?? runner.settings.seed));
-    return (yield* forkBranch(runner, body, "fork"));
+    const handle = (yield* forkBranch(runner, body, "fork"));
+    return { ...handle, group };
 });
 /**
  * Run effects in lockstep parallel, sharing frame phases — the public

package/dist/demo.js

@@ -9,6 +9,12 @@ import * as PngExporter from "./PngExporter.js";
 import * as Renderer from "./Renderer.js";
 import * as Scene from "./Scene.js";
 import * as Shapes from "./Shapes.js";
+// the demo's comp config — the old runner defaults, now explicit on the scene
+const demoComp = {
+    width: 500,
+    height: 300,
+    backgroundColor: Color.rgba(22, 22, 29),
+};
 // children live in the group's local coordinates: one motion moves them all
 export const scene = Scene.make(function* () {
     const duo = yield* Scene.instantiate(Shapes.Group, {
@@ -31,7 +37,7 @@ export const scene = Scene.make(function* () {
     });
     yield* Motion.wait("1.5 seconds");
     yield* duo.pipe(Motion.moveTo({ x: 380 }, "1.5 seconds", "easeInOutCubic"), Motion.moveTo({ x: 70 }, "1.5 seconds", "easeInOutCubic"), Motion.wait("1.5 seconds"), Physics.springTo({ y: 80 }, "jump"), Motion.fadeTo(0.15, "1 second"));
-});
+}, demoComp);
 // schedule-driven composition: a background pulse loops for the scene's
 // duration while three staggered dots define its actual length
 export const staggered = Scene.make(function* () {
@@ -49,11 +55,11 @@ export const staggered = Scene.make(function* () {
         yield* Motion.tweenTo(circle, { x: x + 300 }, "1 second", "easeInOutCubic");
     });
     yield* Scene.stagger([dot(0), dot(25), dot(50)], Schedule.spaced("250 millis"));
-});
+}, demoComp);
 // render the middle frame of the duo scene to a PNG through the single ThorVG
 // renderer (Node adapter) — the end-to-end path: Scene.stream → renderToPng.
 const movie = Effect.gen(function* () {
-    const frames = yield* Scene.stream(scene, { width: 500, height: 300 }).pipe(Stream.runCollect);
+    const frames = yield* Scene.stream(scene).pipe(Stream.runCollect);
     const list = [...frames];
     const mid = list[Math.floor(list.length / 2)];
     const framebuffer = yield* Renderer.render(mid);

package/dist/particles/simulate.js

@@ -51,8 +51,8 @@ const run = Effect.fnUntraced(function* (instance, duration, emission) {
     // fill spreads across a region: the field's own if set, else the frame
     const current = yield* Scene.data(instance);
     const region = {
-        w: current.region?.w ?? runner.settings.width,
-        h: current.region?.h ?? runner.settings.height,
+        w: current.region?.w ?? runner.comp.width,
+        h: current.region?.h ?? runner.comp.height,
     };
     for (let i = 1; i <= frames; i++) {
         const n = birthsForFrame(emission, i, fps);

package/dist/shapes/Group.d.ts

@@ -1,4 +1,5 @@
 import * as Schema from "effect/Schema";
+import * as Color from "../Color.js";
 import * as Entity from "../Entity.js";
 export declare const TransformMatrix: Schema.Struct<{
     readonly a: Schema.Number;
@@ -74,38 +75,47 @@ export declare const Group: Entity.Entity<"shapes/Group", Schema.Struct<{
         readonly e: Schema.Number;
         readonly f: Schema.Number;
     }>>;
+    width: Schema.optionalKey<Schema.Number>;
+    height: Schema.optionalKey<Schema.Number>;
+    backgroundColor: Schema.optionalKey<typeof Color.Color>;
     children: Schema.withConstructorDefault<Schema.$Array<Schema.String>>;
 }>, {
-    "~position": Entity.TraitLens<Schema.Struct.ReadonlySide<{
-        x: Schema.withConstructorDefault<Schema.Number>;
-        y: Schema.withConstructorDefault<Schema.Number>;
-        z: Schema.withConstructorDefault<Schema.Number>;
-        opacity: Schema.withConstructorDefault<Schema.Number>;
-        transform: Schema.withConstructorDefault<Schema.Struct<{
+    "~position": Entity.TraitLens<{
+        readonly x: number;
+        readonly y: number;
+        readonly z: number;
+        readonly opacity: number;
+        readonly transform: Schema.Struct.ReadonlySide<{
             readonly a: Schema.Number;
             readonly b: Schema.Number;
             readonly c: Schema.Number;
             readonly d: Schema.Number;
             readonly e: Schema.Number;
             readonly f: Schema.Number;
-        }>>;
-        children: Schema.withConstructorDefault<Schema.$Array<Schema.String>>;
-    }, "Type">, Entity.Position>;
-    "~opacity": Entity.TraitLens<Schema.Struct.ReadonlySide<{
-        x: Schema.withConstructorDefault<Schema.Number>;
-        y: Schema.withConstructorDefault<Schema.Number>;
-        z: Schema.withConstructorDefault<Schema.Number>;
-        opacity: Schema.withConstructorDefault<Schema.Number>;
-        transform: Schema.withConstructorDefault<Schema.Struct<{
+        }, "Type">;
+        readonly width?: number;
+        readonly height?: number;
+        readonly backgroundColor?: Color.Color;
+        readonly children: readonly string[];
+    }, Entity.Position>;
+    "~opacity": Entity.TraitLens<{
+        readonly x: number;
+        readonly y: number;
+        readonly z: number;
+        readonly opacity: number;
+        readonly transform: Schema.Struct.ReadonlySide<{
             readonly a: Schema.Number;
             readonly b: Schema.Number;
             readonly c: Schema.Number;
             readonly d: Schema.Number;
             readonly e: Schema.Number;
             readonly f: Schema.Number;
-        }>>;
-        children: Schema.withConstructorDefault<Schema.$Array<Schema.String>>;
-    }, "Type">, number>;
+        }, "Type">;
+        readonly width?: number;
+        readonly height?: number;
+        readonly backgroundColor?: Color.Color;
+        readonly children: readonly string[];
+    }, number>;
 }>;
 /** The group's x/y position composed outside its normalized local transform. */
 export declare const resolvedTransform: (data: {

package/dist/shapes/Group.js

@@ -1,6 +1,7 @@
 import * as Effect from "effect/Effect";
 import * as Schema from "effect/Schema";
 import * as SchemaGetter from "effect/SchemaGetter";
+import * as Color from "../Color.js";
 import * as Entity from "../Entity.js";
 import * as Shape2D from "./Shape2D.js";
 export const TransformMatrix = Schema.Struct({
@@ -57,6 +58,12 @@ const fields = {
     ...Shape2D.position,
     ...Shape2D.opacity,
     transform: TransformMatrix.pipe(Schema.withConstructorDefault(Effect.succeed(identityTransform))),
+    // comp bounds (Scene.play mount groups carry the child comp's): a SIZED
+    // group clips its subtree to them, paints a non-transparent
+    // backgroundColor within them, and renders as one unit (AE precomp)
+    width: Schema.optionalKey(Schema.Number),
+    height: Schema.optionalKey(Schema.Number),
+    backgroundColor: Schema.optionalKey(Color.Color),
     children: Schema.Array(Schema.String).pipe(Schema.withConstructorDefault(Effect.sync(() => []))),
 };
 const decodeTransform = Schema.decodeUnknownSync(Transform);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "effect-motion",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Deterministic, frame-exact motion graphics in code, composed with Effect",
   "type": "module",
   "license": "MIT",
@@ -50,7 +50,7 @@
   "dependencies": {
     "@effect/platform-node": "4.0.0-beta.98",
     "chroma-js": "^3.2.0",
-    "@effect-motion/thorvg": "^0.1.0"
+    "@effect-motion/thorvg": "^0.2.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json",