reframe-video 0.6.22 → 0.6.24

package/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "reframe",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Create and iterate motion-graphics videos as addressable data: deterministic mp4 renders, human edits that survive AI regeneration, label-anchored audio, data-driven batch rendering.",
   "author": {
     "name": "Kiyeon Jeon",

package/README.md

@@ -23,10 +23,12 @@ npx reframe-video render hello.ts    # → out/hello.mp4
 | `reframe render <scene.ts> [--overlay edits.json] [-o out.mp4]` | deterministic mp4 |
 | `reframe batch <scene.ts> <data.json\|csv>` | one mp4 per data row (row keys are overlay addresses) |
 | `reframe compile <scene.ts> [-o out.json] [--json]` | bundle + validate a scene to SceneIR JSON, no render (fast; no ffmpeg/chromium) |
+| `reframe frame <scene.ts> [--t <sec>] [-o out.png]` | render one frame at time `t` to a PNG (chromium only, no mux) — for a render-and-look loop |
 | `reframe preview` | scrub/play/edit UI for scenes in the current directory; edits export as overlay JSON |
 | `reframe new <name>` | scaffold a documented starter scene |
 | `reframe motion <mp4>` | calibrated motion profile of a rendered clip |
-| `reframe guide [--regen]` | the scene-authoring guide / regeneration contract — **feed this to your AI** |
+| `reframe guide [--directing\|--regen\|--html]` | the authoring guide (default eDSL syntax; directing workflow; regeneration contract; HTML/GSAP) — **feed this to your AI** |
+| `reframe skill [--path]` | print the authoring skill for an agent; `--path` prints the plugin dir to load |
 
 (Installed as both `reframe` and `reframe-video`; with npx use `npx reframe-video <cmd>`.)
 

package/dist/bin.js

@@ -2810,11 +2810,12 @@ var GUIDE = PACKAGED ? {
   html: join9(ROOT2, "guides", "html-guide.md"),
   edsl: join9(ROOT2, "guides", "edsl-guide.md")
 } : {
-  regen: join9(ROOT2, "docs", "regen-contract.md"),
+  regen: join9(ROOT2, "docs", "guides", "regen-contract.md"),
   directing: join9(ROOT2, "docs", "guides", "directing-guide.md"),
   html: join9(ROOT2, "docs", "guides", "html-guide.md"),
   edsl: join9(ROOT2, "docs", "guides", "edsl-guide.md")
 };
+var PLUGIN_DIR = PACKAGED ? ROOT2 : join9(ROOT2, "plugin");
 var USAGE = `reframe \u2014 declarative motion graphics
 
 usage:
@@ -3205,12 +3206,12 @@ ${results.length - failed} rendered (${orphaned} with orphans), ${failed} failed
     }
     case "skill": {
       if (rest.includes("--path")) {
-        process.stdout.write(`${ROOT2}
+        process.stdout.write(`${PLUGIN_DIR}
 `);
         return;
       }
       const { readFile: readFile7 } = await import("node:fs/promises");
-      process.stdout.write(await readFile7(join9(ROOT2, "skills", "reframe", "SKILL.md"), "utf8"));
+      process.stdout.write(await readFile7(join9(PLUGIN_DIR, "skills", "reframe", "SKILL.md"), "utf8"));
       return;
     }
     case "demo":

package/guides/edsl-guide.md

@@ -475,6 +475,31 @@ group({ id: "burst", x, y, blend: "screen" }, [ disc1, disc2, disc3 ])
   with the effect). It wraps a matte group and nests. The effects are screen-pixel space.
   See `examples/scenes/group-fx-demo.ts`.
 
+## Device frames (phone / browser / laptop …)
+
+To put a **phone, browser, laptop, …** on screen, use the preset — don't hand-draw
+a device out of rects. `devicePreset(name, opts) → NodeIR` returns a parametric
+vector frame (bezel, rounded body, phone notch / dynamic island, browser chrome).
+
+- `devicePreset(name, { id, x, y, scale?, opacity?, orientation?, content })` —
+  names: `phone` `tablet` `laptop` `browser` `watch` `monitor` `tv` `foldable`
+  `terminal` `car`. **There is no `"iphone"` — `"phone"` IS the iOS-style frame**
+  (notch + dynamic island). `browser`/`terminal` take an `address` string.
+- `content` nodes are authored in **screen-LOCAL centre coords** (0,0 = screen
+  centre) and clipped to the screen. Stable ids `${id}-screen` / `${id}-content`
+  (overlay/regen addresses) — keep `id` across rewrites.
+- It's one node: animate the device group for the float/entrance (`tween`/
+  `motionPath` its `x`/`y`/`scale`/`rotation`, `oscillate` for an idle drift).
+
+```ts
+// a phone floating centre, a chat bubble inside the screen:
+devicePreset("phone", { id: "hero", x: 960, y: 540, scale: 0.92, opacity: 0,
+  content: [ rect({ id: "b1", x: 80, y: -120, width: 300, height: 64, radius: 22, fill: "#2563EB" }) ] })
+// timeline: par(tween("hero", { opacity: 1, scale: 1 }, { ease: "easeOutBack" }))
+```
+
+Pair with `cursor` + `deviceScreenPoint` (below) to click UI *inside* the device.
+
 ## Cursor (UI demos)
 
 A vector mouse pointer that glides across the scene and clicks things — for app

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reframe-video",
-  "version": "0.6.22",
+  "version": "0.6.24",
   "description": "Declarative motion graphics that AI can write and humans can tweak — human edits survive AI regeneration. Deterministic mp4 renders from a plain-data scene format.",
   "keywords": [
     "motion-graphics",

package/skills/reframe/SKILL.md

@@ -11,9 +11,12 @@ runtime needs ffmpeg on PATH and a one-time `npx playwright install chromium`
 
 ## Creating a scene
 
-1. **Read the guide first** — it is the complete, current syntax (~1,700
-   tokens) and one read is enough to write valid scenes:
-   `npx -y reframe-video guide`
+1. **Read the guide first** — `npx -y reframe-video guide` is the complete,
+   current syntax. It's sectioned and sizable: read the core (Nodes, States,
+   Timeline) closely, and **skim the specialized sections by heading**
+   (perspective, track mattes, group effects, video, montage, character rig,
+   device frames, cursor, audio) — read one in full only when your scene uses
+   it. You don't need to re-read it for follow-up edits; it's already in context.
 2. Write a single self-contained `<name>.ts` in the user's directory
    (`npx -y reframe-video new <name>` scaffolds a documented starter).
    Scenes must be pure functions of time: no `Math.random()`/`Date` — use

package/.claude-plugin/marketplace.json

@@ -1,14 +0,0 @@
-{
-  "name": "kiyeonjeon21",
-  "owner": {
-    "name": "Kiyeon Jeon",
-    "url": "https://github.com/kiyeonjeon21"
-  },
-  "plugins": [
-    {
-      "name": "reframe",
-      "source": "./",
-      "description": "Motion-graphics videos as addressable data — generate, tweak, regenerate without losing human edits."
-    }
-  ]
-}