effect-motion 0.2.0

package/dist/svg/shapes.js

@@ -0,0 +1,119 @@
+import { Layer } from "effect";
+import * as Effect from "effect/Effect";
+import { ParticleField } from "../particles/ParticleField";
+import { particleField } from "../particles/render";
+import * as Shapes from "../shapes";
+import { entityRendererLayer } from "./layers";
+// absent props are omitted, never emitted with placeholders; opacity 1
+// (the SVG default) is omitted to keep output minimal
+const styleAttrs = (data) => {
+    const attrs = {};
+    if (data.fill !== undefined) {
+        attrs.fill = data.fill;
+    }
+    if (data.stroke !== undefined) {
+        attrs.stroke = data.stroke;
+    }
+    if (data.strokeWidth !== undefined) {
+        attrs["stroke-width"] = data.strokeWidth;
+    }
+    if (data.opacity !== 1) {
+        attrs.opacity = data.opacity;
+    }
+    return attrs;
+};
+export const circle = ({ data, }) => Effect.succeed({
+    tag: "circle",
+    props: { cx: data.x, cy: data.y, r: data.radius, ...styleAttrs(data) },
+});
+export const rect = ({ data, }) => Effect.succeed({
+    tag: "rect",
+    props: {
+        x: data.x,
+        y: data.y,
+        width: data.width,
+        height: data.height,
+        ...styleAttrs(data),
+    },
+});
+export const square = ({ data, }) => Effect.succeed({
+    tag: "rect",
+    props: {
+        x: data.x,
+        y: data.y,
+        width: data.size,
+        height: data.size,
+        ...styleAttrs(data),
+    },
+});
+export const ellipse = ({ data }) => Effect.succeed({
+    tag: "ellipse",
+    props: {
+        cx: data.x,
+        cy: data.y,
+        rx: data.rx,
+        ry: data.ry,
+        ...styleAttrs(data),
+    },
+});
+export const line = ({ data, }) => Effect.succeed({
+    tag: "line",
+    props: {
+        x1: data.x,
+        y1: data.y,
+        x2: data.x2,
+        y2: data.y2,
+        ...styleAttrs(data),
+    },
+});
+export const path = ({ data, }) => Effect.succeed({
+    tag: "path",
+    props: {
+        d: data.d,
+        // x/y offset the whole path; translate only when it does something
+        ...(data.x !== 0 || data.y !== 0
+            ? { transform: `translate(${data.x} ${data.y})` }
+            : {}),
+        ...styleAttrs(data),
+    },
+});
+export const text = ({ data, }) => Effect.succeed({
+    tag: "text",
+    props: {
+        x: data.x,
+        y: data.y,
+        "font-size": data.fontSize,
+        "font-family": data.fontFamily,
+        ...(data.textAnchor !== undefined
+            ? { "text-anchor": data.textAnchor }
+            : {}),
+        ...(data.baseline !== undefined
+            ? { "dominant-baseline": data.baseline }
+            : {}),
+        ...styleAttrs(data),
+    },
+    // plain string content; the string sink escapes it
+    children: data.text,
+});
+// a group paints nothing itself: one <g> positioning its rendered children
+export const group = ({ data, children, }) => {
+    const transform = Shapes.resolvedTransform(data);
+    return Effect.succeed({
+        tag: "g",
+        props: {
+            ...(Shapes.isIdentityTransform(transform)
+                ? {}
+                : {
+                    transform: `matrix(${transform.a} ${transform.b} ${transform.c} ${transform.d} ${transform.e} ${transform.f})`,
+                }),
+            ...styleAttrs(data),
+        },
+        children,
+    });
+};
+// a parallax layer is a bare container: one <g> holding its children. It has
+// no position/opacity of its own; `depth` is consumed by the sink (svg/camera),
+// not emitted as an attribute here.
+export const layer = ({ children, }) => Effect.succeed({ tag: "g", props: {}, children });
+/** Every built-in shape registered with both sinks. */
+export const shapesLayer = Layer.mergeAll(entityRendererLayer(Shapes.Circle, circle), entityRendererLayer(Shapes.Rect, rect), entityRendererLayer(Shapes.Square, square), entityRendererLayer(Shapes.Ellipse, ellipse), entityRendererLayer(Shapes.Line, line), entityRendererLayer(Shapes.Path, path), entityRendererLayer(Shapes.Group, group), entityRendererLayer(Shapes.Layer, layer), entityRendererLayer(Shapes.Text, text), entityRendererLayer(ParticleField, particleField));

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "effect-motion",
+  "version": "0.2.0",
+  "description": "Deterministic, frame-exact motion graphics in code, composed with Effect",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/julia-script/effect-motion.git",
+    "directory": "packages/motion"
+  },
+  "homepage": "https://github.com/julia-script/effect-motion#readme",
+  "bugs": "https://github.com/julia-script/effect-motion/issues",
+  "keywords": [
+    "effect",
+    "motion",
+    "animation",
+    "motion-graphics",
+    "svg",
+    "deterministic"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "effect": ">=4.0.0-beta.94"
+  },
+  "devDependencies": {
+    "@types/node": "^26.1.1",
+    "effect": "4.0.0-beta.94",
+    "happy-dom": "^20.10.6",
+    "tsx": "^4.23.0",
+    "typescript": "^7.0.2",
+    "vitest": "^4.1.10"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
+    "test": "vitest run",
+    "check": "tsc --noEmit"
+  }
+}