create-effect-motion 0.4.0 → 0.5.0

package/dist/create.js

@@ -127,7 +127,7 @@ const handler = (input) => Effect.gen(function* () {
         `${name} is ready.`,
         dir === cwd ? "" : `  cd ${path.relative(cwd, dir)}`,
         `  ${pm === "npm" ? "npm run" : pm} studio    # preview scenes with hot reload`,
-        `  ${pm === "npm" ? "npm run" : pm} render    # render targets from motion.config.ts`,
+        `  ${pm === "npm" ? "npm run" : pm} render    # execute render.ts (the render program)`,
     ]
         .filter((line) => line !== "")
         .join("\n"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-effect-motion",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Scaffold a new effect-motion project — run with `pnpm create effect-motion` (or npm/yarn/bun create)",
   "type": "module",
   "license": "MIT",

package/templates/default/AGENTS.md

@@ -4,14 +4,15 @@ This is an [effect-motion](https://github.com/julia-script/effect-motion) projec
 
 ## Layout and commands
 
-- `src/scenes/*.ts` — one scene per module, each exporting `scene`. Any file here is previewable without registration.
+- `src/scenes/*.ts` — one scene per module, each exporting `scene`. `Scene.make("Display Name", gen, meta?)` optionally names a scene for the studio picker.
 - `src/main.ts` — the movie: an ordinary scene that sequences the others (`Scene.play` + `handle.finished`). Nothing is special about it.
-- `motion.config.ts` — render targets. Output is always `<output>/<name>.mp4`; never write output paths by hand.
+- `studio.ts` — the studio registration: `studioConfig({ scenes, layers })`. Record keys are unique identifiers; ONLY registered scenes appear in the picker, so add an import + entry for every new scene. Scenes with typed resources (fonts, images) need their loaders in `layers` — the file will not compile until every registered scene is covered.
+- `render.ts` — an ordinary program default-exporting a `Video.render(...)` effect. More outputs are more calls; loader layers are provided here with `Effect.provide` (compile-checked). Knobs (paths, fps, seed) live in this code — there are no CLI flags.
 - `src/assets/` — static files (images, fonts).
-- `motion studio` — browser preview with hot reload (scene picker lists config targets plus unregistered scenes).
-- `motion render [name...]` — render targets; `motion render ./src/scenes/foo.ts` renders one file with defaults. Flags beat config beat library defaults. `--verbose` prints full error cause chains.
+- `motion studio [file]` — browser preview with hot reload of `studio.ts` (or the given entrypoint).
+- `motion render [file]` — execute `render.ts` (or the given entrypoint) with the platform provided. `--verbose` prints full error cause chains. The same file runs standalone via `tsx render.ts` by piping through `NodeServices` from `@effect/platform-node`.
 
-Verify a scene change by rendering it (`motion render <target>`) or checking it in the running studio — not by reading code alone.
+Verify a scene change by rendering it (`motion render`) or checking it in the running studio — not by reading code alone.
 
 ## Writing scenes
 
@@ -39,21 +40,26 @@ export const scene = Scene.make(function* () {
 
 - **Never** use `Math.random()`, `Date.now()`, or any wall-clock/OS state in a scene — every run must be byte-identical. Use the provided seeded random (`Effect.random`, seeded from `settings.seed`).
 - Durations land exactly on target on the final frame; springs snap on settle. Don't add "fudge" frames.
-- Scene coordinates are the `settings.width`/`height` of the target that renders them (this template: 1920×1080). `dpr` scales output pixels, not coordinates.
+- Scene coordinates are the scene's OWN comp config — `Scene.make(gen, { width, height, backgroundColor })` (this template: 1920×1080). `dpr` (a `Video.render` option) scales output pixels, not coordinates.
 - The `effect` dependency is pinned **exactly** — upgrading it can change seeded-random sequences. Never bump it casually; upgrade `effect` and `effect-motion` together, deliberately.
 
-## Config
+## Entrypoints
 
 ```ts
-export default defineConfig({
-	targets: [{
-		name: "intro",                    // unique — doubles as the output basename
-		scene: "./src/scenes/intro.ts",
-		settings: { width: 1920, height: 1080, frameRate: 60, dpr: 1 },
-		output: "./output",               // a DIRECTORY; file name is derived
-		// frames: 600                    // REQUIRED if the scene is infinite
-	}],
+// studio.ts — what the studio previews
+export default studioConfig({
+	scenes: {
+		intro,                                      // key = identifier, label = scene name ?? key
+		fancy: { scene: fancy, fps: 30 },           // per-entry player options
+	},
+	// layers: Layer.mergeAll(Font.layer(...), …)  // REQUIRED once a scene declares resources
+});
+
+// render.ts — what `motion render` executes
+export default Effect.gen(function* () {
+	yield* Video.render(intro, "./output/intro.mp4", { settings: { frameRate: 60 } });
+	// yield* Video.render(intro, "./output/intro-hd.mp4", { dpr: 2 });  // more outputs = more calls
 });
 ```
 
-A scene used by several targets renders once per target (e.g. different resolutions). An infinite scene (one that never finishes) must set `frames`, or rendering would never end.
+Render the same scene several times for variants (resolutions, dpr). An infinite scene (one that never finishes) must pass `frames` in its `Video.render` options, or rendering would never end.

package/templates/default/render.ts

@@ -0,0 +1,14 @@
+import { Video } from "@effect-motion/export";
+import * as Effect from "effect/Effect";
+import { scene as main } from "./src/main";
+
+// An ordinary program: `motion render` executes this default export with
+// the platform provided (it also runs standalone via `tsx render.ts` by
+// piping through NodeServices from @effect/platform-node). More outputs
+// are more Video.render calls; scenes with typed resources provide their
+// loader layers right here with Effect.provide — checked at compile time.
+export default Effect.gen(function* () {
+	yield* Video.render(main, "./output/main.mp4", {
+		settings: { frameRate: 60 },
+	});
+});

package/templates/default/src/main.ts

@@ -2,8 +2,8 @@ import { Scene } from "effect-motion";
 import { scene as helloWorld } from "./scenes/hello-world";
 
 // The movie: an ordinary scene that sequences the scenes in src/scenes.
-// Nothing is special about this file — it is one more target in
-// motion.config.ts. Add scenes and chain them here.
+// Nothing is special about this file — studio.ts registers it and
+// render.ts renders it like any other scene. Add scenes and chain them here.
 export const scene = Scene.make(function* () {
 	const hello = yield* Scene.play(helloWorld);
 	yield* hello.finished;

package/templates/default/src/scenes/hello-world.ts

@@ -1,15 +1,17 @@
 import { Color, Motion, Scene, Shapes } from "effect-motion";
 
 // A scene is a generator: instantiate entities, then yield animations.
-// Preview it with `motion studio`, render it with `motion render`.
-export const scene = Scene.make(function* () {
+// The leading string is a DISPLAY name (the studio picker label); the
+// studio.ts record key is its identifier. Preview with `motion studio`,
+// render with `motion render`.
+export const scene = Scene.make("Hello World", function* () {
 	const circle = yield* Scene.instantiate(Shapes.Circle, {
-		x: 300,
-		y: 540,
+		x: -660,
+		y: 0,
 		radius: 80,
 		fill: Color.hex("#7f5af0"),
 	});
 
-	yield* Motion.tweenTo(circle, { x: 1620 }, "1200 millis", "easeInOutCubic");
+	yield* Motion.tweenTo(circle, { x: 660 }, "1200 millis", "easeInOutCubic");
 	yield* Motion.fadeTo(circle, 0, "400 millis");
 });

package/templates/default/studio.ts

@@ -0,0 +1,16 @@
+import { studioConfig } from "@effect-motion/cli";
+import { scene as main } from "./src/main";
+import { scene as helloWorld } from "./src/scenes/hello-world";
+
+// The studio's registration: keys are the picker's unique identifiers
+// (labels come from Scene.make's display name when set). Register every
+// scene you want to preview — `motion studio` serves exactly this record.
+// When a scene declares typed resources (fonts, images), provide their
+// loaders here as one `layers` (Layer.mergeAll(Font.layer(...), ...)) —
+// the file will not compile until every registered scene is covered.
+export default studioConfig({
+	scenes: {
+		"hello-world": helloWorld,
+		main,
+	},
+});

package/templates/default/tsconfig.json

@@ -11,5 +11,5 @@
 		"lib": ["ES2022"],
 		"types": ["node"]
 	},
-	"include": ["src", "motion.config.ts"]
+	"include": ["src", "studio.ts", "render.ts"]
 }

package/templates/default/motion.config.ts

@@ -1,20 +0,0 @@
-import { defineConfig } from "@effect-motion/cli";
-
-// Each target is one rendered video: <output>/<name>.mp4
-// `motion render` renders all of them; `motion render <name>` picks one.
-export default defineConfig({
-	targets: [
-		{
-			name: "hello-world",
-			scene: "./src/scenes/hello-world.ts",
-			settings: { width: 1920, height: 1080, frameRate: 60 },
-			output: "./output",
-		},
-		{
-			name: "main",
-			scene: "./src/main.ts",
-			settings: { width: 1920, height: 1080, frameRate: 60 },
-			output: "./output",
-		},
-	],
-});