@vfrey/vfrey 0.0.1 → 1.0.0-beta.0

package/src/remotion/AiLabel.tsx

@@ -0,0 +1,26 @@
+import { DISCLOSURE_LABEL, FRAMEY_PALETTE } from "../render/framey-template.js";
+
+/** The burned-in AI disclosure chip. Every vertical template shows it on every frame, the same as Framey. */
+export function AiLabel() {
+  return (
+    <div
+      data-ai-label="true"
+      style={{
+        position: "absolute",
+        right: 72,
+        bottom: 56,
+        padding: "10px 16px",
+        border: `3px solid ${FRAMEY_PALETTE.sky}`,
+        background: FRAMEY_PALETTE.black,
+        color: FRAMEY_PALETTE.ice,
+        fontFamily: '"JetBrains Mono", "Liberation Mono", Menlo, monospace',
+        fontSize: 24,
+        fontWeight: 500,
+        letterSpacing: 3,
+        lineHeight: 1.2,
+      }}
+    >
+      {DISCLOSURE_LABEL}
+    </div>
+  );
+}

package/src/remotion/Root.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode } from "react";
+import { Composition, type CalculateMetadataFunction } from "remotion";
+import type { RenderProps } from "@vfrey/contracts";
+import { sampleProps } from "./defaults.js";
+import { ClaudeFilm, claudeDurationInFrames } from "./films/claude/ClaudeFilm.js";
+import { EngineMark } from "./films/engine/EngineMark.js";
+import { ReaShort } from "./films/rea/ReaShort.js";
+import { reaDurationInFrames } from "./films/rea/timing.js";
+import { EditorialSplit } from "./templates/EditorialSplit.js";
+import { KineticType } from "./templates/KineticType.js";
+import { SignalBoard } from "./templates/SignalBoard.js";
+
+const fps = 30;
+
+type LooseProps = Record<string, unknown>;
+
+const metadata: CalculateMetadataFunction<LooseProps> = ({ props }) => {
+  const typed = props as unknown as RenderProps;
+  return {
+    durationInFrames: Math.max(fps, Math.round(typed.durationSec * fps)),
+    fps,
+    width: 1080,
+    height: 1920,
+  };
+};
+
+function loose(component: (props: RenderProps) => ReactNode) {
+  return component as unknown as (props: LooseProps) => ReactNode;
+}
+
+function looseProps(props: RenderProps): LooseProps {
+  return props as unknown as LooseProps;
+}
+
+export function RemotionRoot() {
+  return (
+    <>
+      <Composition
+        id="KineticType"
+        component={loose(KineticType)}
+        durationInFrames={fps * 20}
+        fps={fps}
+        width={1080}
+        height={1920}
+        defaultProps={looseProps(sampleProps("KineticType"))}
+        calculateMetadata={metadata}
+      />
+      <Composition
+        id="EditorialSplit"
+        component={loose(EditorialSplit)}
+        durationInFrames={fps * 48}
+        fps={fps}
+        width={1080}
+        height={1920}
+        defaultProps={looseProps(sampleProps("EditorialSplit"))}
+        calculateMetadata={metadata}
+      />
+      <Composition
+        id="SignalBoard"
+        component={loose(SignalBoard)}
+        durationInFrames={fps * 32}
+        fps={fps}
+        width={1080}
+        height={1920}
+        defaultProps={looseProps(sampleProps("SignalBoard"))}
+        calculateMetadata={metadata}
+      />
+      <Composition id="ReaShort" component={ReaShort} durationInFrames={reaDurationInFrames} fps={fps} width={1080} height={1920} />
+      <Composition id="ClaudeFilm" component={ClaudeFilm} durationInFrames={claudeDurationInFrames} fps={fps} width={1080} height={1920} />
+      <Composition id="EngineMark" component={EngineMark} durationInFrames={15} fps={30} width={320} height={180} defaultProps={{ label: "vfrey" }} />
+    </>
+  );
+}

package/src/remotion/defaults.ts

@@ -0,0 +1,26 @@
+import { TEMPLATES } from "@vfrey/contracts";
+import type { RenderProps, TemplateId } from "@vfrey/contracts";
+
+export function sampleProps(templateId: TemplateId): RenderProps {
+  const spec = TEMPLATES[templateId];
+  const palette = spec.palettes[0]!;
+  const beats = [
+    { role: "hook" as const, text: "The rate did not move. The lock window did.", caption: "The lock window moved", seconds: spec.durationTargetSec * 0.18 },
+    { role: "setup" as const, text: "Lenders price a lock off the forward curve, not today's headline.", caption: "Forward curve", seconds: spec.durationTargetSec * 0.22 },
+    { role: "turn" as const, text: "A pause can raise the fee even when the policy rate stays put.", caption: "The fee can rise", seconds: spec.durationTargetSec * 0.22 },
+    { role: "evidence" as const, text: "Watch the two-year spread and the lock desk's same-day cutoff.", caption: "Spread and cutoff", seconds: spec.durationTargetSec * 0.2 },
+    { role: "cta" as const, text: "If you are mid-lock, ask for the desk's cutoff in writing.", caption: "Get the cutoff", seconds: spec.durationTargetSec * 0.18 },
+  ];
+  return {
+    templateId,
+    title: "What a Fed pause does to a mortgage lock",
+    hook: beats[0]!.text,
+    beats,
+    palette,
+    captionStyle: spec.captionStyle,
+    pacing: spec.pacing,
+    voiceoverFile: null,
+    layoutSeed: 2,
+    durationSec: spec.durationTargetSec,
+  };
+}