effect-motion 0.2.0

package/dist/Timing.js

@@ -0,0 +1,151 @@
+export const linear = (t) => t;
+/** one full sine cycle: 0 → 1 → 0 */
+export const sin = (t) => (1 - Math.cos(2 * Math.PI * t)) / 2;
+/** one full cosine cycle: 1 → 0 → 1 */
+export const cos = (t) => (1 + Math.cos(2 * Math.PI * t)) / 2;
+export const easeInSine = (t) => 1 - Math.cos((t * Math.PI) / 2);
+export const easeOutSine = (t) => Math.sin((t * Math.PI) / 2);
+export const easeInOutSine = (t) => -(Math.cos(Math.PI * t) - 1) / 2;
+const easeInPow = (p) => (t) => t ** p;
+const easeOutPow = (p) => (t) => 1 - (1 - t) ** p;
+const easeInOutPow = (p) => (t) => t < 0.5 ? 2 ** (p - 1) * t ** p : 1 - (-2 * t + 2) ** p / 2;
+export const easeInQuad = easeInPow(2);
+export const easeOutQuad = easeOutPow(2);
+export const easeInOutQuad = easeInOutPow(2);
+export const easeInCubic = easeInPow(3);
+export const easeOutCubic = easeOutPow(3);
+export const easeInOutCubic = easeInOutPow(3);
+export const easeInQuart = easeInPow(4);
+export const easeOutQuart = easeOutPow(4);
+export const easeInOutQuart = easeInOutPow(4);
+export const easeInQuint = easeInPow(5);
+export const easeOutQuint = easeOutPow(5);
+export const easeInOutQuint = easeInOutPow(5);
+export const easeInExpo = (t) => t === 0 ? 0 : 2 ** (10 * t - 10);
+export const easeOutExpo = (t) => t === 1 ? 1 : 1 - 2 ** (-10 * t);
+export const easeInOutExpo = (t) => t === 0
+    ? 0
+    : t === 1
+        ? 1
+        : t < 0.5
+            ? 2 ** (20 * t - 10) / 2
+            : (2 - 2 ** (-20 * t + 10)) / 2;
+export const easeInCirc = (t) => 1 - Math.sqrt(1 - t ** 2);
+export const easeOutCirc = (t) => Math.sqrt(1 - (t - 1) ** 2);
+export const easeInOutCirc = (t) => t < 0.5
+    ? (1 - Math.sqrt(1 - (2 * t) ** 2)) / 2
+    : (Math.sqrt(1 - (-2 * t + 2) ** 2) + 1) / 2;
+/** `s` is the overshoot amount */
+export const createEaseInBack = (s = 1.70158) => (t) => (s + 1) * t ** 3 - s * t ** 2;
+export const createEaseOutBack = (s = 1.70158) => (t) => 1 + (s + 1) * (t - 1) ** 3 + s * (t - 1) ** 2;
+export const createEaseInOutBack = (s = 1.70158, v = 1.525) => {
+    const c = s * v;
+    return (t) => t < 0.5
+        ? ((2 * t) ** 2 * ((c + 1) * 2 * t - c)) / 2
+        : ((2 * t - 2) ** 2 * ((c + 1) * (2 * t - 2) + c) + 2) / 2;
+};
+/** `s` is the angular frequency (default 2π/3) */
+export const createEaseInElastic = (s = 2.094395) => (t) => t === 0
+    ? 0
+    : t === 1
+        ? 1
+        : -(2 ** (10 * t - 10)) * Math.sin((t * 10 - 10.75) * s);
+export const createEaseOutElastic = (s = 2.094395) => (t) => t === 0
+    ? 0
+    : t === 1
+        ? 1
+        : 2 ** (-10 * t) * Math.sin((t * 10 - 0.75) * s) + 1;
+/** `s` is the angular frequency (default 2π/4.5) */
+export const createEaseInOutElastic = (s = 1.39626) => (t) => t === 0
+    ? 0
+    : t === 1
+        ? 1
+        : t < 0.5
+            ? -(2 ** (20 * t - 10) * Math.sin((20 * t - 11.125) * s)) / 2
+            : (2 ** (-20 * t + 10) * Math.sin((20 * t - 11.125) * s)) / 2 + 1;
+/** `n` is the bounce stiffness, `d` the interval divisor */
+export const createEaseOutBounce = (n = 7.5625, d = 2.75) => {
+    // segment offsets derived from the parameters so f(1) = 1 holds for
+    // any stiffness (defaults yield the canonical 0.75/0.9375/0.984375)
+    const o1 = 1 - n * (0.5 / d) ** 2;
+    const o2 = 1 - n * (0.25 / d) ** 2;
+    const o3 = 1 - n * (1 - 2.625 / d) ** 2;
+    return (t) => {
+        if (t < 1 / d) {
+            return n * t ** 2;
+        }
+        if (t < 2 / d) {
+            const u = t - 1.5 / d;
+            return n * u ** 2 + o1;
+        }
+        if (t < 2.5 / d) {
+            const u = t - 2.25 / d;
+            return n * u ** 2 + o2;
+        }
+        const u = t - 2.625 / d;
+        return n * u ** 2 + o3;
+    };
+};
+export const createEaseInBounce = (n = 7.5625, d = 2.75) => {
+    const out = createEaseOutBounce(n, d);
+    return (t) => 1 - out(1 - t);
+};
+export const createEaseInOutBounce = (n = 7.5625, d = 2.75) => {
+    const out = createEaseOutBounce(n, d);
+    return (t) => (t < 0.5 ? (1 - out(1 - 2 * t)) / 2 : (1 + out(2 * t - 1)) / 2);
+};
+export const easeInBack = createEaseInBack();
+export const easeOutBack = createEaseOutBack();
+export const easeInOutBack = createEaseInOutBack();
+export const easeInElastic = createEaseInElastic();
+export const easeOutElastic = createEaseOutElastic();
+export const easeInOutElastic = createEaseInOutElastic();
+export const easeInBounce = createEaseInBounce();
+export const easeOutBounce = createEaseOutBounce();
+export const easeInOutBounce = createEaseInOutBounce();
+export const timingFunctions = {
+    linear,
+    sin,
+    cos,
+    easeInSine,
+    easeOutSine,
+    easeInOutSine,
+    easeInQuad,
+    easeOutQuad,
+    easeInOutQuad,
+    easeInCubic,
+    easeOutCubic,
+    easeInOutCubic,
+    easeInQuart,
+    easeOutQuart,
+    easeInOutQuart,
+    easeInQuint,
+    easeOutQuint,
+    easeInOutQuint,
+    easeInExpo,
+    easeOutExpo,
+    easeInOutExpo,
+    easeInCirc,
+    easeOutCirc,
+    easeInOutCirc,
+    easeInBack,
+    easeOutBack,
+    easeInOutBack,
+    easeInElastic,
+    easeOutElastic,
+    easeInOutElastic,
+    easeInBounce,
+    easeOutBounce,
+    easeInOutBounce,
+};
+export const resolve = (input) => {
+    if (typeof input === "function") {
+        return input;
+    }
+    const fn = timingFunctions[input];
+    if (fn === undefined) {
+        // unreachable for typed consumers; catches plain-JS typos
+        throw new Error(`Timing: unknown timing function "${String(input)}"`);
+    }
+    return fn;
+};

