@vosjs/cli 0.52.0 → 0.52.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vosjs/cli",
-  "version": "0.52.0",
+  "version": "0.52.1",
   "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",
@@ -49,14 +49,14 @@
   "dependencies": {
     "mediabunny": "^1.55.7",
     "playwright": "^1.49.0",
-    "@vosjs/editor": "^1.3.1",
-    "@vosjs/elements": "^0.8.1",
+    "@vosjs/elements": "^0.8.2",
+    "@vosjs/shared": "^0.4.1",
     "@vosjs/core": "^0.25.0",
     "@vosjs/render-core": "^0.3.6",
-    "@vosjs/shared": "^0.4.1",
+    "@vosjs/editor": "^1.3.1",
     "@vosjs/timeline": "^0.4.1",
-    "@vosjs/tween": "^0.8.2",
-    "@vosjs/studio-core": "^0.32.0"
+    "@vosjs/studio-core": "^0.32.0",
+    "@vosjs/tween": "^0.8.2"
   },
   "devDependencies": {
     "@types/node": "^22",

package/skills/VERSION

@@ -1 +1 @@
-0.6.1
+0.7.1

package/skills/vos-port/SKILL.md

@@ -0,0 +1,152 @@
+---
+name: vos-port
+description: Bring a video someone made in Remotion or HyperFrames (or a hand-rolled HTML/canvas animation) into vos as a program whose words, colours and timings are knobs, so it keeps changing without code and lives on vos.so with versions, a studio and free export. Use when asked to "port", "convert", "move" or "bring" a Remotion or HyperFrames project to vos or vosso, to make such a video editable, or to put one on vos.so as more than a file.
+license: MIT
+---
+
+# Port a Remotion or HyperFrames video into vos
+
+A port is a REWRITE into a vos program whose content is data. The source
+keeps its look; what changes is that every word, colour and timing a person
+would change becomes a value in `data` with a knob over it, so the next
+change is a data edit (in the studio, or `vos push` of a patched value),
+never another rewrite.
+
+Two ways to get this wrong, both seen in real ports:
+
+- **One canvas black box.** Painting the whole picture in one Canvas2D
+  function on a fullscreen quad matches the frames and leaves the studio
+  nothing to edit: every literal in the source becomes a literal in code.
+- **A tabulated page.** Sampling the rendered DOM into CSS keyframes is
+  faithful and dead: thousands of sampled values, not one knob.
+
+Read `references/intro-port.mjs` first: the Remotion showreel's intro scene,
+ported by these rules and checked against Remotion's own render. It is the
+shape every port takes: real functions, stringified into a `config.json`
+(`node intro-port.mjs` writes one beside it).
+
+## The rules (the port grammar)
+
+1. **Content is data.** Every string, colour, number and asset a person
+   might change lives in `config.data`. Function strings hold none of it.
+   Timings live in data too (`data.t`), in SECONDS, converted from frames
+   once (`frames / fps`).
+2. **What people change is a knob.** `params` over those keys: `text` for
+   words, `color` for the palette (the source's own palette first), `font`
+   for faces. Prove each one moves the picture:
+   `vos still config.json k.png --time <t> --set data.<key>=<value>`.
+3. **Things are elements.** Text is a `text` element whose `content`,
+   `font.family` and `font.color` take `{ "$data": "<key>" }` (they
+   re-raster live on a data edit). Logos and shapes are `svg` or `image`
+   elements, footage a `video` element. Elements are what the studio selects
+   and moves.
+4. **Motion is the timeline.** `createTimeline` holds the tweens, on
+   `ctx.elements.get(id).props` (whole) or `.segments` (`split: { type:
+   'chars' | 'words' | 'lines' }` units), in the GSAP dialect. Keep curves
+   exact: Remotion's `Easing.bezier(a, b, c, d)` is `ease: 'css-bezier(a, b,
+   c, d)'`; GSAP eases keep their names.
+5. **Scenes are labels.** One `tl.addLabel('<scene>', t)` per scene or
+   `<Sequence>`: the studio draws them on the program's timeline.
+6. **A painter only for procedural pixels.** Noise blobs, grain, a scramble,
+   a counter: `onFrame(ctx)` reads `ctx.time` and `ctx.data` and draws or
+   writes exactly those. Never the whole picture.
+7. **Sound is a track.** The score goes in `doc.json` beside the config
+   (`audio: [{ id, key: "score.ogg", name, start, in, out, duration, gain,
+   fadeIn, fadeOut }]`); `vos push` uploads it and `vos render` mixes it
+   (`@vosjs/cli` 0.52+). Never a `data:` URI in an audio element.
+8. **Faces from the catalog.** `fonts: [{ family, weight, url }]` with
+   `https://assets.vos.so/fonts/<slug>/<weight>.woff2` (`GET
+   https://vos.so/api/fonts`). A face the catalog lacks is SUBSTITUTED and
+   the substitution is said in the push note.
+
+## The coordinates, measured (these cost the reference port three rounds)
+
+- **`props.x` / `props.y` are RENDER pixels, centre-relative, and `y` grows
+  DOWN**, like CSS `translateY`. A source offset in design pixels (a
+  1080-high frame) is scaled: `const k = ctx.resolution.height / 1080`,
+  then `{ y: y0 + 190 * k }`. An unscaled offset looks right at 1080p and
+  doubles at 540p. Render at two sizes to catch one.
+- **`rotation` is degrees, counter-clockwise**: CSS `rotate(12deg)` is
+  `rotation: -12`.
+- **A static offset goes in the config**, `transform: { translateX,
+  translateY }` in design pixels, never a `tl.set` on `props.x/y`, for any
+  text whose content or colour changes live: every re-raster lays the
+  element out again from its config and drops a tweened position.
+- **Bind a live text to its full words.** Text that `onFrame` writes each
+  frame (a scramble, a counter) starts as `{ "$data": "subtitle" }`, never
+  `' '`: a still capture (and so the vos.so thumbnail) misses what `onFrame`
+  writes, and then shows the bound words instead of nothing.
+- **Transform origin is the centre.** Remotion's `transformOrigin: 'right
+  center'` with `scaleX` becomes a centre scale plus an `x` tween that keeps
+  the right edge still: `{ scaleX: 0, x: x0 + (width / 2) * k }`.
+
+## The mapping
+
+- Remotion: `references/remotion.md`.
+- HyperFrames: `references/hyperframes.md`.
+- A hand-rolled page (a single HTML file, its own canvas engine): read it as
+  source with the same tables. What the page draws with DOM becomes
+  elements; what it paints in a canvas is a painter, kept to the procedural
+  parts.
+
+## The procedure
+
+1. **Inventory before writing.** From the source: size, fps, duration;
+   scenes and their frame windows; every visible string; every colour (CSS
+   custom properties, theme constants); fonts; media and audio files; the
+   variables or `defaultProps` (they become params). Write them into `data`
+   first. This IS the port's contract.
+2. **Get the source's own render.** Remotion: `npx remotion render <id>
+   out/source.mp4`. HyperFrames: `npx hyperframes render`. It is the
+   reference every check compares against.
+3. **Scaffold** a `build.mjs` from `references/intro-port.mjs`: real
+   functions stringified, a template-literal guard, `data`, `params`,
+   `fonts`, one element per string and shape, a label per scene.
+4. **Translate scene by scene** with the tables. One scene, then check it,
+   then the next.
+5. **Check** after every scene:
+
+   ```bash
+   node build.mjs && vos check config.json
+   vos still config.json v.png --times 0.5,1,2 --width 1920 --height 1080
+   ffmpeg -ss 1 -i out/source.mp4 -frames:v 1 r-1.png
+   ffmpeg -i r-1.png -i v-1.00s.png -filter_complex "[0:v][1:v]ssim" -f null -   # SSIM
+   ffmpeg -i r-1.png -i v-1.00s.png -filter_complex hstack side.png            # LOOK at it
+   vos render config.json small.mp4 --width 960 --height 540                  # the scale check
+   ```
+
+   A number does not catch a missing element: look at every side-by-side.
+   Stills are for layout; text that `onFrame` writes shows in `vos render`
+   output, not in `vos still` (a known capture gap), so check it in a
+   rendered frame.
+6. **Knob honesty**: one `--set data.<key>=<value>` still per param.
+7. **Push** with the score: `vos push config.json --folder <slug> --label
+   "port of <source>" --note "<what was substituted, what is a painter>"
+   --wait`, and hand over the watch and studio links.
+
+## The honest gaps (say them in the push note)
+
+These have no element equivalent today; each becomes a painter item or a
+stated approximation:
+
+| Source | In vos today |
+| --- | --- |
+| `overflow: hidden` masks, `clip-path` reveals | no element masks: approximate with opacity, or paint the item |
+| 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 |
+| 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
+drew text, svg and image elements lighter): match the source's hex values
+exactly and never adjust a colour by eye.
+
+## When not to port
+
+A piece that is mostly procedural canvas (a hand-rolled engine painting
+every frame) has few elements to give: port it as a painter with its values
+in `data`, and say that its knobs are the values, not the layout. A piece
+whose owner only wants it hosted can be ingested as it is: `vos ingest
+render.mp4` opens a finished render bare (0.52+).

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

@@ -0,0 +1,36 @@
+# HyperFrames → vos
+
+A HyperFrames composition is HTML and CSS moved by ONE paused GSAP timeline.
+vos speaks the GSAP dialect, so most calls carry over nearly verbatim; what
+changes is the target (an element's `props` instead of a DOM node) and the
+units (render pixels, y down, degrees counter-clockwise).
+
+| HyperFrames | vos |
+| --- | --- |
+| root `data-width`, `data-height`, `data-duration` | render size; `config.duration` |
+| `data-composition-variables`, CSS custom properties on the root (`--bg`, `--accent`) | `data` keys and `params` (a colour variable is a `color` knob) |
+| a text node or heading | a `text` element, `content: { "$data": key }` |
+| inline `<svg>` / `<img>` | an `svg` element (`src` is the markup) / an `image` element, the file uploaded |
+| `<video data-start data-media-start>` | a `video` element, windowed by opacity; no source in-point yet |
+| `<audio data-start data-duration data-volume>` | `doc.json` `audio: [{ key, start, in: 0, out: duration, duration, gain: volume, fadeIn, fadeOut }]` |
+| `gsap.timeline({ paused: true })` at `window.__timelines[id]` | `createTimeline` returns `ctx.gsap.timeline({ paused: true })`; vos drives it |
+| `tl.to / from / fromTo / set` on a DOM node | the same call on `ctx.elements.get(id).props` |
+| `x`, `y` in CSS pixels | `* k` (`k = ctx.resolution.height / 1080`); y grows down |
+| `rotation` / `rotate` in degrees | negate it (vos is counter-clockwise) |
+| SplitText-style per-character motion | `split: { type: 'chars' }` + tweens over `segments` |
+| a sub-composition or scene `div` with a time window | `tl.addLabel(name, t)` and its elements tweened in and out inside the window |
+| an `onUpdate` proxy clock that draws (`renderAll(t)`) | `onFrame(ctx)`, reading `ctx.time`, for exactly those procedural parts |
+| GSAP ease names (`power3.out`, `back.out(1.7)`, `expo.inOut`) | the same names |
+| CSS `--chrome` set by the timeline | a `data` value read in `onFrame`, or a tween on the element that shows it |
+| faces resolved by the runtime from CSS families | `fonts: [{ family, weight, url }]` from the catalog |
+| `mix-blend-mode`, `clip-path`, `overflow: hidden` reveals | GAPS: the painter, or an opacity approximation, said |
+
+Two traps specific to HyperFrames sources:
+
+- The runtime rewrites a sub-composition's CSS (it scopes selectors), which
+  can flip the cascade: the file you read is not always the document that
+  renders. When a colour or size disagrees with the render, believe the
+  render (`npx hyperframes render`), not the stylesheet.
+- `window.__player.seek(t)` is the clock the renderer uses; seeking
+  `__timelines.main` does not drive a mounted sub-composition. Read times
+  from the render, not by scrubbing the main timeline.

package/skills/vos-port/references/intro-port.mjs

@@ -0,0 +1,170 @@
+// The Remotion showreel's INTRO scene (62 frames at 30 fps), ported to a
+// data-first vos program. Authored as real functions, stringified here.
+import { writeFileSync } from 'node:fs'
+
+const FPS = 30
+const f = (frames) => +(frames / FPS).toFixed(4) // Remotion frames → seconds
+
+// Remotion Easing.bezier curves, spelled as the dialect's css-bezier.
+const EXPO_OUT = 'css-bezier(0.16, 1, 0.3, 1)'
+const EXPO_IN = 'css-bezier(0.7, 0, 0.84, 0)'
+const IN_OUT = 'css-bezier(0.83, 0, 0.17, 1)'
+
+function createContent(ctx) {
+  // The ground is a knob: read in onFrame, never baked.
+  ctx.scene.background = new ctx.THREE.Color(ctx.data.ink)
+  return { objects: [], refs: {}, dispose: () => {} }
+}
+
+function createTimeline(ctx, content, duration) {
+  const { gsap, elements, data } = ctx
+  const T = data.t
+  // Element props x/y are RENDER pixels; the source's offsets are design
+  // pixels on a 1080-high frame. Scale every offset by k.
+  const k = ctx.resolution.height / 1080
+  const tl = gsap.timeline({ paused: true })
+  tl.addLabel('intro', 0)
+
+  // The pill: a 40px dot that pops, stretches to a line, drops, and leaves
+  // toward its right end (Remotion's transformOrigin: right center).
+  const line = elements.get('line').props
+  const y0 = line.y
+  const x0 = line.x
+  tl.fromTo(line, { scale: 0 }, { scale: 1, duration: T.pop, ease: 'back.out(2.2)' }, 0)
+  tl.fromTo(line, { scaleX: 40 / 1180 }, { scaleX: 1, duration: T.stretch, ease: T.expoOut }, T.stretchAt)
+  tl.fromTo(line, { scaleY: 1 }, { scaleY: 0.2, duration: T.thin, ease: T.expoOut }, T.stretchAt)
+  tl.fromTo(line, { y: y0 }, { y: y0 + 190 * k, duration: T.drop, ease: T.expoOut }, T.dropAt)
+  tl.to(line, { scaleX: 0, x: x0 + 590 * k, duration: T.leave, ease: T.expoIn }, T.leaveAt)
+
+  // The title rises letter by letter, then leaves upward.
+  tl.addLabel('title', T.titleAt)
+  const segs = (elements.get('title') || {}).segments || []
+  segs.forEach((seg, i) => {
+    const at = T.titleAt + i * T.stagger
+    tl.fromTo(
+      seg,
+      { y: seg.y + 380 * k, rotation: -12, opacity: 0 },
+      { y: seg.y, rotation: 0, opacity: 1, duration: T.rise, ease: T.expoOut },
+      at,
+    )
+    tl.to(seg, { y: seg.y - 380 * k, opacity: 0, duration: T.exit, ease: T.expoIn }, T.leaveAt + i * T.exitStagger)
+  })
+
+  // The subtitle's words are onFrame's; its place is its config transform,
+  // because every content write re-lays it out from the config.
+  const sub = elements.get('subtitle').props
+  tl.to(sub, { opacity: 0, duration: T.leave, ease: T.expoIn }, T.leaveAt)
+
+  // The red wipe grows from the centre and covers the frame.
+  tl.addLabel('wipe', T.wipeAt)
+  const wipe = elements.get('wipe').props
+  tl.fromTo(wipe, { scale: 0 }, { scale: 1, duration: T.wipe, ease: T.inOut }, T.wipeAt)
+
+  tl.to({}, { duration: 0.01 }, duration)
+  return tl
+}
+
+function onFrame(ctx) {
+  const d = ctx.data
+  ctx.scene.background.set(d.ink)
+  // Scramble: a typewriter whose leading edge is glyph noise, a pure
+  // function of time and the words in data.
+  const el = ctx.elements.get('subtitle')
+  if (!el) return
+  const frame = ctx.time * 30
+  const n = Math.max(0, (frame - d.t.scrambleAt * 30) * 1.4)
+  const text = String(d.subtitle)
+  const glyphs = '!<>-_\\/[]{}=+*^?#01ABCDEFXYZ'
+  let out = ''
+  for (let i = 0; i < text.length; i++) {
+    if (i < Math.floor(n) - 3) out += text[i]
+    else if (i < n) out += text[i] === ' ' ? ' ' : glyphs[(i * 7 + Math.floor(frame)) % glyphs.length]
+    else out += ' '
+  }
+  if (el.props.content !== out) el.props.content = out
+}
+
+const config = {
+  version: 2,
+  duration: f(62),
+  camera: { preset: 'fullscreen' },
+  fonts: [
+    { family: 'Anton', weight: 400, url: 'https://assets.vos.so/fonts/anton/400.woff2' },
+    { family: 'JetBrains Mono', weight: 500, url: 'https://assets.vos.so/fonts/jetbrains-mono/500.woff2' },
+  ],
+  elements: [
+    {
+      id: 'line',
+      type: 'svg',
+      src: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1180 40"><rect width="1180" height="40" rx="20" fill="#F2EFE8"/></svg>',
+      position: 'center',
+    },
+    {
+      id: 'title',
+      type: 'text',
+      content: { $data: 'title' },
+      font: { family: 'Anton', size: 330, weight: 400, color: { $data: 'paper' }, letterSpacing: -4 },
+      split: { type: 'chars' },
+      position: 'center',
+    },
+    {
+      id: 'subtitle',
+      type: 'text',
+      // Bound to the full words: onFrame writes each frame's string, and a
+      // still capture, which misses onFrame's writes, shows these words.
+      content: { $data: 'subtitle' },
+      font: { family: 'JetBrains Mono', size: 26, weight: 500, color: { $data: 'paper' }, letterSpacing: 6 },
+      position: 'center',
+      transform: { translateY: 238 },
+    },
+    {
+      id: 'wipe',
+      type: 'svg',
+      src: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2500 2500"><circle cx="1250" cy="1250" r="1250" fill="#FF4D2E"/></svg>',
+      position: 'center',
+    },
+  ],
+  data: {
+    ink: '#0B0B0F',
+    paper: '#F2EFE8',
+    title: 'MOTION',
+    subtitle: 'A SHOWREEL WRITTEN ENTIRELY IN CODE',
+    // Every timing the scene has, in seconds, from Remotion's frames.
+    t: {
+      pop: f(8),
+      stretchAt: f(8),
+      stretch: f(16),
+      thin: f(8),
+      dropAt: f(14),
+      drop: f(14),
+      titleAt: f(14),
+      stagger: f(2.2),
+      rise: f(16),
+      scrambleAt: f(24),
+      leaveAt: f(42),
+      leave: f(12),
+      exit: f(10),
+      exitStagger: f(1.2),
+      wipeAt: f(46),
+      wipe: f(16),
+      expoOut: EXPO_OUT,
+      expoIn: EXPO_IN,
+      inOut: IN_OUT,
+    },
+  },
+  params: [
+    { key: 'title', kind: 'text', default: 'MOTION', hint: 'The word that rises' },
+    { key: 'subtitle', kind: 'text', default: 'A SHOWREEL WRITTEN ENTIRELY IN CODE', hint: 'The line typed under it' },
+    { key: 'paper', kind: 'color', default: '#F2EFE8', hint: 'Type colour' },
+    { key: 'ink', kind: 'color', default: '#0B0B0F', hint: 'Ground' },
+  ],
+  createContent: createContent.toString(),
+  createTimeline: createTimeline.toString(),
+  onFrame: onFrame.toString(),
+}
+
+for (const k of ['createContent', 'createTimeline', 'onFrame']) {
+  if (config[k].includes('${')) throw new Error(`${k} holds a template literal`)
+}
+writeFileSync(new URL('./config.json', import.meta.url), JSON.stringify(config, null, 2))
+console.log('wrote config.json')

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

@@ -0,0 +1,47 @@
+# Remotion → vos
+
+Remotion's model is a pure function of the frame; vos's is a timeline the
+engine seeks. Most of a port is turning `interpolate(frame, …)` calls into
+tweens that start and end at the same seconds with the same curve.
+Remotion's compositing (a persistent ground under transparent scenes that
+cross-fade) is vos's, so cross-fades port with no compensation.
+
+The interpolate, bezier, translate, rotate, origin, per-letter, scramble and
+ground rows were checked against Remotion's render in `intro-port.mjs`; GAP
+rows name what has no element equivalent yet.
+
+| Remotion | vos |
+| --- | --- |
+| `<Composition width height fps durationInFrames defaultProps schema>` | `config.duration = durationInFrames / fps`; render at `--width/--height`; `defaultProps` → `data`; the zod `schema` → `params` kinds (`z.string()` text, a colour string `color`) |
+| `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 |
+| `<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) |
+| `translateY(Npx)` animated | `props.y` += `N * k` (`k = ctx.resolution.height / 1080`; y grows down, like CSS) |
+| `rotate(Ndeg)` | `rotation: -N` (degrees, counter-clockwise) |
+| `transformOrigin` other than centre | a centre transform plus a compensating `x`/`y` tween |
+| a React text component per letter (`RiseText`) | `split: { type: 'chars' }` + one tween per `segments[i]` at `start + i * stagger` |
+| `charStyle` giving one letter a colour | GAP: segments carry no colour; a separate element or a painter |
+| `overflow: hidden` letter masks | GAP: no element masks; opacity approximates |
+| a string rebuilt per frame (`Scramble`, a counter) | `onFrame` writes `ctx.elements.get(id).props.content`; the element sized by the full words first |
+| `<Img src={staticFile('x.png')}>` | an `image` element; the file uploaded (`vos asset push x.png`) and its url in `data` |
+| `<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` |
+| `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` |
+
+Two traps specific to Remotion sources:
+
+- A side-effect-only font import can be tree-shaken by the project's
+  `sideEffects` field, so the SOURCE render may already be in a fallback
+  face. Compare the source render's headline width against the declared
+  face before blaming the port.
+- `durationInFrames` counts frames, and `interpolate` ranges are frames:
+  convert every number once, in `data.t`, and never mix frames and seconds
+  inside a function.