feat: InfographicScene — 6th Remotion scene type

codercatdev · web-flow · commit 9ebb258e2529 · 2026-03-12T21:06:06.000-04:00
InfographicScene component (252 lines) with Ken Burns zoom/pan on Gemini-generated infographic PNGs. SceneRouter auto-routes scenes with infographicUrl. 6th scene type active.\n\nBuild verified: tsc clean, webpack 69s, Node 22.
diff --git a/remotion/components/InfographicScene.tsx b/remotion/components/InfographicScene.tsx
@@ -0,0 +1,252 @@
+import React from "react";
+import {
+  AbsoluteFill,
+  Easing,
+  Img,
+  interpolate,
+  spring,
+  useCurrentFrame,
+  useVideoConfig,
+} from "remotion";
+import type { InfographicSceneProps } from "../types";
+import {
+  ANIMATION,
+  COLORS,
+  FONT_SIZES,
+  INFOGRAPHIC_COLORS,
+} from "../constants";
+
+// Default focus regions: center, top-left, bottom-right, top-right
+const DEFAULT_FOCUS_REGIONS: Array<{ x: number; y: number; zoom: number }> = [
+  { x: 0.5, y: 0.5, zoom: 1.0 },
+  { x: 0.3, y: 0.35, zoom: 1.25 },
+  { x: 0.7, y: 0.65, zoom: 1.2 },
+  { x: 0.6, y: 0.3, zoom: 1.15 },
+];
+
+/**
+ * InfographicScene — displays a Gemini-generated infographic PNG with
+ * Ken Burns zoom/pan animation. The scene divides its duration into
+ * focus regions and smoothly transitions between them.
+ */
+export const InfographicScene: React.FC<InfographicSceneProps> = ({
+  narration,
+  infographicUrl,
+  focusRegions,
+  sceneIndex,
+  durationInFrames,
+  isVertical = false,
+  wordTimestamps,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps, width, height } = useVideoConfig();
+  const fonts = isVertical ? FONT_SIZES.portrait : FONT_SIZES.landscape;
+
+  const regions = focusRegions && focusRegions.length > 0
+    ? focusRegions
+    : DEFAULT_FOCUS_REGIONS;
+
+  const regionCount = regions.length;
+  const framesPerRegion = durationInFrames / regionCount;
+
+  // --- Determine current region and interpolation progress ---
+  const currentRegionIndex = Math.min(
+    Math.floor(frame / framesPerRegion),
+    regionCount - 1,
+  );
+  const nextRegionIndex = Math.min(currentRegionIndex + 1, regionCount - 1);
+  const regionLocalFrame = frame - currentRegionIndex * framesPerRegion;
+
+  // Smooth progress within current region (0 → 1)
+  const regionProgress = interpolate(
+    regionLocalFrame,
+    [0, framesPerRegion],
+    [0, 1],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+  );
+
+  // Eased progress for smooth motion
+  const easedProgress = Easing.inOut(Easing.quad)(regionProgress);
+
+  // --- Compute pan position (interpolate between current and next region) ---
+  const currentRegion = regions[currentRegionIndex];
+  const nextRegion = regions[nextRegionIndex];
+
+  // Pan X: convert normalized (0-1) to pixel offset
+  // At zoom 1.0, offset is 0. At higher zoom, we pan to center the focus region.
+  const panX =
+    currentRegion.x + (nextRegion.x - currentRegion.x) * easedProgress;
+  const panY =
+    currentRegion.y + (nextRegion.y - currentRegion.y) * easedProgress;
+
+  // --- Compute zoom level ---
+  const currentZoom = currentRegion.zoom;
+  const nextZoom = nextRegion.zoom;
+  const zoom = currentZoom + (nextZoom - currentZoom) * easedProgress;
+
+  // Add a subtle per-region zoom-in effect (1.0 → 1.1 within each region)
+  const intraRegionZoom = interpolate(
+    regionLocalFrame,
+    [0, framesPerRegion],
+    [1.0, 1.08],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+  );
+
+  const totalZoom = zoom * intraRegionZoom;
+
+  // Convert normalized pan to translate offsets
+  // When panX=0.5, panY=0.5 → centered (no translate)
+  // The translate moves the image so the focus point is centered
+  const translateX = -(panX - 0.5) * width * (totalZoom - 1) * 0.8;
+  const translateY = -(panY - 0.5) * height * (totalZoom - 1) * 0.8;
+
+  // --- Scene entrance animation ---
+  const sceneOpacity = interpolate(
+    frame,
+    [0, 15],
+    [0, 1],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+  );
+
+  // --- Text animation: fade in → stay → fade out ---
+  const textOpacity = interpolate(
+    frame,
+    [
+      0,
+      ANIMATION.fadeIn,
+      durationInFrames - ANIMATION.fadeOut,
+      durationInFrames,
+    ],
+    [0, 1, 1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+  );
+
+  // Subtle slide-up for text
+  const textTranslateY = interpolate(
+    frame,
+    [0, ANIMATION.fadeIn],
+    [30, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+  );
+
+  // Spring entrance for the caption bar
+  const captionSpring = spring({
+    frame: frame - 5,
+    fps,
+    config: {
+      damping: ANIMATION.springDamping,
+      mass: ANIMATION.springMass,
+      stiffness: ANIMATION.springStiffness,
+    },
+  });
+
+  // --- Vignette pulse: subtle glow that follows focus region transitions ---
+  const vignetteOpacity = interpolate(
+    regionLocalFrame,
+    [0, framesPerRegion * 0.3, framesPerRegion * 0.7, framesPerRegion],
+    [0.6, 0.3, 0.3, 0.6],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+  );
+
+  // Alternating gradient for fallback
+  const gradientAngle = (sceneIndex % 4) * 90;
+
+  return (
+    <AbsoluteFill style={{ opacity: sceneOpacity }}>
+      {/* Layer 1: Infographic image with Ken Burns effect */}
+      {infographicUrl ? (
+        <AbsoluteFill style={{ overflow: "hidden" }}>
+          <Img
+            src={infographicUrl}
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              transform: `scale(${totalZoom}) translate(${translateX / totalZoom}px, ${translateY / totalZoom}px)`,
+              transformOrigin: "center center",
+            }}
+          />
+        </AbsoluteFill>
+      ) : (
+        /* Fallback: gradient background */
+        <AbsoluteFill
+          style={{
+            background: `linear-gradient(${gradientAngle}deg, ${COLORS.gradientStart}, ${COLORS.backgroundDark}, ${COLORS.backgroundMedium})`,
+          }}
+        />
+      )}
+
+      {/* Layer 2: Vignette overlay for depth */}
+      <AbsoluteFill
+        style={{
+          background: `radial-gradient(ellipse at center, transparent 40%, ${INFOGRAPHIC_COLORS.vignette} 100%)`,
+          opacity: vignetteOpacity,
+        }}
+      />
+
+      {/* Layer 3: Focus glow overlay — subtle purple tint */}
+      <AbsoluteFill
+        style={{
+          backgroundColor: INFOGRAPHIC_COLORS.focusGlow,
+          opacity: interpolate(
+            frame,
+            [0, durationInFrames * 0.1, durationInFrames * 0.9, durationInFrames],
+            [0, 1, 1, 0],
+            { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+          ),
+        }}
+      />
+
+      {/* Layer 4: Narration caption bar */}
+      <AbsoluteFill
+        style={{
+          justifyContent: "flex-end",
+          alignItems: "center",
+          padding: isVertical ? "60px 24px" : "40px 80px",
+        }}
+      >
+        <div
+          style={{
+            opacity: textOpacity * captionSpring,
+            transform: `translateY(${textTranslateY * (1 - captionSpring)}px)`,
+            backgroundColor: INFOGRAPHIC_COLORS.captionBg,
+            borderRadius: 12,
+            padding: isVertical ? "24px 20px" : "24px 40px",
+            maxWidth: isVertical ? "95%" : "85%",
+            borderLeft: `4px solid ${COLORS.primary}`,
+            marginBottom: isVertical ? 80 : 40,
+          }}
+        >
+          <div
+            style={{
+              fontSize: fonts.narration,
+              color: COLORS.textWhite,
+              fontFamily: "sans-serif",
+              fontWeight: 500,
+              lineHeight: 1.5,
+              textAlign: isVertical ? "center" : "left",
+            }}
+          >
+            {narration}
+          </div>
+        </div>
+      </AbsoluteFill>
+
+      {/* Layer 5: CodingCat.dev watermark */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: isVertical ? 30 : 20,
+          right: isVertical ? 30 : 30,
+          fontSize: fonts.watermark,
+          color: "rgba(255, 255, 255, 0.35)",
+          fontFamily: "monospace",
+          fontWeight: 600,
+          letterSpacing: 1,
+        }}
+      >
+        codingcat.dev
+      </div>
+    </AbsoluteFill>
+  );
+};
diff --git a/remotion/components/SceneRouter.tsx b/remotion/components/SceneRouter.tsx
@@ -6,6 +6,7 @@ import { CodeMorphScene } from "./CodeMorphScene";
 import { DynamicListScene } from "./DynamicListScene";
 import { ComparisonGridScene } from "./ComparisonGridScene";
 import { IsometricMockupScene } from "./IsometricMockupScene";
