@vfrey/vfrey 0.0.1 → 1.0.0-beta.0

package/src/remotion/films/engine/EngineMark.tsx

@@ -0,0 +1,17 @@
+import { AbsoluteFill } from "remotion";
+
+export function EngineMark({ label }: { label: string }) {
+  return (
+    <AbsoluteFill
+      style={{
+        background: "#0D47A1",
+        color: "#f6f3ec",
+        fontSize: 28,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      {label}
+    </AbsoluteFill>
+  );
+}

package/src/remotion/films/rea/ReaShort.tsx

@@ -0,0 +1,552 @@
+import type { ReactNode } from "react";
+import { AbsoluteFill, Audio, Easing, interpolate, Sequence, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
+import {
+  AnswerSlip,
+  AppPane,
+  ApproveButton,
+  ArrowShaft,
+  ChatWindow,
+  Chip,
+  Cloud,
+  CrossStamp,
+  EditorWindow,
+  EnterKey,
+  Funnel,
+  GateArm,
+  HexMonitor,
+  JsWindow,
+  LampBench,
+  Laptop,
+  LayerStack,
+  LockedFolder,
+  MiniBox,
+  MiniList,
+  NameTile,
+  NoMark,
+  NotesApp,
+  OfficialSeal,
+  ProofCard,
+  ReaPlate,
+  RepoCard,
+  ReportSheet,
+  ReviewSheet,
+  ScopeTower,
+  Tag,
+  TerminalWindow,
+} from "./drawings.js";
+import { playbackRate, reaScenes, tailPadSeconds, type ReaScene } from "./timing.js";
+
+const sans = '"Liberation Sans", Arial, sans-serif';
+
+function ease(frame: number, start: number, end: number, from = 0, to = 1) {
+  return interpolate(frame, [start, end], [from, to], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.bezier(0.16, 1, 0.3, 1),
+  });
+}
+
+function Caption({ narration, wavSeconds }: { narration: string; wavSeconds: number }) {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const sourceSec = (frame / fps) * playbackRate;
+  const spoken = Math.max(0.2, wavSeconds - tailPadSeconds);
+  const words = narration.split(/\s+/);
+  const weights = words.map((word) => Math.max(1, word.replace(/[^A-Za-z0-9]/g, "").length));
+  const total = weights.reduce((sum, weight) => sum + weight, 0);
+  let cursor = 0;
+  let active = -1;
+  if (sourceSec >= 0 && sourceSec < spoken) {
+    for (let index = 0; index < words.length; index++) {
+      const end = cursor + spoken * (weights[index] / total);
+      if (sourceSec >= cursor && sourceSec < end) active = index;
+      cursor = end;
+    }
+  }
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: 180,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "16px 48px 28px",
+        background: "linear-gradient(180deg, rgba(11,16,32,0), #0b1020 28%)",
+      }}
+    >
+      <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "0 12px", maxWidth: 980 }}>
+        {words.map((word, index) => (
+          <span
+            key={`${word}-${index}`}
+            style={{
+              fontFamily: sans,
+              fontSize: 36,
+              lineHeight: 1.25,
+              fontWeight: index === active ? 750 : 560,
+              color: index === active ? "#f0c14a" : "#f6f3ec",
+            }}
+          >
+            {word}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function Stage({ children, narration, wavSeconds }: { children: ReactNode; narration: string; wavSeconds: number }) {
+  const frame = useCurrentFrame();
+  const drift = Math.sin(frame / 55) * 30;
+  return (
+    <AbsoluteFill style={{ background: "#0b1020", fontFamily: sans, color: "#f6f3ec" }}>
+      <div
+        style={{
+          position: "absolute",
+          left: 40 + drift,
+          top: 220,
+          width: 900,
+          height: 900,
+          borderRadius: 900,
+          background: "radial-gradient(circle, rgba(240,193,74,0.16), transparent 68%)",
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          backgroundImage: "radial-gradient(rgba(255,255,255,0.05) 1.2px, transparent 1.2px)",
+          backgroundSize: "28px 28px",
+        }}
+      />
+      <div style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: 180, overflow: "hidden" }}>{children}</div>
+      <Caption narration={narration} wavSeconds={wavSeconds} />
+    </AbsoluteFill>
+  );
+}
+
+type SceneProps = { frames: number; narration: string; wavSeconds: number };
+
+function SceneNoSource({ frames, narration, wavSeconds }: SceneProps) {
+  const frame = useCurrentFrame();
+  const speak = frames - 21;
+  const typed = ease(frame, 8, speak * 0.48);
+  const filter = ease(frame, speak * 0.46, speak * 0.82);
+  const shake = frame > speak * 0.84 && frame < speak ? Math.sin(frame * 1.3) * 8 : 0;
+  return (
+    <Stage narration={narration} wavSeconds={wavSeconds}>
+      <div style={{ position: "absolute", left: 70, top: 16, width: 940, height: 1080, overflow: "hidden", borderRadius: 40, opacity: ease(frame, 0, 12) }}>
+        <NotesApp id="notes-a" query={"search".slice(0, Math.round(typed * 6))} filter={filter} width={940} />
+      </div>
+      <div style={{ position: "absolute", left: 210, top: 1188, translate: `${shake}px 0px` }}>
+        <LockedFolder id="lock-a" width={640} />
+      </div>
+      <Tag text="Source code" x={230} y={1136} />
+    </Stage>
+  );
+}
+
+function SceneMeet({ frames, narration, wavSeconds }: SceneProps) {
+  const frame = useCurrentFrame();
+  const speak = frames - 21;
+  const count = Math.round(ease(frame, 16, speak * 0.72, 180000, 364800));
+  const fill = ease(frame, speak * 0.62, speak * 0.86);
+  return (
+    <Stage narration={narration} wavSeconds={wavSeconds}>
+      <div style={{ position: "absolute", left: 160, top: 70, translate: `${ease(frame, 0, 16, -40, 0)}px 0px`, opacity: ease(frame, 0, 14) }}>
+        <ReaPlate id="plate-b" width={760} />
+      </div>
+      <div style={{ position: "absolute", left: 80, top: 460, scale: ease(frame, 8, 22, 0.94, 1) }}>
+        <RepoCard id="repo-b" pathName="morluto/rea" stars={count.toLocaleString("en-US")} fill={fill} dim={0} width={920} />
+      </div>
+      <Tag text="360,000+ stars" x={330} y={1080} />
+    </Stage>
+  );
+}
+
+function SceneConnection({ frames, narration, wavSeconds }: SceneProps) {
+  const frame = useCurrentFrame();
+  const speak = frames - 21;
+  const draw = ease(frame, 10, speak * 0.78);
+  const lit = draw * 3;
+  return (
+    <Stage narration={narration} wavSeconds={wavSeconds}>
+      <div style={{ position: "absolute", left: 120, top: 20 }}>
+        <ChatWindow id="chat-c" typed="" connected={0} width={840} />
+      </div>
+      <ArrowShaft progress={draw} x1={520} y1={560} x2={520} y2={860} />
+      <div style={{ position: "absolute", left: 140, top: 880 }}>
+        <LayerStack id="stack-c" lit={lit} width={800} />
+      </div>
+      <Tag text="Assistant" x={150} y={24} />
+      <Tag text="One connection" x={360} y={800} />
+    </Stage>
+  );
+}
+
+function SceneNotes({ frames, narration, wavSeconds }: SceneProps) {
+  const frame = useCurrentFrame();
+  const speak = frames - 21;
+  const open = ease(frame, 8, speak * 0.4);
+  return (
+    <Stage narration={narration} wavSeconds={wavSeconds}>
+      <div style={{ position: "absolute", left: 230, top: 10, scale: 1 - open * 0.08 }}>
+        <NotesApp id="notes-d" query="search" filter={1} width={620} />
+      </div>
+      <div style={{ position: "absolute", left: 70, top: 860, opacity: ease(frame, speak * 0.28, speak * 0.48), translate: `${ease(frame, speak * 0.28, speak * 0.5, 24, 0)}px 0px` }}>
+        <MiniBox id="box-d" width={240} />
+        <Tag text="Search box" x={20} y={180} />
+      </div>
+      <div style={{ position: "absolute", left: 400, top: 860, opacity: ease(frame, speak * 0.4, speak * 0.6) }}>
+        <Funnel id="fun-d" width={240} />
+        <Tag text="Filter" x={70} y={200} />
+      </div>
+      <div style={{ position: "absolute", left: 720, top: 860, opacity: ease(frame, speak * 0.52, speak * 0.74) }}>
+        <MiniList id="list-d" width={240} />
+        <Tag text="Results" x={40} y={200} />
+      </div>
+      <ArrowShaft progress={ease(frame, speak * 0.34, speak * 0.5)} x1={300} y1={980} x2={400} y2={980} />
+      <ArrowShaft progress={ease(frame, speak * 0.48, speak * 0.66)} x1={640} y1={980} x2={740} y2={980} />
+    </Stage>
+  );
+}
+
+function SceneSetup({ frames, narration, wavSeconds }: SceneProps) {
+  const frame = useCurrentFrame();
+  const speak = frames - 21;
+  const command = "npx rea-agents setup";
+  const typed = command.slice(0, Math.round(ease(frame, 6, speak * 0.7) * command.length));
+  const press = frame > speak * 0.74 && frame < speak * 0.9 ? ease(frame, speak * 0.74, speak * 0.8, 0, 1) : ease(frame, speak * 0.9, speak, 1, 0);
+  return (
+    <Stage narration={narration} wavSeconds={wavSeconds}>
+      <div style={{ position: "absolute", left: 50, top: 220 }}>
+        <TerminalWindow id="term-e" text={typed} width={980} />
+      </div>
+      <div style={{ position: "absolute", left: 760, top: 860 }}>
+        <EnterKey id="key-e" press={press} width={220} />
+      </div>
+      <Tag text="Setup" x={80} y={160} />
+    </Stage>
+  );
+}
+
+function ScenePick({ frames, narration, wavSeconds }: SceneProps) {
+  const frame = useCurrentFrame();
+  const speak = frames - 21;
+  const pick = ease(frame, 8, speak * 0.35);
+  const sheet = ease(frame, speak * 0.32, speak * 0.62);
+  const rows = ease(frame, speak * 0.5, speak * 0.9) * 3;
+  return (
+    <Stage narration={narration} wavSeconds={wavSeconds}>
+      <div style={{ position: "absolute", left: 40, top: 40 + pick * 40, scale: 1 + pick * 0.04 }}>
+        <NameTile id="tile-claude" name="Claude Code" ring={1} dashed={false} width={240} />
+      </div>
+      <div style={{ position: "absolute", left: 290, top: 40 }}>
+        <NameTile id="tile-codex" name="Codex" ring={0} dashed={false} width={240} />
+      </div>
+      <div style={{ position: "absolute", left: 540, top: 40 }}>
+        <NameTile id="tile-cursor" name="Cursor" ring={0} dashed={false} width={240} />
+      </div>
+      <div style={{ position: "absolute", left: 790, top: 40 }}>
+        <NameTile id="tile-more" name="+" ring={0} dashed width={200} />
+      </div>
+      <div style={{ position: "absolute", left: 180, top: 420 + (1 - sheet) * 80, opacity: sheet }}>
+        <ReviewSheet id="review-f" rows={rows} width={720} />
+      </div>
+    </Stage>
+  );
+}
+
+function SceneApprove({ frames, narration, wavSeconds }: SceneProps) {
+  const frame = useCurrentFrame();
+  const speak = frames - 21;
+  const dip = frame > speak * 0.28 && frame < speak * 0.48 ? 1 : 0;
+  const spin = ease(frame, speak * 0.45, speak * 0.72) * 360;
+  const plug = ease(frame, speak * 0.68, speak * 0.92);
+  return (
+    <Stage narration={narration} wavSeconds={wavSeconds}>
+      <div style={{ position: "absolute", left: 300, top: 80 }}>
+        <NameTile id="tile-g" name="Assistant" ring={plug} dashed={false} width={420} />
+      </div>
+      <div
+        style={{
+          position: "absolute",
+          left: 760,
+          top: 130,
+          width: 110,
+          height: 110,
+          borderRadius: 55,
+          border: "10px solid #f0c14a",
+          borderRightColor: "transparent",
+          rotate: `${spin}deg`,
+        }}
+      />
+      <div style={{ position: "absolute", left: 250, top: 520, translate: `0px ${dip * 16}px`, scale: 1 - dip * 0.04 }}>
+        <ApproveButton id="approve-g" width={560} />
+      </div>
+      <div style={{ position: "absolute", left: 430, top: 860, opacity: plug, scale: ease(frame, speak * 0.7, speak * 0.9, 0.8, 1) }}>
+        <div style={{ width: 180, height: 70, borderRadius: 35, background: "#3dce8e", color: "#062216", fontSize: 32, fontWeight: 750, display: "flex", alignItems: "center", justifyContent: "center" }}>
+          Connected
+        </div>
+      </div>
+    </Stage>
+  );
+}
+
+function SceneAsk({ frames, narration, wavSeconds }: SceneProps) {
+  const frame = useCurrentFrame();
+  const speak = frames - 21;
+  const question = "Understand how search works in Notes, show the proof, and build a similar feature.";
+  const shown = question.slice(0, Math.round(ease(frame, 8, speak * 0.86) * question.length));
+  const pulse = frame > speak * 0.45 && frame < speak * 0.62 ? 1.06 : 1;
+  return (
+    <Stage narration={narration} wavSeconds={wavSeconds}>
+      <div style={{ position: "absolute", left: 80, top: 30 }}>
+        <ChatWindow id="chat-h" typed="" connected={1} width={920} />
+      </div>
+      <div style={{ position: "absolute", left: 140, top: 250, width: 780, background: "#f0c14a", color: "#2a2108", borderRadius: 28, padding: "22px 28px", fontSize: 34, fontWeight: 650, lineHeight: 1.3 }}>
+        {shown}
+      </div>
+      <div style={{ position: "absolute", right: 70, top: 980, scale: pulse }}>
+        <NotesApp id="thumb-h" query="search" filter={1} width={360} />
+      </div>
+    </Stage>
+  );
+}
+
+function SceneLocal({ frames, narration, wavSeconds }: SceneProps) {
+  const frame = useCurrentFrame();
+  const speak = frames - 21;
+  const rise = ease(frame, 10, speak * 0.55);
+  const stamp = ease(frame, speak * 0.58, speak * 0.78);
+  return (
+    <Stage narration={narration} wavSeconds={wavSeconds}>
+      <div style={{ position: "absolute", left: 70, top: 360 }}>
+        <Laptop id="lap-i" width={940} />
+      </div>
+      <div style={{ position: "absolute", left: 250, top: 470, opacity: 0.95 }}>
+        <NotesApp id="mini-i" query="search" filter={1} width={280} />
+      </div>
+      <div style={{ position: "absolute", left: 560, top: 500 }}>
+        <ChatWindow id="mini-chat-i" typed="" connected={1} width={300} />
+      </div>
+      <div style={{ position: "absolute", left: 700, top: 40 }}>
+        <Cloud id="cloud-i" width={280} />
+      </div>
+      <ArrowShaft progress={rise} x1={620} y1={420} x2={760} y2={220} />
+      <div style={{ position: "absolute", left: 700, top: 180, scale: ease(frame, speak * 0.55, speak * 0.75, 1.3, 1), opacity: stamp }}>
+        <NoMark id="no-i" width={150} />
+      </div>
+      <Tag text="Your computer" x={90} y={300} />
+      <Tag text="Not uploaded" x={620} y={16} />
+    </Stage>
+  );
+}
+
+function SceneAnswer({ frames, narration, wavSeconds }: SceneProps) {
+  const frame = useCurrentFrame();
+  const speak = frames - 21;
+  const shown = ease(frame, 8, speak * 0.9) * 3;
+  return (
+    <Stage narration={narration} wavSeconds={wavSeconds}>
+      <div style={{ position: "absolute", left: 160, top: 40, opacity: 0.25 }}>
+        <ChatWindow id="back-j" typed="" connected={1} width={760} />
+      </div>
+      <div style={{ position: "absolute", left: 180, top: 80 }}>
+        <ReportSheet id="report-j" shown={shown} width={720} />
+      </div>
+    </Stage>
+  );
+}
+
+function SceneJs({ frames, narration, wavSeconds }: SceneProps) {
+  const frame = useCurrentFrame();
+  const speak = frames - 21;
+  const draw = ease(frame, 12, speak * 0.75);
+  return (
+    <Stage narration={narration} wavSeconds={wavSeconds}>
+      <div style={{ position: "absolute", left: 40, top: 80 }}>
+        <JsWindow id="js-k" width={520} />
+      </div>
+      <ArrowShaft progress={draw} x1={560} y1={280} x2={760} y2={280} />
+      <div style={{ position: "absolute", left: 760, top: 160, opacity: ease(frame, 8, speak * 0.4) }}>
+        <AnswerSlip id="slip-k" width={260} />
+      </div>
+      <Tag text="JavaScript app" x={50} y={40} />
+      <Tag text="Nothing extra" x={700} y={80} />
+    </Stage>
+  );
+}
+
+function SceneCompiled({ frames, narration, wavSeconds }: SceneProps) {
+  const frame = useCurrentFrame();
+  const speak = frames - 21;
+  const lit = ease(frame, speak * 0.35, speak * 0.6);
+  const chip = ease(frame, speak * 0.62, speak * 0.82);
+  return (
+    <Stage narration={narration} wavSeconds={wavSeconds}>
+      <div style={{ position: "absolute", left: 30, top: 220 }}>
+        <Chip id="chip-l" width={250} />
+      </div>
+      <Tag text="Compiled program" x={20} y={150} />
+      <div style={{ position: "absolute", left: 300, top: 160, translate: `0px ${-lit * 16}px` }}>
+        <LampBench id="hop-l" lit={lit} width={220} />
+        <Tag text="Hopper" x={50} y={220} />
+      </div>
+      <div style={{ position: "absolute", left: 530, top: 180, opacity: 0.9 }}>
+        <HexMonitor id="ghi-l" width={220} />
+        <Tag text="Ghidra" x={55} y={210} />
+      </div>
+      <div style={{ position: "absolute", left: 760, top: 160, opacity: 0.9 }}>
+        <ScopeTower id="ida-l" width={220} />
+        <Tag text="IDA" x={70} y={230} />
+      </div>
+      <div style={{ position: "absolute", left: 390, top: 520, opacity: chip, scale: ease(frame, speak * 0.62, speak * 0.8, 1.2, 1) }}>
+        <ApproveButton id="hop-ok" width={280} />
+      </div>
+    </Stage>
+  );
+}
+
+function SceneBuild({ frames, narration, wavSeconds }: SceneProps) {
+  const frame = useCurrentFrame();
+  const speak = frames - 21;
+  const lines = ease(frame, 8, speak * 0.55) * 5;
+  const search = ease(frame, speak * 0.5, speak * 0.78);
+  const link = ease(frame, speak * 0.35, speak * 0.6);
+  return (
+    <Stage narration={narration} wavSeconds={wavSeconds}>
+      <div style={{ position: "absolute", left: 40, top: 220 }}>
+        <ProofCard id="proof-m" width={420} />
+      </div>
+      <ArrowShaft progress={link} x1={460} y1={420} x2={560} y2={420} />
+      <div style={{ position: "absolute", left: 540, top: 180 }}>
+        <EditorWindow id="edit-m" lines={lines} search={search} width={500} />
+      </div>
+      <Tag text="Proof" x={60} y={160} />
+      <Tag text="Your project" x={620} y={140} />
+    </Stage>
+  );
+}
+
+function SceneAllowed({ frames, narration, wavSeconds }: SceneProps) {
+  const frame = useCurrentFrame();
+  const speak = frames - 21;
+  const open = ease(frame, speak * 0.4, speak * 0.75);
+  const stamp = ease(frame, speak * 0.22, speak * 0.42);
+  return (
+    <Stage narration={narration} wavSeconds={wavSeconds}>
+      <div style={{ position: "absolute", left: 40, top: 160 }}>
+        <AppPane id="ok-app" locked={false} width={420} />
+      </div>
+      <div style={{ position: "absolute", left: 40, top: 620, opacity: stamp }}>
+        <GateArm id="ok-gate" open={open} blocked={false} width={460} />
+      </div>
+      <div style={{ position: "absolute", left: 560, top: 160 }}>
+        <AppPane id="no-app" locked width={420} />
+      </div>
+      <div style={{ position: "absolute", left: 560, top: 620 }}>
+        <GateArm id="no-gate" open={0} blocked width={460} />
+      </div>
+      <Tag text="Research" x={40} y={80} />
+      <Tag text="Learning" x={220} y={80} />
+      <Tag text="Yours" x={430} y={80} />
+    </Stage>
+  );
+}
+
+function SceneOfficial({ frames, narration, wavSeconds }: SceneProps) {
+  const frame = useCurrentFrame();
+  const speak = frames - 21;
+  const seal = ease(frame, speak * 0.25, speak * 0.48);
+  const cross = ease(frame, speak * 0.55, speak * 0.78);
+  return (
+    <Stage narration={narration} wavSeconds={wavSeconds}>
+      <div style={{ position: "absolute", left: 140, top: 40 }}>
+        <RepoCard id="real-o" pathName="morluto/rea" stars="364,800" fill={1} dim={0} width={800} />
+      </div>
+      <div style={{ position: "absolute", left: 620, top: 80, scale: ease(frame, speak * 0.25, speak * 0.45, 1.4, 1), opacity: seal }}>
+        <OfficialSeal id="seal-o" width={160} />
+      </div>
+      <div style={{ position: "absolute", left: 140, top: 620, opacity: 1 - cross * 0.35 }}>
+        <RepoCard id="fake-o" pathName="lookalike/rea" stars="—" fill={0} dim={cross} width={800} />
+      </div>
+      <div style={{ position: "absolute", left: 460, top: 760, scale: ease(frame, speak * 0.55, speak * 0.72, 1.4, 1), opacity: cross }}>
+        <CrossStamp id="cross-o" width={180} />
+      </div>
+      <Tag text="Official" x={80} y={20} />
+      <Tag text="Lookalike" x={80} y={600} />
+    </Stage>
+  );
+}
+
+function SceneClose({ frames, narration, wavSeconds }: SceneProps) {
+  const frame = useCurrentFrame();
+  const speak = frames - 21;
+  const command = "npx rea-agents setup";
+  const typed = command.slice(0, Math.round(ease(frame, 10, speak * 0.75) * command.length));
+  const glow = ease(frame, speak * 0.7, speak * 0.9);
+  return (
+    <Stage narration={narration} wavSeconds={wavSeconds}>
+      <div style={{ position: "absolute", left: 140, top: 80, filter: `drop-shadow(0 0 ${18 + glow * 28}px rgba(240,193,74,0.85))` }}>
+        <ReaPlate id="plate-p" width={800} />
+      </div>
+      <div style={{ position: "absolute", left: 160, top: 430, color: "#f0c14a", fontSize: 36, fontWeight: 650 }}>Reverse Engineer Anything</div>
+      <div style={{ position: "absolute", left: 50, top: 560 }}>
+        <TerminalWindow id="term-p" text={typed} width={980} />
+      </div>
+    </Stage>
+  );
+}
+
+const views: Record<string, (props: SceneProps) => ReactNode> = {
+  "no-source": SceneNoSource,
+  "meet-rea": SceneMeet,
+  "one-connection": SceneConnection,
+  "notes-example": SceneNotes,
+  "setup-command": SceneSetup,
+  "pick-review": ScenePick,
+  "approve-restart": SceneApprove,
+  compiled: SceneCompiled,
+  "the-ask": SceneAsk,
+  "stays-local": SceneLocal,
+  "the-answer": SceneAnswer,
+  "js-lane": SceneJs,
+  "compiled-lane": SceneCompiled,
+  "build-beside-proof": SceneBuild,
+  "allowed-only": SceneAllowed,
+  "official-only": SceneOfficial,
+  close: SceneClose,
+};
+
+function SceneAudio({ scene }: { scene: ReaScene }) {
+  const View = views[scene.id];
+  return (
+    <Sequence from={scene.from} durationInFrames={scene.durationInFrames} name={scene.id}>
+      <Audio src={staticFile(scene.file)} playbackRate={playbackRate} />
+      {View ? <View frames={scene.durationInFrames} narration={scene.narration} wavSeconds={scene.wavSeconds} /> : null}
+    </Sequence>
+  );
+}
+
+export function ReaShort() {
+  const frame = useCurrentFrame();
+  const { durationInFrames } = useVideoConfig();
+  return (
+    <AbsoluteFill style={{ background: "#0b1020" }}>
+      <Audio
+        src={staticFile("bed.wav")}
+        volume={
+          interpolate(frame, [0, 24], [0, 0.08], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) *
+          interpolate(frame, [durationInFrames - 36, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" })
+        }
+      />
+      {reaScenes.map((scene) => (
+        <SceneAudio key={scene.id} scene={scene} />
+      ))}
+    </AbsoluteFill>
+  );
+}