package/dist/demo.d.ts

@@ -0,0 +1,186 @@
+import * as Schema from "effect/Schema";
+import * as Entity from "./Entity";
+import * as Scene from "./Scene";
+export declare const scene: Scene.Scene<unknown, import("./Runner").Runner | import("effect/Scope").Scope, Entity.Entity<"shapes/Group", Schema.Struct<{
+    x: Schema.withConstructorDefault<Schema.Number>;
+    y: Schema.withConstructorDefault<Schema.Number>;
+    opacity: Schema.withConstructorDefault<Schema.Number>;
+    transform: Schema.withConstructorDefault<Schema.Struct<{
+        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>>;
+}>, {
+    "~position": Entity.TraitLens<Schema.Struct.ReadonlySide<{
+        x: Schema.withConstructorDefault<Schema.Number>;
+        y: Schema.withConstructorDefault<Schema.Number>;
+        opacity: Schema.withConstructorDefault<Schema.Number>;
+        transform: Schema.withConstructorDefault<Schema.Struct<{
+            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>;
+        opacity: Schema.withConstructorDefault<Schema.Number>;
+        transform: Schema.withConstructorDefault<Schema.Struct<{
+            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>;
+}, Omit<{
+    readonly x?: number;
+    readonly y?: number;
+    readonly opacity?: number;
+    readonly transform?: Schema.Struct.ReadonlyMakeIn<{
+        readonly a: Schema.Number;
+        readonly b: Schema.Number;
+        readonly c: Schema.Number;
+        readonly d: Schema.Number;
+        readonly e: Schema.Number;
+        readonly f: Schema.Number;
+    }>;
+    readonly children?: readonly string[];
+}, "transform"> & {
+    readonly transform?: readonly (Schema.Struct.ReadonlySide<{
+        readonly _tag: Schema.tag<"transform/matrix">;
+        readonly a: Schema.Number;
+        readonly b: Schema.Number;
+        readonly c: Schema.Number;
+        readonly d: Schema.Number;
+        readonly e: Schema.Number;
+        readonly f: Schema.Number;
+    }, "Type"> | Schema.Struct.ReadonlySide<{
+        readonly _tag: Schema.tag<"transform/scale">;
+        readonly x: Schema.Number;
+        readonly y: Schema.Number;
+    }, "Type"> | Schema.Struct.ReadonlySide<{
+        readonly _tag: Schema.tag<"transform/translate">;
+        readonly x: Schema.Number;
+        readonly y: Schema.Number;
+    }, "Type">)[];
+}>>;
+export declare const staggered: Scene.Scene<unknown, import("./Phaser").Phaser | import("./Runner").Runner | import("effect/Scope").Scope, Entity.Entity<"shapes/Circle", Schema.Struct<{
+    x: Schema.withConstructorDefault<Schema.Number>;
+    y: Schema.withConstructorDefault<Schema.Number>;
+    opacity: Schema.withConstructorDefault<Schema.Number>;
+    fill: Schema.withConstructorDefault<Schema.String>;
+    stroke: Schema.optionalKey<Schema.String>;
+    strokeWidth: Schema.optionalKey<Schema.Number>;
+    radius: Schema.withConstructorDefault<Schema.Number>;
+}>, {
+    readonly "~position": Entity.TraitLens<{
+        readonly x: number;
+        readonly y: number;
+        readonly opacity: number;
+        readonly fill: string;
+        readonly stroke?: string;
+        readonly strokeWidth?: number;
+        readonly radius: number;
+    }, Entity.Position>;
+    readonly "~opacity": Entity.TraitLens<{
+        readonly x: number;
+        readonly y: number;
+        readonly opacity: number;
+        readonly fill: string;
+        readonly stroke?: string;
+        readonly strokeWidth?: number;
+        readonly radius: number;
+    }, number>;
+}, {
+    readonly x?: number;
+    readonly y?: number;
+    readonly opacity?: number;
+    readonly fill?: string;
+    readonly stroke?: string;
+    readonly strokeWidth?: number;
+    readonly radius?: number;
+}> | Entity.Entity<"shapes/Group", Schema.Struct<{
+    x: Schema.withConstructorDefault<Schema.Number>;
+    y: Schema.withConstructorDefault<Schema.Number>;
+    opacity: Schema.withConstructorDefault<Schema.Number>;
+    transform: Schema.withConstructorDefault<Schema.Struct<{
+        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>>;
+}>, {
+    "~position": Entity.TraitLens<Schema.Struct.ReadonlySide<{
+        x: Schema.withConstructorDefault<Schema.Number>;
+        y: Schema.withConstructorDefault<Schema.Number>;
+        opacity: Schema.withConstructorDefault<Schema.Number>;
+        transform: Schema.withConstructorDefault<Schema.Struct<{
+            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>;
+        opacity: Schema.withConstructorDefault<Schema.Number>;
+        transform: Schema.withConstructorDefault<Schema.Struct<{
+            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>;
+}, Omit<{
+    readonly x?: number;
+    readonly y?: number;
+    readonly opacity?: number;
+    readonly transform?: Schema.Struct.ReadonlyMakeIn<{
+        readonly a: Schema.Number;
+        readonly b: Schema.Number;
+        readonly c: Schema.Number;
+        readonly d: Schema.Number;
+        readonly e: Schema.Number;
+        readonly f: Schema.Number;
+    }>;
+    readonly children?: readonly string[];
+}, "transform"> & {
+    readonly transform?: readonly (Schema.Struct.ReadonlySide<{
+        readonly _tag: Schema.tag<"transform/matrix">;
+        readonly a: Schema.Number;
+        readonly b: Schema.Number;
+        readonly c: Schema.Number;
+        readonly d: Schema.Number;
+        readonly e: Schema.Number;
+        readonly f: Schema.Number;
+    }, "Type"> | Schema.Struct.ReadonlySide<{
+        readonly _tag: Schema.tag<"transform/scale">;
+        readonly x: Schema.Number;
+        readonly y: Schema.Number;
+    }, "Type"> | Schema.Struct.ReadonlySide<{
+        readonly _tag: Schema.tag<"transform/translate">;
+        readonly x: Schema.Number;
+        readonly y: Schema.Number;
+    }, "Type">)[];
+}>>;

package/dist/demo.js

@@ -0,0 +1,76 @@
+import { Effect, Layer, Schedule, Stream } from "effect";
+import { Svg } from ".";
+import * as Motion from "./Motion";
+import * as Physics from "./Physics";
+import * as Scene from "./Scene";
+import * as Shapes from "./shapes";
+// 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, {
+        x: 70,
+        y: 200,
+        children: [
+            Scene.instantiate(Shapes.Circle, {
+                x: 0,
+                y: 0,
+                radius: 14,
+                fill: "#e53170",
+            }),
+            Scene.instantiate(Shapes.Square, {
+                x: 20,
+                y: -16,
+                size: 28,
+                fill: "#a786df",
+            }),
+        ],
+    });
+    const moveA = Motion.moveTo({ x: 380 }, "1.5 seconds", "easeInOutCubic");
+    const moveB = Motion.moveTo({ x: 70 }, "1.5 seconds", "easeInOutCubic");
+    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"));
+});
+// const program = Effect.gen(function* () {
+// 	const renderer = yield* Svg.SvgRenderer.Context;
+// 	const sceneResult = yield* Scene.stream(scene, {
+// 	}).pipe(
+// 		Stream.runCollect,
+// 		Effect.provide(renderer)
+// 	)
+// 	console.log(sceneResult);
+// 	//  renderer.render(scene, {
+// 	// 	width: 500,
+// 	// 	height: 300,
+// 	// });
+// }).pipe(Effect.provide(shapesLayer));
+// Effect.runPromise(program);
+// 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* () {
+    const stage = yield* Scene.instantiate(Shapes.Group, { x: 70, y: 150 });
+    yield* Scene.background(Scene.repeat(stage.pipe(Motion.moveTo({ y: 130 }, "500 millis", "easeInOutCubic"), Motion.moveTo({ y: 150 }, "500 millis", "easeInOutCubic")), Schedule.forever));
+    const dot = (x) => Effect.gen(function* () {
+        const circle = yield* Scene.instantiate(Shapes.Circle, {
+            x,
+            y: 0,
+            radius: 10,
+            fill: "#e53170",
+        });
+        // reparent the freshly-born dot from root into the stage group
+        yield* Scene.appendChild(stage, circle);
+        yield* Motion.tweenTo(circle, { x: x + 300 }, "1 second", "easeInOutCubic");
+    });
+    yield* Scene.stagger([dot(0), dot(25), dot(50)], Schedule.spaced("250 millis"));
+});
+const movie = Effect.gen(function* () {
+    // const svgRenderer = yield* Svg.SvgRenderer.Context;
+    // const frames = yield* Scene.stream(scene).pipe(Stream.runCollect);
+    // let n = 0;
+    // for (const frame of frames) {
+    // 	console.log(`\x1b[36mframe ${n++}\x1b[0m`);
+    // 	console.log(yield* svgRenderer.render(frame, { width: 500, height: 300 }));
+    // }
+    const frames = yield* Scene.stream(staggered).pipe(Stream.runCollect);
+    console.log(`staggered scene: ${[...frames].length} frames`);
+});
+const layers = Svg.layer.pipe(Layer.provideMerge(Svg.shapesLayer));
+Effect.runPromise(movie.pipe(Effect.provide(layers)));

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export * as Camera from "./Camera";
+export * as Entity from "./Entity";
+export * as Fonts from "./Fonts";
+export * as Instance from "./Instance";
+export * as Motion from "./Motion";
+export * as Phaser from "./Phaser";
+export * as Physics from "./Physics";
+export * as Particles from "./particles";
+export * as Renderer from "./Renderer";
+export * as Scene from "./Scene";
+export * as Shapes from "./shapes";
+export * as Svg from "./svg";
+export * as Timing from "./Timing";

package/dist/index.js

@@ -0,0 +1,13 @@
+export * as Camera from "./Camera";
+export * as Entity from "./Entity";
+export * as Fonts from "./Fonts";
+export * as Instance from "./Instance";
+export * as Motion from "./Motion";
+export * as Phaser from "./Phaser";
+export * as Physics from "./Physics";
+export * as Particles from "./particles";
+export * as Renderer from "./Renderer";
+export * as Scene from "./Scene";
+export * as Shapes from "./shapes";
+export * as Svg from "./svg";
+export * as Timing from "./Timing";

package/dist/particles/Particle.d.ts

@@ -0,0 +1,91 @@
+import type * as Prng from "./Prng";
+/**
+ * A single particle's live state. Held in a flat buffer on the
+ * ParticleField instance — never its own entity/instance/fiber. Position
+ * and velocity are integrated each frame; `age` counts up to `life`
+ * (seconds), at which point the particle is dead and its slot is free.
+ *
+ * `size` and `color` are the values DRAWN at birth (the particle's
+ * baseline); over-life curves modulate them at render time as a function
+ * of `age/life` and never mutate these fields.
+ *
+ * `rng` is the particle's own generator state (see Prng). Tier-2 curves
+ * never read it.
+ * ponytail: reserved so a future Tier-3 `fn(age, rng)` per-property config
+ * is purely additive — no buffer layout change. Drop it if Tier 3 is ruled
+ * out for good.
+ */
+export interface Particle {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    age: number;
+    life: number;
+    size: number;
+    /** baseline opacity drawn at birth; the over-life curve multiplies it */
+    opacity: number;
+    color: string;
+    rng: Prng.PrngState;
+    /** false = dead slot, reusable by the next emission */
+    alive: boolean;
+    /**
+     * true for `fill`-mode particles: they never age out and wrap around the
+     * fill region's edges instead of dying, so the field stays evenly
+     * populated forever. Emitter-mode particles leave this false.
+     */
+    wrap: boolean;
+}
+/** an inclusive numeric range `[min, max]`, sampled uniformly at birth */
+export type Range = readonly [min: number, max: number];
+/** an over-life curve: value goes `from` → `to` across age 0→1, eased */
+export interface OverLife {
+    readonly from: number;
+    readonly to: number;
+    /** timing-function name or function; resolved by Timing.resolve */
+    readonly ease?: string;
+}
+/**
+ * The emitter configuration an author writes. Ranged props are drawn once
+ * per particle at birth; `gravity` is a shared force; over-life curves are
+ * deterministic functions of particle age.
+ */
+export interface EmitterConfig {
+    /** emitter origin */
+    readonly x: number;
+    readonly y: number;
+    /** launch speed range (px/sec) */
+    readonly speed: Range;
+    /** launch angle range (degrees; 0 = up, clockwise-positive) */
+    readonly angle: Range;
+    /** lifetime range (seconds) */
+    readonly life: Range;
+    /** birth size range (px radius) */
+    readonly size: Range;
+    /** birth opacity range (0..1), drawn per particle; the over-life opacity
+     * curve (if any) multiplies this baseline. Omit → every particle 1. */
+    readonly opacity?: Range;
+    /** shared downward acceleration (px/sec²); not ranged */
+    readonly gravity: number;
+    /** colors drawn from uniformly at birth */
+    readonly palette: ReadonlyArray<string>;
+    /**
+     * fill mode only — the rectangular region particles scatter across and
+     * wrap around, in the field's local coordinates. The animator defaults
+     * this to the whole frame when the author doesn't set it.
+     */
+    readonly region?: {
+        readonly w: number;
+        readonly h: number;
+    };
+    /**
+     * fill mode only — magnitude of each particle's small isotropic drift
+     * velocity (px/sec). Replaces speed+angle launch for evenly-spread
+     * floating fields. `[min, max]` of the speed; direction is uniform.
+     */
+    readonly drift?: Range;
+    /** optional over-life size curve (multiplies drawn size) */
+    readonly sizeOverLife?: OverLife;
+    /** optional over-life opacity curve (0..1) */
+    readonly opacityOverLife?: OverLife;
+}

package/dist/particles/Particle.js

@@ -0,0 +1 @@
+export {};