@vfrey/vfrey 0.0.1 → 1.0.0-beta.0

package/src/remotion/films/rea/timing.ts

@@ -0,0 +1,144 @@
+// Measured from the Samantha takes. One shared rate lands the film on 200 words per minute.
+export const playbackRate = 1.1458;
+export const tailPadSeconds = 0.28;
+export const reaDurationInFrames = 2511;
+
+export type ReaScene = {
+  id: string;
+  file: string;
+  narration: string;
+  wavSeconds: number;
+  from: number;
+  durationInFrames: number;
+};
+
+export const reaScenes: ReaScene[] = [
+  {
+    "id": "no-source",
+    "file": "voice-01.wav",
+    "narration": "You love how the search box in Notes works, but you cannot open its source code.",
+    "wavSeconds": 4.533,
+    "from": 0,
+    "durationInFrames": 140
+  },
+  {
+    "id": "meet-rea",
+    "file": "voice-02.wav",
+    "narration": "Meet R. E. A., the GitHub project that people have starred more than 360,000 times.",
+    "wavSeconds": 6.031,
+    "from": 140,
+    "durationInFrames": 179
+  },
+  {
+    "id": "one-connection",
+    "file": "voice-03.wav",
+    "narration": "Its line is Reverse Engineer Anything: one connection that lets your coding assistant look through an app.",
+    "wavSeconds": 5.559,
+    "from": 319,
+    "durationInFrames": 167
+  },
+  {
+    "id": "notes-example",
+    "file": "voice-04.wav",
+    "narration": "Point it at Notes, and it can show you how that search really works.",
+    "wavSeconds": 3.912,
+    "from": 486,
+    "durationInFrames": 124
+  },
+  {
+    "id": "setup-command",
+    "file": "voice-05.wav",
+    "narration": "To start, type n p x, rea agents, setup.",
+    "wavSeconds": 3.995,
+    "from": 610,
+    "durationInFrames": 126
+  },
+  {
+    "id": "pick-review",
+    "file": "voice-06.wav",
+    "narration": "Pick your coding assistant, such as Claude Code, Codex, or Cursor, then review the changes.",
+    "wavSeconds": 6.361,
+    "from": 736,
+    "durationInFrames": 188
+  },
+  {
+    "id": "approve-restart",
+    "file": "voice-07.wav",
+    "narration": "Approve them, restart the assistant, and it is connected.",
+    "wavSeconds": 3.504,
+    "from": 924,
+    "durationInFrames": 113
+  },
+  {
+    "id": "the-ask",
+    "file": "voice-08.wav",
+    "narration": "Now ask in plain words: understand how search works in Notes, show the proof, and build a similar feature.",
+    "wavSeconds": 6.635,
+    "from": 1037,
+    "durationInFrames": 195
+  },
+  {
+    "id": "stays-local",
+    "file": "voice-09.wav",
+    "narration": "The looking happens on your computer, and the app is never uploaded.",
+    "wavSeconds": 3.763,
+    "from": 1232,
+    "durationInFrames": 120
+  },
+  {
+    "id": "the-answer",
+    "file": "voice-10.wav",
+    "narration": "Back comes a plain explanation, the proof behind it, and a note on what could not be proven.",
+    "wavSeconds": 5.323,
+    "from": 1352,
+    "durationInFrames": 161
+  },
+  {
+    "id": "js-lane",
+    "file": "voice-11.wav",
+    "narration": "If the app is built with JavaScript, you need nothing extra.",
+    "wavSeconds": 3.702,
+    "from": 1513,
+    "durationInFrames": 118
+  },
+  {
+    "id": "compiled-lane",
+    "file": "voice-12.wav",
+    "narration": "If it is a compiled program, it needs Hopper, Ghidra, or IDA, and setup can offer to install Hopper after you approve.",
+    "wavSeconds": 7.626,
+    "from": 1631,
+    "durationInFrames": 221
+  },
+  {
+    "id": "build-beside-proof",
+    "file": "voice-13.wav",
+    "narration": "Then a similar search appears in your own project, one you are allowed to ship, beside the proof.",
+    "wavSeconds": 5.549,
+    "from": 1852,
+    "durationInFrames": 167
+  },
+  {
+    "id": "allowed-only",
+    "file": "voice-14.wav",
+    "narration": "Use it only for research, learning, and software you own or are allowed to examine.",
+    "wavSeconds": 4.998,
+    "from": 2019,
+    "durationInFrames": 152
+  },
+  {
+    "id": "official-only",
+    "file": "voice-15.wav",
+    "narration": "Get it only from the official GitHub page, morluto slash rea, because lookalike copies are not official.",
+    "wavSeconds": 6.414,
+    "from": 2171,
+    "durationInFrames": 189
+  },
+  {
+    "id": "close",
+    "file": "voice-16.wav",
+    "narration": "That is R. E. A.: n p x, rea agents, setup, and then ask.",
+    "wavSeconds": 4.934,
+    "from": 2360,
+    "durationInFrames": 151
+  }
+];