+import { InfographicScene } from "./InfographicScene";
 
 interface SceneRouterProps {
   scene: SceneData;
@@ -57,11 +58,23 @@ export const SceneRouter: React.FC<SceneRouterProps> = ({
       }
       break;
 
+    case "infographic":
+      if (scene.infographicUrl) {
+        return <InfographicScene {...baseProps} infographicUrl={scene.infographicUrl} />;
+      }
+      break;
+
     case "narration":
     default:
       break;
   }
 
+  // If scene has an infographic URL but no specific sceneType, prefer InfographicScene
+  // This makes infographics the primary visual when available
+  if (scene.infographicUrl) {
+    return <InfographicScene {...baseProps} infographicUrl={scene.infographicUrl} />;
+  }
+
   // Fallback: use the existing Scene component
   return (
     <Scene
diff --git a/remotion/constants.ts b/remotion/constants.ts
@@ -159,3 +159,13 @@ export const COMPARISON_COLORS = {
   /** Right column accent */
   rightAccent: "#F59E0B",
 } as const;
+
+// --- Infographic Scene Constants ---
+export const INFOGRAPHIC_COLORS = {
+  /** Glow overlay for active focus region */
+  focusGlow: "rgba(109, 40, 217, 0.15)",
+  /** Vignette edge color */
+  vignette: "rgba(0, 0, 0, 0.4)",
+  /** Caption bar background */
+  captionBg: "rgba(0, 0, 0, 0.7)",
+} as const;
diff --git a/remotion/types.ts b/remotion/types.ts
@@ -3,7 +3,7 @@ import { z } from "zod";
 // --- Zod Schemas (used for Remotion input props validation) ---
 
 // Scene type discriminator — Gemini picks this per scene
-export const SCENE_TYPES = ["narration", "code", "list", "comparison", "mockup"] as const;
+export const SCENE_TYPES = ["narration", "code", "list", "comparison", "mockup", "infographic"] as const;
 export type SceneType = typeof SCENE_TYPES[number];
 
 // Word-level timestamp from ElevenLabs
@@ -63,6 +63,8 @@ export const sceneDataSchema = z.object({
   audioUrl: z.string().url().optional(),
   // Per-scene audio duration in ms
   audioDurationMs: z.number().optional(),
+  // Infographic image URL (Gemini Imagen 4 / Sanity CDN)
+  infographicUrl: z.string().url().optional(),
 });
 
 export const sponsorDataSchema = z.object({
@@ -167,3 +169,9 @@ export interface IsometricMockupSceneProps extends BaseSceneProps {
   deviceType: "browser" | "phone" | "terminal";
   screenContent: string;
 }
+
+// InfographicScene props
+export interface InfographicSceneProps extends BaseSceneProps {
+  infographicUrl: string;
+  focusRegions?: Array<{ x: number; y: number; zoom: number }>; // 0-1 normalized coordinates
+}
