@vosjs/cli 0.55.0 → 0.56.0

package/dist/cli.js

@@ -730,7 +730,7 @@ async function cmdCheck(argv) {
   return result.ok ? EXIT_OK : EXIT_ERROR;
 }
 async function delegate(argv, viaAlias = false) {
-  const { run } = await import("./run-QREATZCN.js");
+  const { run } = await import("./run-OIZ7NQPU.js");
   if (viaAlias && argv[0]) {
     process.stderr.write(
       `note: "vos voila ${argv[0]}" is now "vos ${argv[0]}".
@@ -770,7 +770,7 @@ async function main() {
     const engine = HELP_ENGINE.split("\n").filter(
       (l) => l.startsWith(`  vos ${cmd} `)
     );
-    const { verbHelp } = await import("./run-QREATZCN.js");
+    const { verbHelp } = await import("./run-OIZ7NQPU.js");
     const take = verbHelp(cmd);
     process.stdout.write(
       `${engine.join("\n")}
@@ -802,7 +802,7 @@ ${take.includes("no such verb") ? "" : take}`
 main().then(async (code) => {
   if (code === EXIT_OK) {
     const verb = process.argv[2] ?? "";
-    const { HELP } = await import("./run-QREATZCN.js");
+    const { HELP } = await import("./run-OIZ7NQPU.js");
     const documented = [
       ...helpFlagsFor(HELP_ENGINE, verb),
       ...helpFlagsFor(HELP, verb)

package/dist/index.js

@@ -18,7 +18,7 @@ import {
   takePaths,
   validateActions,
   waitForPageDone
-} from "./chunk-FQA7LFXG.js";
+} from "./chunk-XXAY42XS.js";
 import {
   BrowserUnavailableError,
   apiError,

package/dist/{run-QREATZCN.js → run-OIZ7NQPU.js}

@@ -6,7 +6,7 @@ import {
   takeBackdrop,
   takeBrowserArgs,
   verbHelp
-} from "./chunk-FQA7LFXG.js";
+} from "./chunk-XXAY42XS.js";
 import "./chunk-JX2YEL3M.js";
 import "./chunk-6XPFWQKP.js";
 export {
@@ -17,4 +17,4 @@ export {
   takeBrowserArgs,
   verbHelp
 };
-//# sourceMappingURL=run-QREATZCN.js.map
+//# sourceMappingURL=run-OIZ7NQPU.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vosjs/cli",
-  "version": "0.55.0",
+  "version": "0.56.0",
   "description": "The vos CLI: record the real product from a scripted browser flow, auto-zoom from the cursor track, cut as data in doc.json, render deterministic video and stills, deliver a release's media per destination spec, and sync with vos.so. One binary, every verb, MIT.",
   "type": "module",
   "license": "MIT",
@@ -53,9 +53,9 @@
     "playwright": "^1.49.0",
     "@vosjs/core": "^0.25.5",
     "@vosjs/editor": "^1.4.0",
-    "@vosjs/elements": "^0.9.0",
-    "@vosjs/render-core": "^0.3.11",
     "@vosjs/shared": "^0.6.0",
+    "@vosjs/elements": "^0.10.0",
+    "@vosjs/render-core": "^0.3.11",
     "@vosjs/studio-core": "^0.33.2",
     "@vosjs/timeline": "^0.4.1",
     "@vosjs/tween": "^0.8.2"

package/skills/VERSION

@@ -1 +1 @@
-0.14.0
+0.16.0

package/skills/vos-authoring/SKILL.md

@@ -164,6 +164,37 @@ Configs pushed to vos.so get preview-rendered on a software-GL fleet: no
 (too slow), and any fetched asset must be reachable and CORS-open. These are
 fine for purely local renders on a real GPU.
 
+## Your own passes: depth of field, refraction
+
+The `postprocessing` list has no depth-of-field pass. For lens effects,
+render the world yourself:
+
+- Build the world in a private `THREE.Scene` with its own camera. In the
+  timeline's `onUpdate`, render it into `WebGLRenderTarget`s (`samples: 4`
+  plus a `DepthTexture` works, the render fleet included), run your passes,
+  then restore the renderer's target, clear colour and `autoClear`.
+- `ctx.scene` holds ONE full-screen quad that composites the result
+  (`gl_Position = vec4(position.xy, 0.0, 1.0)`, `frustumCulled = false`, no
+  depth test). Add it with `ctx.scene.add()`: the engine never adds
+  `objects` for you, and a quad left out renders a flat black frame.
+- Size the targets from `renderer.getDrawingBufferSize()`; rebuild them
+  when it changes.
+
+Depth of field that reads:
+
+- **Set the blur in pixels, by design.** A physical lens at scene scale
+  (f/1.6 at 40 cm) leaves a sharp zone a few millimetres deep, so the
+  subject you mean to show goes soft too. Decide what one depth step should
+  cost (8 to 20 px at 1080p) and solve for the lens strength.
+- **Keep the subject square to the camera while it is in focus.** A plane
+  seen at an angle spans depth, and shallow focus sharpens only a strip of
+  it. Check that the blur at the subject's corners stays under 1 px.
+- **Focus on a plane, not a point:** the focus distance is measured along
+  the camera's axis.
+- **Judge focus at full size.** Render `vos still … --width 1920 --height
+  1080` and crop at 100%: a 1280×720 still or a contact sheet hides 10 px
+  of blur.
+
 ## Design principles
 
 - **Visual impact**: bloom for glow (even 0.3–0.5 elevates); emissive

package/skills/vos-port/SKILL.md

@@ -169,7 +169,11 @@ approximation.
 3. **Scaffold**: `npx vos port scaffold` writes `port/program/program.mjs`
    (every word a bound element, every colour a key, the knobs, a label and a
    TODO per scene, each scene's words shown in its window, a painter only
-   when the inventory needs one), `doc.json` with the score as a track, and
+   when the inventory needs one, and the PAINTER STARTER as
+   `content.refs.lib` when the piece needs a painter or springs: Remotion's
+   `spring` to the frame, `springTo` for the timeline, `interpolate`,
+   `bezier`, seeded noise; never read another engine's source for these),
+   `doc.json` with the score as a track, and
    `port/REPORT.md` (substituted faces, gaps). Read the report first. On an
    older CLI, scaffold from `references/intro-port.mjs` by hand.
 4. **Translate scene by scene** with the tables, replacing each TODO. One
@@ -202,8 +206,8 @@ stated approximation:
 | a colour per split unit (`charStyle` making one letter red) | segments carry x/y/opacity/scale/rotation only: a separate element, or paint it |
 | `mixBlendMode` | no blend modes on elements: paint it |
 | a shape's colour as a knob | an svg's colours are compiled in (static `colors`): paint the shape if its colour must change live |
-| `spring()` | no spring ease in the dialect: a `back.out(n)` of the same shape, checked by eye |
-| `@remotion/noise`, SVG `feTurbulence` | the painter |
+| `spring()` | no spring EASE in the dialect; the scaffold's painter starter (cli 0.56+) has `lib.springTo`, Remotion's spring on the timeline a step per frame, exact. Older: `back.out(n)`, by eye |
+| `@remotion/noise`, SVG `feTurbulence` | the painter, on the starter's `lib.noise2D/noise3D` (the same character, not the same values) |
 | a group transform (scale the whole scene) | no element groups: tween each element the same way |
 
 Colours render as authored from `@vosjs/elements` 0.8.2 (older versions

package/skills/vos-port/references/elements-and-context.md

@@ -1,4 +1,4 @@
-<!-- Generated by scripts/build-element-reference.mjs from @vosjs/core 0.25.3, @vosjs/elements 0.9.0, @vosjs/timeline 0.4.1 and @vosjs/shared 0.5.0. Do not edit by hand: re-run the script. -->
+<!-- Generated by scripts/build-element-reference.mjs from @vosjs/core 0.25.5, @vosjs/elements 0.9.0, @vosjs/timeline 0.4.1 and @vosjs/shared 0.6.0. Do not edit by hand: re-run the script. -->
 
 # Elements, the context and eases: the declarations
 
@@ -353,6 +353,12 @@ unit boundaries, the line aligned by `font.align`). So a per-letter tween
 moves each letter FROM its laid-out place (`from`, or `s.y + dy`), never
 to a position computed by hand.
 
+A split element's `props` are the WORD (`@vosjs/elements` 0.10+): `x`/`y`
+offset every unit, `opacity` multiplies each unit's own, `scale` and
+`rotation` scale and turn the word about its centre, so letters rise
+through `el.segments` while `el.props` drifts or fades the word, two
+tweens, never one per letter. Before 0.10 they moved the FIRST letter only.
+
 Writing any of `content`, `fontSize`, `fontFamily`, `fontWeight`, `fontStyle`, `letterSpacing`, `color`, `strokeColor`, `strokeWidth` on a text element's `props`
 re-rasters it (the runtime's own list), so a scramble or a counter writes
 `el.props.content` in `onFrame` and a colour change sets `el.props.color`.

package/skills/vos-port/references/remotion.md

@@ -16,7 +16,7 @@ rows name what has no element equivalent yet.
 | `useCurrentFrame()` | nothing in a tween (the timeline is the clock); `ctx.time * fps` inside `onFrame` |
 | `interpolate(f, [a, b], [x, y], { easing, extrapolate: 'clamp' })` | `tl.fromTo(props, { p: x }, { p: y, duration: (b - a) / fps, ease }, a / fps)` |
 | `Easing.bezier(x1, y1, x2, y2)` | `ease: 'css-bezier(x1, y1, x2, y2)'` (exact) |
-| `spring({ frame, fps, config })` | GAP: no spring ease; `back.out(n)` of a similar overshoot, checked by eye |
+| `spring({ frame, fps, config })` | the painter starter (cli 0.56+): `content.refs.lib.springTo(tl, props, { y: [from, to] }, at, { fps, config })` puts Remotion's own spring on the timeline, a step per frame, exact to the frame; `lib.spring({ frame, fps, config })` is the value (`durationInFrames`, `delay`, `overshootClamping` as Remotion's). On an older CLI: `back.out(n)` of a similar overshoot, by eye |
 | `<Sequence from durationInFrames>` | `tl.addLabel(name, from / fps)` and the scene's elements tweened in and out inside that window |
 | `<TransitionSeries>` + `fade()` | opacity tweens across the overlap window |
 | `<AbsoluteFill>` + flex centring | `position: 'center'`; offsets in `transform: { translateX, translateY }` (design px) |
@@ -31,7 +31,7 @@ rows name what has no element equivalent yet.
 | `<Audio src={staticFile('s.mp3')} />` | `doc.json` `audio: [{ key: 's.mp3', start, in, out, duration, gain, fadeIn, fadeOut }]` |
 | `<Video>` / `<OffthreadVideo>` | a `video` element, windowed by opacity; a source in-point is not supported yet |
 | `@remotion/google-fonts` `loadFont()` | `fonts: [{ family, weight, url }]` from `https://vos.so/api/fonts`; a face the catalog lacks is substituted and said |
-| `@remotion/noise` `noise3D`, SVG `feTurbulence` grain | the painter, reading its seed and amounts from `data` |
+| `@remotion/noise` `noise3D`, SVG `feTurbulence` grain | the painter, with `content.refs.lib.noise2D/noise3D(seed, …)` (cli 0.56+: seeded simplex, the character of `@remotion/noise`, not its values, so match by eye), reading its seed and amounts from `data` |
 | `mixBlendMode` | GAP: the painter |
 | an inline `<svg>` shape | an `svg` element (`src` is the markup); its colours are static, so a shape colour that must be a knob is painted |
 | a solid background | `ctx.scene.background = new ctx.THREE.Color(ctx.data.ink)` in `createContent`, `.set(ctx.data.ink)` in `onFrame` |