package/src/remotion/index.ts

@@ -0,0 +1,4 @@
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./Root.js";
+
+registerRoot(RemotionRoot);

package/src/remotion/templates/EditorialSplit.tsx

@@ -0,0 +1,39 @@
+import { AbsoluteFill, Audio, interpolate, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
+import type { RenderProps } from "@vfrey/contracts";
+import { AiLabel } from "../AiLabel.js";
+import { activeBeat, beatWindows } from "../timing.js";
+
+const serif = '"Liberation Serif", Georgia, serif';
+const sans = '"Liberation Sans", Arial, sans-serif';
+
+/** Slow magazine split. Serif quote above, body lines below, lower-third caption. */
+export function EditorialSplit(props: RenderProps) {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const windows = beatWindows(props.beats, fps);
+  const current = activeBeat(windows, frame);
+  const local = frame - current.start;
+  const rise = interpolate(local, [0, 18], [16, 0], { extrapolateRight: "clamp" });
+  const side = props.layoutSeed % 2 === 0 ? "left" : "right";
+  return (
+    <AbsoluteFill style={{ background: props.palette.background, color: props.palette.foreground, fontFamily: serif }}>
+      {props.voiceoverFile ? <Audio src={staticFile(props.voiceoverFile)} /> : null}
+      <div style={{ position: "absolute", top: 0, [side]: 0, width: 28, height: "100%", background: props.palette.accent }} />
+      <div style={{ position: "absolute", top: 120, left: 88, right: 88 }}>
+        <div style={{ fontFamily: sans, letterSpacing: 4, fontSize: 22, textTransform: "uppercase", color: props.palette.muted }}>
+          {props.palette.id} / {String(current.index + 1).padStart(2, "0")}
+        </div>
+        <div style={{ marginTop: 28, fontSize: 78, lineHeight: 0.95, fontWeight: 560 }}>{props.hook}</div>
+      </div>
+      <div style={{ position: "absolute", left: 88, right: 88, top: 980, bottom: 280, background: props.palette.surface, padding: 36 }}>
+        <div style={{ fontFamily: sans, fontSize: 40, lineHeight: 1.25, transform: `translateY(${rise}px)` }}>
+          {current.beat.text}
+        </div>
+      </div>
+      <div style={{ position: "absolute", left: 88, right: 88, bottom: 110, borderTop: `2px solid ${props.palette.accent}`, paddingTop: 18, fontFamily: sans, fontSize: 28 }}>
+        {current.beat.caption}
+      </div>
+      <AiLabel />
+    </AbsoluteFill>
+  );
+}

package/src/remotion/templates/KineticType.tsx

@@ -0,0 +1,39 @@
+import { AbsoluteFill, Audio, interpolate, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
+import type { RenderProps } from "@vfrey/contracts";
+import { AiLabel } from "../AiLabel.js";
+import { activeBeat, beatWindows } from "../timing.js";
+
+const sans = '"Liberation Sans", "Arial Black", Arial, sans-serif';
+
+/** Fast, full-bleed type. One claim per cut. Captions are the picture. */
+export function KineticType(props: RenderProps) {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const windows = beatWindows(props.beats, fps);
+  const current = activeBeat(windows, frame);
+  const local = frame - current.start;
+  const span = Math.max(1, current.end - current.start);
+  const scale = interpolate(local, [0, 8, span], [1.04, 1, 1], { extrapolateRight: "clamp" });
+  const bar = interpolate(local, [0, 8], [0, 1], { extrapolateRight: "clamp" });
+  const lift = 160 + (props.layoutSeed % 4) * 36;
+  const size = current.beat.caption.length > 42 ? 56 : current.beat.caption.length > 18 ? 68 : 84;
+  return (
+    <AbsoluteFill style={{ background: props.palette.background, color: props.palette.foreground, fontFamily: sans }}>
+      {props.voiceoverFile ? <Audio src={staticFile(props.voiceoverFile)} /> : null}
+      <div style={{ position: "absolute", top: lift, left: 72, right: 72, height: 18, background: props.palette.surface }}>
+        <div style={{ width: `${bar * 100}%`, height: "100%", background: props.palette.accent }} />
+      </div>
+      <div style={{ position: "absolute", left: 72, right: 72, top: lift + 48, bottom: 220, overflow: "hidden" }}>
+        <div style={{ fontSize: size, fontWeight: 800, letterSpacing: -1.5, lineHeight: 0.98, transform: `scale(${scale})`, transformOrigin: "left top", textAlign: "left" }}>
+          {current.beat.caption}
+        </div>
+      </div>
+      <div style={{ position: "absolute", left: 72, bottom: 96, display: "flex", gap: 12 }}>
+        {windows.map((window) => (
+          <div key={window.index} style={{ width: 36, height: 8, background: frame >= window.start ? props.palette.accent : props.palette.muted }} />
+        ))}
+      </div>
+      <AiLabel />
+    </AbsoluteFill>
+  );
+}

package/src/remotion/templates/SignalBoard.tsx

@@ -0,0 +1,50 @@
+import { AbsoluteFill, Audio, interpolate, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
+import type { RenderProps } from "@vfrey/contracts";
+import { AiLabel } from "../AiLabel.js";
+import { activeBeat, beatWindows } from "../timing.js";
+
+const mono = '"Liberation Mono", "Courier New", monospace';
+
+/** Medium technical board. Index rail, evidence bars, terminal caption chips. */
+export function SignalBoard(props: RenderProps) {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const windows = beatWindows(props.beats, fps);
+  const current = activeBeat(windows, frame);
+  const local = frame - current.start;
+  const span = Math.max(1, current.end - current.start);
+  const grow = interpolate(local, [0, span * 0.7], [0.08, 0.92], { extrapolateRight: "clamp" });
+  const cursor = Math.floor(frame / 15) % 2 === 0 ? "▋" : " ";
+  const indexOnRight = props.layoutSeed % 2 === 1;
+  return (
+    <AbsoluteFill
+      style={{
+        background: props.palette.background,
+        color: props.palette.foreground,
+        fontFamily: mono,
+        backgroundImage: `linear-gradient(${props.palette.surface} 1px, transparent 1px), linear-gradient(90deg, ${props.palette.surface} 1px, transparent 1px)`,
+        backgroundSize: "48px 48px",
+      }}
+    >
+      {props.voiceoverFile ? <Audio src={staticFile(props.voiceoverFile)} /> : null}
+      <div style={{ position: "absolute", top: 72, left: 64, right: 64, display: "flex", justifyContent: indexOnRight ? "flex-end" : "flex-start", gap: 22, flexWrap: "wrap" }}>
+        {windows.map((window) => (
+          <div key={window.index} style={{ color: window.index === current.index ? props.palette.accent : props.palette.muted, fontSize: 26 }}>
+            {String(window.index + 1).padStart(2, "0")} {window.beat.role}
+          </div>
+        ))}
+      </div>
+      <div style={{ position: "absolute", top: 220, left: 64, right: 64 }}>
+        <div style={{ fontSize: 54, lineHeight: 1.15 }}>{current.beat.text}</div>
+        <div style={{ marginTop: 48, height: 28, background: props.palette.surface }}>
+          <div style={{ width: `${grow * 100}%`, height: "100%", background: props.palette.accent }} />
+        </div>
+      </div>
+      <div style={{ position: "absolute", left: 80, bottom: 140, padding: "16px 20px", background: props.palette.surface, fontSize: 30 }}>
+        {current.beat.caption}
+        {cursor}
+      </div>
+      <AiLabel />
+    </AbsoluteFill>
+  );
+}

package/src/remotion/timing.ts

@@ -0,0 +1,22 @@
+import type { Beat } from "@vfrey/contracts";
+
+export interface BeatWindow {
+  beat: Beat;
+  start: number;
+  end: number;
+  index: number;
+}
+
+export function beatWindows(beats: Beat[], fps: number): BeatWindow[] {
+  let frame = 0;
+  return beats.map((beat, index) => {
+    const length = Math.max(1, Math.round(beat.seconds * fps));
+    const window = { beat, start: frame, end: frame + length, index };
+    frame += length;
+    return window;
+  });
+}
+
+export function activeBeat(windows: BeatWindow[], frame: number): BeatWindow {
+  return windows.find((window) => frame >= window.start && frame < window.end) ?? windows[windows.length - 1]!;
+}

package/src/render/chrome.ts

@@ -0,0 +1,78 @@
+import { existsSync, readdirSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+type Env = Record<string, string | undefined>;
+
+export const PACKAGE_ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "../..");
+
+/**
+ * Where Remotion keeps the Chrome Headless Shell it downloads. This is the rule in @remotion/renderer: the
+ * nearest folder at or above the working directory that holds a package.json, then `node_modules/.remotion`.
+ */
+export function remotionCacheDir(cwd: string): string {
+  let dir: string | undefined = cwd;
+  for (;;) {
+    if (existsSync(path.join(dir, "package.json"))) return path.join(dir, "node_modules", ".remotion");
+    const parent = path.dirname(dir);
+    if (parent === dir) return path.resolve(cwd, ".remotion");
+    dir = parent;
+  }
+}
+
+/** The cached Chrome Headless Shell executable, or null when the first render would still download it. */
+export function cachedHeadlessShell(cwd: string): string | null {
+  const root = path.join(remotionCacheDir(cwd), "chrome-headless-shell");
+  let platforms: string[] = [];
+  try {
+    platforms = readdirSync(root);
+  } catch {
+    return null;
+  }
+  for (const platform of platforms) {
+    // The cache also holds a VERSION file next to the platform folders.
+    let folders: string[] = [];
+    try {
+      folders = readdirSync(path.join(root, platform));
+    } catch {
+      continue;
+    }
+    for (const folder of folders) {
+      if (!folder.startsWith("chrome-headless-shell-")) continue;
+      for (const name of ["headless_shell", "chrome-headless-shell", "chrome-headless-shell.exe"]) {
+        const file = path.join(root, platform, folder, name);
+        if (existsSync(file)) return file;
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * The Chrome Headless Shell the HTML engines use: one the person named, else the one Remotion cached for the
+ * working folder or for this package. Both engines then share one download.
+ */
+export function resolveHeadlessShell(env: Env, cwd: string = process.cwd()): string | null {
+  for (const name of ["PRODUCER_HEADLESS_SHELL_PATH", "HYPERFRAMES_BROWSER_PATH"]) {
+    const named = env[name];
+    if (named && existsSync(named)) return named;
+  }
+  return cachedHeadlessShell(cwd) ?? cachedHeadlessShell(PACKAGE_ROOT);
+}
+
+/**
+ * True when the first Framey render would still download Chrome Headless Shell. `VFREY_TEST_CHROME_MISSING`
+ * is a test hook: it makes the shell count as missing without touching the real cache.
+ */
+export function headlessShellMissing(env: Env, cwd: string = process.cwd()): boolean {
+  if (env.VFREY_TEST_CHROME_MISSING) return true;
+  return resolveHeadlessShell(env, cwd) === null;
+}
+
+/** True when `command` is an executable file in one of the PATH folders. */
+export function onPath(command: string, env: Env): boolean {
+  for (const dir of (env.PATH ?? "").split(path.delimiter)) {
+    if (dir && existsSync(path.join(dir, command))) return true;
+  }
+  return false;
+}

package/src/render/engine-mark.ts

@@ -0,0 +1,29 @@
+import { mkdir } from "node:fs/promises";
+import path from "node:path";
+import { withJsExtensions } from "./webpack.js";
+
+/** Short local render used by the product entry. Same renderer as the worker. */
+export async function renderRemotionMark(outputPath: string, label: string, port = 4219): Promise<void> {
+  await mkdir(path.dirname(outputPath), { recursive: true });
+  const { bundle } = await import("@remotion/bundler");
+  const { renderMedia, selectComposition } = await import("@remotion/renderer");
+  const serveUrl = await bundle({
+    entryPoint: path.resolve("src/remotion/index.ts"),
+    webpackOverride: withJsExtensions,
+  });
+  const inputProps = { label };
+  const composition = await selectComposition({
+    serveUrl,
+    id: "EngineMark",
+    inputProps,
+    port,
+  });
+  await renderMedia({
+    composition,
+    serveUrl,
+    codec: "h264",
+    outputLocation: outputPath,
+    inputProps,
+    port,
+  });
+}

package/src/render/framey-template.ts

@@ -0,0 +1,130 @@
+import type { RenderProps } from "@vfrey/contracts";
+
+/** The six colors of the vfrey look. Square corners, monospace accents. */
+export const FRAMEY_PALETTE = {
+  black: "#000000",
+  white: "#FFFFFF",
+  ice: "#E3F2FD",
+  sky: "#90CAF9",
+  blue: "#2196F3",
+  navy: "#0D47A1",
+} as const;
+
+export const DISCLOSURE_LABEL = "AI-GENERATED";
+
+export const FRAMEY_FRAME = { width: 1080, height: 1920, fps: 30 } as const;
+
+function escapeHtml(text: string): string {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+function num(value: number): string {
+  return String(Math.round(value * 1000) / 1000);
+}
+
+/**
+ * The Framey (HTML + GSAP) version of the KineticType template: full-bleed type, one claim per cut, a
+ * progress bar per beat, beat ticks along the bottom, and the burned-in AI disclosure label.
+ * Every visible thing is a function of timeline time, so a render is repeatable.
+ */
+export function kineticTypeHtml(props: RenderProps, voiceFile: string | null): string {
+  const p = FRAMEY_PALETTE;
+  let start = 0;
+  const windows = props.beats.map((beat, index) => {
+    const seconds = Math.max(1 / FRAMEY_FRAME.fps, beat.seconds);
+    const window = { beat, index, start, seconds };
+    start += seconds;
+    return window;
+  });
+  const total = Math.max(1, props.durationSec > 0 ? props.durationSec : start);
+  const lift = 160 + (props.layoutSeed % 4) * 36;
+  const count = windows.length;
+
+  const slides = windows
+    .map((w) => {
+      const caption = w.beat.caption;
+      const size = caption.length > 42 ? 56 : caption.length > 18 ? 68 : 84;
+      const index = String(w.index + 1).padStart(2, "0");
+      return `      <div id="beat-${w.index}" class="clip beat" data-start="${num(w.start)}" data-duration="${num(w.seconds)}" data-track-index="1">
+        <div class="meta">${index}/${String(count).padStart(2, "0")} // ${escapeHtml(w.beat.role.toUpperCase())}</div>
+        <div id="text-${w.index}" class="caption" style="font-size:${size}px">${escapeHtml(caption)}</div>
+      </div>`;
+    })
+    .join("\n");
+  const ticks = windows.map((w) => `        <div id="tick-${w.index}" class="tick"></div>`).join("\n");
+  const audio = voiceFile
+    ? `      <audio id="voice" src="${escapeHtml(voiceFile)}" data-start="0" data-duration="${num(total)}" data-track-index="0" data-volume="1"></audio>\n`
+    : "";
+  const beatsJson = JSON.stringify(windows.map((w) => ({ i: w.index, start: w.start, seconds: w.seconds })));
+
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=${FRAMEY_FRAME.width}, height=${FRAMEY_FRAME.height}" />
+    <script src="assets/gsap.min.js"></script>
+    <style>
+      :root {
+        --black: ${p.black};
+        --white: ${p.white};
+        --ice: ${p.ice};
+        --sky: ${p.sky};
+        --blue: ${p.blue};
+        --navy: ${p.navy};
+      }
+      * { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0; }
+      html, body { width: ${FRAMEY_FRAME.width}px; height: ${FRAMEY_FRAME.height}px; overflow: hidden; background: var(--black); }
+      #root { position: relative; width: ${FRAMEY_FRAME.width}px; height: ${FRAMEY_FRAME.height}px; background: var(--black); color: var(--white); font-family: "Inter", sans-serif; }
+      .track { position: absolute; top: ${lift}px; left: 72px; right: 72px; height: 18px; background: var(--navy); }
+      .fill { width: 100%; height: 100%; background: var(--blue); transform-origin: left center; }
+      .beat { position: absolute; left: 72px; right: 72px; top: ${lift + 48}px; bottom: 220px; overflow: hidden; }
+      .meta { font-family: "JetBrains Mono", monospace; font-size: 26px; font-weight: 500; letter-spacing: 2px; color: var(--sky); margin-bottom: 28px; }
+      .caption { font-weight: 800; letter-spacing: -1.5px; line-height: 0.98; color: var(--white); transform-origin: left top; }
+      .ticks { position: absolute; left: 72px; bottom: 96px; display: flex; gap: 12px; }
+      .tick { width: 36px; height: 8px; background: var(--navy); }
+      .label { position: absolute; right: 72px; bottom: 80px; padding: 10px 16px; border: 3px solid var(--sky); color: var(--ice); font-family: "JetBrains Mono", monospace; font-size: 24px; font-weight: 500; letter-spacing: 3px; background: var(--black); }
+    </style>
+  </head>
+  <body>
+    <div id="root" data-composition-id="main" data-start="0" data-duration="${num(total)}" data-width="${FRAMEY_FRAME.width}" data-height="${FRAMEY_FRAME.height}">
+${audio}      <div class="track"><div id="fill" class="fill"></div></div>
+${slides}
+      <div class="ticks">
+${ticks}
+      </div>
+      <div id="disclosure" class="label">${DISCLOSURE_LABEL}</div>
+    </div>
+    <script>
+      const beats = ${beatsJson};
+      const tl = gsap.timeline({ paused: true });
+      for (const b of beats) {
+        tl.fromTo("#text-" + b.i, { scale: 1.04 }, { scale: 1, duration: 8 / 30, ease: "none" }, b.start);
+        tl.fromTo("#fill", { scaleX: 0 }, { scaleX: 1, duration: 8 / 30, ease: "none", immediateRender: false }, b.start);
+        tl.set("#tick-" + b.i, { backgroundColor: "${p.blue}" }, b.start);
+      }
+      window.__timelines = window.__timelines || {};
+      window.__timelines["main"] = tl;
+      tl.seek(0);
+    </script>
+  </body>
+</html>
+`;
+}
+
+/** How far the voice may differ from the planned length before the picture follows the voice. */
+export const VOICE_SLACK_SEC = 0.5;
+/** Picture held after the last word. */
+export const VOICE_TAIL_SEC = 0.3;
+
+/**
+ * The beats stretched or squeezed to the voice, so a spoken line is never cut and the video does not run silent.
+ * A voice within the slack of the plan leaves the plan alone.
+ */
+export function retimeToVoice(props: RenderProps, voiceSec: number | null): RenderProps {
+  if (!voiceSec || !Number.isFinite(voiceSec) || voiceSec <= 0) return props;
+  if (Math.abs(voiceSec - props.durationSec) <= VOICE_SLACK_SEC) return props;
+  const total = Math.round((voiceSec + VOICE_TAIL_SEC) * 100) / 100;
+  const planned = props.beats.reduce((sum, beat) => sum + beat.seconds, 0) || 1;
+  const beats = props.beats.map((beat) => ({ ...beat, seconds: Math.round((beat.seconds * total * 1000) / planned) / 1000 }));
+  return { ...props, beats, durationSec: total };
+}