Green screen pipeline: new tools, AnimatedBackground, caption burn fixes
Add green_screen_processor (auto-detect + rembg fallback) and green_screen_composite (4 layout presets with alpha compositing) tools to automate the full keying-to-composite pipeline. Remotion: add AnimatedBackground with gradient mesh and floating orbs to Explainer, fix caption burn tool (remove entry point arg, auto-detect dimensions, extend TalkingHead duration to 300s). Update scene-director, compose-director, and asset-director skill docs with green screen workflow steps and component constraints.
This commit is contained in:
calesthio
@@ -44,6 +44,97 @@ const { fontFamily } = loadFont("normal", {
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Animated Background — Gradient Mesh + Floating Orbs
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const AnimatedBackground: React.FC<{ style?: "fintech" | "default" }> = ({
|
||||
style: bgStyle = "default",
|
||||
}) => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps, durationInFrames, width, height } = useVideoConfig();
|
||||
const progress = frame / durationInFrames;
|
||||
|
||||
// Slow-moving gradient angles
|
||||
const angle1 = 135 + Math.sin(frame / (fps * 8)) * 30;
|
||||
const angle2 = 225 + Math.cos(frame / (fps * 6)) * 25;
|
||||
|
||||
// Color stops shift over time
|
||||
const shift = Math.sin(frame / (fps * 12)) * 0.15;
|
||||
|
||||
const gradient = `
|
||||
radial-gradient(ellipse at ${30 + Math.sin(frame / (fps * 10)) * 20}% ${40 + Math.cos(frame / (fps * 8)) * 20}%,
|
||||
rgba(15, 23, 60, 1) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at ${70 + Math.cos(frame / (fps * 7)) * 20}% ${60 + Math.sin(frame / (fps * 9)) * 25}%,
|
||||
rgba(30, 10, 60, 0.8) 0%, transparent 55%),
|
||||
radial-gradient(ellipse at ${50 + Math.sin(frame / (fps * 14)) * 30}% ${20 + Math.cos(frame / (fps * 11)) * 15}%,
|
||||
rgba(0, 40, 60, 0.6) 0%, transparent 50%),
|
||||
linear-gradient(${angle1}deg, #060918 0%, #0B1026 40%, #0F0A2E 70%, #080D1F 100%)
|
||||
`;
|
||||
|
||||
// Floating orbs
|
||||
const orbs = [
|
||||
{ x: 20, y: 30, size: 300, color: "rgba(34, 211, 238, 0.08)", speedX: 7, speedY: 11 },
|
||||
{ x: 70, y: 60, size: 250, color: "rgba(139, 92, 246, 0.1)", speedX: 9, speedY: 8 },
|
||||
{ x: 40, y: 80, size: 200, color: "rgba(16, 185, 129, 0.07)", speedX: 13, speedY: 6 },
|
||||
{ x: 80, y: 20, size: 350, color: "rgba(245, 158, 11, 0.06)", speedX: 11, speedY: 14 },
|
||||
{ x: 10, y: 70, size: 180, color: "rgba(236, 72, 153, 0.05)", speedX: 8, speedY: 10 },
|
||||
];
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ background: gradient }}>
|
||||
{/* Floating glow orbs */}
|
||||
{orbs.map((orb, i) => {
|
||||
const ox = orb.x + Math.sin(frame / (fps * orb.speedX)) * 15;
|
||||
const oy = orb.y + Math.cos(frame / (fps * orb.speedY)) * 12;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: `${ox}%`,
|
||||
top: `${oy}%`,
|
||||
width: orb.size,
|
||||
height: orb.size,
|
||||
borderRadius: "50%",
|
||||
background: orb.color,
|
||||
filter: `blur(${orb.size * 0.4}px)`,
|
||||
transform: "translate(-50%, -50%)",
|
||||
willChange: "transform",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Subtle grid overlay */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: "60px 60px",
|
||||
opacity: 0.5 + Math.sin(frame / (fps * 20)) * 0.2,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Top gradient fade for depth */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: "30%",
|
||||
background: "linear-gradient(to bottom, rgba(6,9,24,0.4), transparent)",
|
||||
}}
|
||||
/>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Types — aligned with edit_decisions artifact schema
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -353,7 +444,9 @@ const SceneRenderer: React.FC<{ cut: Cut }> = ({ cut }) => {
|
||||
};
|
||||
|
||||
// Resolve the scene element based on cut type, then wrap with backgroundImage if set
|
||||
const bgColor = cut.backgroundImage ? "transparent" : cut.backgroundColor;
|
||||
// Use transparent bg so the animated gradient background shows through
|
||||
const rawBg = cut.backgroundImage ? "transparent" : cut.backgroundColor;
|
||||
const bgColor = (rawBg === "#0F172A" || rawBg === "#0f172a") ? "transparent" : rawBg;
|
||||
|
||||
// Explicit component types
|
||||
if (cut.type === "text_card" && cut.text) {
|
||||
@@ -539,7 +632,10 @@ export const Explainer: React.FC<ExplainerProps> = ({
|
||||
const { fps, durationInFrames } = useVideoConfig();
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ background: "#0F172A", fontFamily }}>
|
||||
<AbsoluteFill style={{ background: "#060918", fontFamily }}>
|
||||
{/* Layer 0: Animated gradient background */}
|
||||
<AnimatedBackground style="fintech" />
|
||||
|
||||
{/* Layer 1: Visual scenes */}
|
||||
{cuts.map((cut) => {
|
||||
const from = Math.round(cut.in_seconds * fps);
|
||||
|
||||
@@ -65,13 +65,14 @@ export const Root: React.FC = () => {
|
||||
<Composition
|
||||
id="TalkingHead"
|
||||
component={TalkingHead}
|
||||
durationInFrames={30 * 30}
|
||||
durationInFrames={30 * 300}
|
||||
fps={30}
|
||||
width={1080}
|
||||
height={1920}
|
||||
defaultProps={{
|
||||
videoSrc: "",
|
||||
captions: [],
|
||||
overlays: [],
|
||||
wordsPerPage: 4,
|
||||
fontSize: 52,
|
||||
highlightColor: "#22D3EE",
|
||||
|
||||
@@ -1,9 +1,304 @@
|
||||
import { AbsoluteFill, OffthreadVideo } from "remotion";
|
||||
import {
|
||||
AbsoluteFill,
|
||||
OffthreadVideo,
|
||||
Sequence,
|
||||
interpolate,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
} from "remotion";
|
||||
import { CaptionOverlay, WordCaption } from "./components/CaptionOverlay";
|
||||
import { TextCard } from "./components/TextCard";
|
||||
import { StatCard } from "./components/StatCard";
|
||||
import { CalloutBox } from "./components/CalloutBox";
|
||||
import { ComparisonCard } from "./components/ComparisonCard";
|
||||
import { BarChart } from "./components/charts/BarChart";
|
||||
import { LineChart } from "./components/charts/LineChart";
|
||||
import { PieChart } from "./components/charts/PieChart";
|
||||
import { KPIGrid } from "./components/charts/KPIGrid";
|
||||
import { HeroTitle } from "./components/HeroTitle";
|
||||
import { SectionTitle } from "./components/SectionTitle";
|
||||
import { StatReveal } from "./components/StatReveal";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Overlay types for talking-head video
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface TalkingHeadOverlay {
|
||||
id?: string;
|
||||
type: string;
|
||||
in_seconds: number;
|
||||
out_seconds: number;
|
||||
position?:
|
||||
| "lower_third"
|
||||
| "upper_third"
|
||||
| "left_panel"
|
||||
| "right_panel"
|
||||
| "full_overlay";
|
||||
// Component-specific props (same as Explainer Cut)
|
||||
text?: string;
|
||||
stat?: string;
|
||||
subtitle?: string;
|
||||
callout_type?: "info" | "warning" | "tip" | "quote";
|
||||
title?: string;
|
||||
leftLabel?: string;
|
||||
rightLabel?: string;
|
||||
leftValue?: string;
|
||||
rightValue?: string;
|
||||
chartData?: any[];
|
||||
chartSeries?: any[];
|
||||
chartColors?: string[];
|
||||
chartAnimation?: string;
|
||||
donut?: boolean;
|
||||
centerLabel?: string;
|
||||
centerValue?: string;
|
||||
showGrid?: boolean;
|
||||
showValues?: boolean;
|
||||
showLegend?: boolean;
|
||||
showMarkers?: boolean;
|
||||
columns?: 2 | 3 | 4;
|
||||
// Styling
|
||||
backgroundColor?: string;
|
||||
color?: string;
|
||||
accentColor?: string;
|
||||
fontSize?: number;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Position presets for 9:16 (1080x1920) frame
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const POSITION_STYLES: Record<string, React.CSSProperties> = {
|
||||
lower_third: {
|
||||
position: "absolute",
|
||||
bottom: 320, // Above caption area (~1600px)
|
||||
left: 40,
|
||||
right: 40,
|
||||
height: 480,
|
||||
},
|
||||
upper_third: {
|
||||
position: "absolute",
|
||||
top: 80,
|
||||
left: 40,
|
||||
right: 40,
|
||||
height: 480,
|
||||
},
|
||||
left_panel: {
|
||||
position: "absolute",
|
||||
top: 200,
|
||||
left: 40,
|
||||
width: 480,
|
||||
bottom: 400,
|
||||
},
|
||||
right_panel: {
|
||||
position: "absolute",
|
||||
top: 200,
|
||||
right: 40,
|
||||
width: 480,
|
||||
bottom: 400,
|
||||
},
|
||||
full_overlay: {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Overlay component dispatcher — maps overlay type to Remotion component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const OverlayContent: React.FC<{ overlay: TalkingHeadOverlay }> = ({
|
||||
overlay,
|
||||
}) => {
|
||||
const bgColor = overlay.backgroundColor || "#0F172A";
|
||||
|
||||
if (overlay.type === "text_card" && overlay.text) {
|
||||
return (
|
||||
<TextCard
|
||||
text={overlay.text}
|
||||
fontSize={overlay.fontSize}
|
||||
color={overlay.color}
|
||||
backgroundColor={bgColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (overlay.type === "stat_card" && overlay.stat) {
|
||||
return (
|
||||
<StatCard
|
||||
stat={overlay.stat}
|
||||
subtitle={overlay.subtitle}
|
||||
accentColor={overlay.accentColor}
|
||||
backgroundColor={bgColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (overlay.type === "callout" && overlay.text) {
|
||||
return (
|
||||
<CalloutBox
|
||||
text={overlay.text}
|
||||
type={overlay.callout_type}
|
||||
title={overlay.title}
|
||||
borderColor={overlay.accentColor}
|
||||
backgroundColor={overlay.backgroundColor}
|
||||
textColor={overlay.color}
|
||||
containerBackgroundColor={bgColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (
|
||||
overlay.type === "comparison" &&
|
||||
overlay.leftLabel &&
|
||||
overlay.rightLabel
|
||||
) {
|
||||
return (
|
||||
<ComparisonCard
|
||||
leftLabel={overlay.leftLabel}
|
||||
rightLabel={overlay.rightLabel}
|
||||
leftValue={overlay.leftValue || ""}
|
||||
rightValue={overlay.rightValue || ""}
|
||||
title={overlay.title}
|
||||
backgroundColor={bgColor}
|
||||
textColor={overlay.color}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (overlay.type === "bar_chart" && overlay.chartData) {
|
||||
return (
|
||||
<BarChart
|
||||
data={overlay.chartData}
|
||||
title={overlay.title}
|
||||
colors={overlay.chartColors}
|
||||
animationStyle={(overlay.chartAnimation as any) || "grow-up"}
|
||||
showValues={overlay.showValues}
|
||||
backgroundColor={bgColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (overlay.type === "line_chart" && overlay.chartSeries) {
|
||||
return (
|
||||
<LineChart
|
||||
series={overlay.chartSeries}
|
||||
title={overlay.title}
|
||||
colors={overlay.chartColors}
|
||||
animationStyle={(overlay.chartAnimation as any) || "draw"}
|
||||
showGrid={overlay.showGrid}
|
||||
showMarkers={overlay.showMarkers}
|
||||
showLegend={overlay.showLegend}
|
||||
backgroundColor={bgColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (overlay.type === "pie_chart" && overlay.chartData) {
|
||||
return (
|
||||
<PieChart
|
||||
data={overlay.chartData}
|
||||
title={overlay.title}
|
||||
colors={overlay.chartColors}
|
||||
animationStyle={(overlay.chartAnimation as any) || "expand"}
|
||||
donut={overlay.donut}
|
||||
centerLabel={overlay.centerLabel}
|
||||
centerValue={overlay.centerValue}
|
||||
showLegend={overlay.showLegend}
|
||||
backgroundColor={bgColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (overlay.type === "kpi_grid" && overlay.chartData) {
|
||||
return (
|
||||
<KPIGrid
|
||||
metrics={overlay.chartData}
|
||||
title={overlay.title}
|
||||
columns={overlay.columns}
|
||||
colors={overlay.chartColors}
|
||||
animationStyle={(overlay.chartAnimation as any) || "count-up"}
|
||||
backgroundColor={bgColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (overlay.type === "hero_title" && overlay.text) {
|
||||
return <HeroTitle title={overlay.text} subtitle={overlay.subtitle} />;
|
||||
}
|
||||
if (overlay.type === "section_title" && overlay.text) {
|
||||
return (
|
||||
<SectionTitle
|
||||
title={overlay.text}
|
||||
subtitle={overlay.subtitle}
|
||||
accentColor={overlay.accentColor}
|
||||
position="top-left"
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (overlay.type === "stat_reveal" && overlay.text) {
|
||||
return (
|
||||
<StatReveal
|
||||
stat={overlay.text}
|
||||
label={overlay.subtitle}
|
||||
accentColor={overlay.accentColor}
|
||||
position="bottom-right"
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Positioned overlay wrapper — handles position + fade in/out
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const PositionedOverlay: React.FC<{ overlay: TalkingHeadOverlay }> = ({
|
||||
overlay,
|
||||
}) => {
|
||||
const frame = useCurrentFrame();
|
||||
const { durationInFrames } = useVideoConfig();
|
||||
|
||||
// Fade in over 8 frames (~0.27s), fade out over 8 frames
|
||||
const fadeIn = interpolate(frame, [0, 8], [0, 1], {
|
||||
extrapolateLeft: "clamp",
|
||||
extrapolateRight: "clamp",
|
||||
});
|
||||
const fadeOut = interpolate(
|
||||
frame,
|
||||
[durationInFrames - 8, durationInFrames],
|
||||
[1, 0],
|
||||
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
|
||||
);
|
||||
const opacity = fadeIn * fadeOut;
|
||||
|
||||
const position = overlay.position || "lower_third";
|
||||
const posStyle = POSITION_STYLES[position] || POSITION_STYLES.lower_third;
|
||||
const isFullOverlay = position === "full_overlay";
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
...posStyle,
|
||||
opacity,
|
||||
overflow: "hidden",
|
||||
borderRadius: isFullOverlay ? 0 : 16,
|
||||
boxShadow: isFullOverlay
|
||||
? "none"
|
||||
: "0 8px 32px rgba(0, 0, 0, 0.4)",
|
||||
}}
|
||||
>
|
||||
{isFullOverlay && (
|
||||
<AbsoluteFill style={{ background: "rgba(0, 0, 0, 0.7)" }} />
|
||||
)}
|
||||
<OverlayContent overlay={overlay} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Main TalkingHead composition
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface TalkingHeadProps {
|
||||
[key: string]: unknown;
|
||||
videoSrc: string;
|
||||
captions: WordCaption[];
|
||||
overlays?: TalkingHeadOverlay[];
|
||||
wordsPerPage?: number;
|
||||
fontSize?: number;
|
||||
highlightColor?: string;
|
||||
@@ -12,16 +307,39 @@ export interface TalkingHeadProps {
|
||||
export const TalkingHead: React.FC<TalkingHeadProps> = ({
|
||||
videoSrc,
|
||||
captions,
|
||||
overlays,
|
||||
wordsPerPage = 4,
|
||||
fontSize = 52,
|
||||
highlightColor = "#22D3EE",
|
||||
}) => {
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ backgroundColor: "#000" }}>
|
||||
{/* Layer 1: Video background */}
|
||||
<OffthreadVideo
|
||||
src={videoSrc}
|
||||
style={{ width: "100%", height: "100%", objectFit: "cover" }}
|
||||
/>
|
||||
|
||||
{/* Layer 2: Overlays (charts, stats, callouts, etc.) */}
|
||||
{overlays?.map((overlay, i) => {
|
||||
const from = Math.round(overlay.in_seconds * fps);
|
||||
const duration = Math.round(
|
||||
(overlay.out_seconds - overlay.in_seconds) * fps
|
||||
);
|
||||
return (
|
||||
<Sequence
|
||||
key={overlay.id || `overlay-${i}`}
|
||||
from={from}
|
||||
durationInFrames={duration}
|
||||
>
|
||||
<PositionedOverlay overlay={overlay} />
|
||||
</Sequence>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Layer 3: Captions (topmost — always visible above overlays) */}
|
||||
<CaptionOverlay
|
||||
words={captions}
|
||||
wordsPerPage={wordsPerPage}
|
||||
|
||||
Reference in New Issue
Block a user