src/chronixel-src/split/SplitScene.tsx

// @ts-nocheck
import React from "react";
import { AbsoluteFill } from "remotion";
import { W, H } from "../chronixel/theme";

/**
 * Wraps any full-frame scene into a split "card" occupying one side of the
 * frame, with the rest TRANSPARENT (alpha). Rendered with --codec=prores
 * --prores-profile=4444 it produces a clip you drop on V2 over the talking
 * head — the empty side shows the person through, no chroma key / no crop.
 *
 * The scene renders at full 1920×1080 internally and is scaled to fit the
 * panel width, vertically centred — so layouts are preserved, not squished.
 */
export const SplitScene: React.FC<{
  side?: "left" | "right";
  widthPct?: number; // panel width as % of frame
  children: React.ReactNode;
}> = ({ side = "left", widthPct = 62, children }) => {
  const panelW = (W * widthPct) / 100;
  const scale = panelW / W;
  const panelH = H * scale;
  return (
    <AbsoluteFill style={{ backgroundColor: "transparent" }}>
      <div
        style={{
          position: "absolute",
          [side]: 0,
          top: "50%",
          width: panelW,
          height: panelH,
          transform: "translateY(-50%)",
          overflow: "hidden",
        }}
      >
        <div style={{ width: W, height: H, transform: `scale(${scale})`, transformOrigin: "top left" }}>
          {children}
        </div>
      </div>
    </AbsoluteFill>
  );
};