create-effect-motion 0.4.0 → 0.6.0

package/README.md

@@ -3,8 +3,8 @@
 Scaffold a new [effect-motion](https://github.com/julia-script/effect-motion) project:
 
 ```sh
-pnpm create effect-motion
-# or: npm create effect-motion / yarn create effect-motion / bun create effect-motion
+bun create effect-motion
+# or: npm create effect-motion / pnpm create effect-motion / yarn create effect-motion
 ```
 
 The prompts ask for a target directory, a package manager, and whether to set up [Biome](https://biomejs.dev) for linting/formatting. The generated project:
@@ -25,8 +25,8 @@ my-motion-project/
 Answering `.` scaffolds into the current directory and names the project after it. A `git init` runs automatically unless the directory already sits inside a repository. Then:
 
 ```sh
-pnpm studio    # preview scenes with hot reload
-pnpm render    # render targets from motion.config.ts to MP4
+bun run studio    # preview scenes with hot reload
+bun run render    # render targets from motion.config.ts to MP4
 ```
 
 ## Flags
@@ -34,7 +34,7 @@ pnpm render    # render targets from motion.config.ts to MP4
 Every prompt has a flag twin, so the scaffolder runs non-interactively in scripts and CI:
 
 ```sh
-create-effect-motion my-app --pm pnpm --no-biome --no-install
+create-effect-motion my-app --pm bun --no-biome --no-install
 create-effect-motion --yes    # accept every default (-y)
 ```
 

package/dist/create.js

@@ -8,24 +8,24 @@ import { MotionCliError, renderForTerminal } from "./MotionCliError.js";
 import { VERSION } from "./pins.js";
 import { ensureEmptyDir, resolveProjectDir, scaffoldProject, } from "./scaffold.js";
 const DEFAULT_DIRECTORY = "my-motion-project";
-const PACKAGE_MANAGERS = ["pnpm", "npm", "yarn", "bun"];
-/** The manager that invoked us (`pnpm create …` etc.), if detectable. */
+const PACKAGE_MANAGERS = ["bun", "pnpm", "npm", "yarn"];
+/** The manager that invoked us (`bun create …` etc.), if detectable. */
 const detectPackageManager = () => {
     const agent = process.env.npm_config_user_agent ?? "";
     return PACKAGE_MANAGERS.find((pm) => agent.startsWith(pm));
 };
 const flags = {
-    directory: Argument.string("directory").pipe(Argument.withDescription('Target directory ("." scaffolds into the current directory)'), Argument.optional),
-    pm: Flag.optional(Flag.choice("pm", PACKAGE_MANAGERS).pipe(Flag.withDescription("Package manager (skips the prompt)"))),
-    biome: Flag.boolean("biome").pipe(Flag.withDescription("Set up Biome for linting/formatting (skips the prompt)")),
-    noBiome: Flag.boolean("no-biome").pipe(Flag.withDescription("Skip the Biome setup (skips the prompt)")),
-    noInstall: Flag.boolean("no-install").pipe(Flag.withDescription("Skip dependency installation")),
-    yes: Flag.boolean("yes").pipe(Flag.withAlias("y"), Flag.withDescription("Accept the default answer for every prompt not answered by a flag")),
+    directory: Argument.String("directory").pipe(Argument.withDescription('Target directory ("." scaffolds into the current directory)'), Argument.optional),
+    pm: Flag.optional(Flag.Literals("pm", PACKAGE_MANAGERS).pipe(Flag.withDescription("Package manager (skips the prompt)"))),
+    biome: Flag.Boolean("biome").pipe(Flag.withDefault(false), Flag.withDescription("Set up Biome for linting/formatting (skips the prompt)")),
+    noBiome: Flag.Boolean("no-biome").pipe(Flag.withDefault(false), Flag.withDescription("Skip the Biome setup (skips the prompt)")),
+    noInstall: Flag.Boolean("no-install").pipe(Flag.withDefault(false), Flag.withDescription("Skip dependency installation")),
+    yes: Flag.Boolean("yes").pipe(Flag.withDefault(false), Flag.withAlias("y"), Flag.withDescription("Accept the default answer for every prompt not answered by a flag")),
 };
-const promptDirectory = Prompt.text({
+const promptDirectory = Prompt.run(Prompt.String({
     message: 'Where should the project be created? ("." for the current directory)',
     default: DEFAULT_DIRECTORY,
-});
+}));
 const promptPackageManager = Effect.suspend(() => {
     const detected = detectPackageManager();
     // detected manager listed first so plain Enter picks it
@@ -33,15 +33,15 @@ const promptPackageManager = Effect.suspend(() => {
         ...(detected ? [detected] : []),
         ...PACKAGE_MANAGERS.filter((pm) => pm !== detected),
     ];
-    return Prompt.select({
+    return Prompt.run(Prompt.Select({
         message: "Which package manager?",
         choices: ordered.map((pm) => ({ title: pm, value: pm })),
-    });
+    }));
 });
-const promptBiome = Prompt.confirm({
+const promptBiome = Prompt.run(Prompt.Confirm({
     message: "Add Biome for linting/formatting?",
     initial: true,
-});
+}));
 const runInstall = (pm, dir) => Effect.gen(function* () {
     const spawner = yield* ChildProcessSpawner.ChildProcessSpawner;
     const command = ChildProcess.make(pm, ["install"], {
@@ -100,7 +100,7 @@ const handler = (input) => Effect.gen(function* () {
     yield* ensureEmptyDir(dir);
     const pm = Option.getOrUndefined(input.pm) ??
         (input.yes
-            ? (detectPackageManager() ?? "npm")
+            ? (detectPackageManager() ?? "bun")
             : yield* promptPackageManager);
     // explicit flags win over --yes; --no-biome beats --biome if both are passed
     const biome = input.noBiome
@@ -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"));
@@ -136,8 +136,8 @@ const handler = (input) => Effect.gen(function* () {
 Effect.catchTag("QuitError", () => Effect.interrupt));
 // registered globally so `--verbose` parses anywhere on the command line;
 // the reporter reads argv directly because it sits outside handler context
-const verboseFlag = GlobalFlag.setting("verbose")({
-    flag: Flag.boolean("verbose").pipe(Flag.withDescription("Print full error cause chains")),
+const verboseFlag = GlobalFlag.Setting("verbose")({
+    flag: Flag.Boolean("verbose").pipe(Flag.withDefault(false), Flag.withDescription("Print full error cause chains")),
 });
 export const rootCommand = Command.make("create-effect-motion", flags, handler).pipe(Command.withDescription("Scaffold a new effect-motion project"), Command.withGlobalFlags([verboseFlag]));
 export const CLI_VERSION = VERSION;

package/package.json

@@ -1,45 +1,45 @@
 {
-  "name": "create-effect-motion",
-  "version": "0.4.0",
-  "description": "Scaffold a new effect-motion project — run with `pnpm create effect-motion` (or npm/yarn/bun create)",
-  "type": "module",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/julia-script/effect-motion.git",
-    "directory": "packages/create-effect-motion"
-  },
-  "homepage": "https://github.com/julia-script/effect-motion#readme",
-  "bugs": "https://github.com/julia-script/effect-motion/issues",
-  "keywords": [
-    "effect",
-    "motion",
-    "create",
-    "scaffold",
-    "template",
-    "motion-graphics"
-  ],
-  "bin": {
-    "create-effect-motion": "./dist/bin.js"
-  },
-  "files": [
-    "dist",
-    "templates"
-  ],
-  "dependencies": {
-    "@effect/platform-node": "4.0.0-beta.98",
-    "effect": "4.0.0-beta.98"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "^2.5.3",
-    "@types/node": "^26.1.1",
-    "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"
-  }
-}
+	"name": "create-effect-motion",
+	"version": "0.6.0",
+	"description": "Scaffold a new effect-motion project — run with `bun create effect-motion` (or npm/pnpm/yarn create)",
+	"type": "module",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/julia-script/effect-motion.git",
+		"directory": "packages/create-effect-motion"
+	},
+	"homepage": "https://github.com/julia-script/effect-motion#readme",
+	"bugs": "https://github.com/julia-script/effect-motion/issues",
+	"keywords": [
+		"effect",
+		"motion",
+		"create",
+		"scaffold",
+		"template",
+		"motion-graphics"
+	],
+	"bin": {
+		"create-effect-motion": "./dist/bin.js"
+	},
+	"files": [
+		"dist",
+		"templates"
+	],
+	"scripts": {
+		"build": "tsc -p tsconfig.build.json",
+		"dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
+		"test": "vitest run",
+		"check": "tsc --noEmit"
+	},
+	"dependencies": {
+		"@effect/platform-node": "4.0.0-rc.115",
+		"effect": "4.0.0-rc.115"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.5.3",
+		"@types/node": "^26.1.1",
+		"typescript": "^7.0.2",
+		"vitest": "^4.1.10"
+	}
+}

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",
-		},
-	],
-});