feat: infographic-driven Remotion — multi-image cycling, no text overlays (Task B)

[codercatdev]

Task B: Infographic-Driven Remotion Compositions

Overnight Sprint 1 — Rewrite Remotion for infographic-first explainer videos per Alex's direction: images cycling every 3-5 seconds, NO text overlays on screen.

Changes (5 files, +205 -289)

remotion/types.ts (+13)

• Added infographicUrls: z.array(z.string().url()).optional() to sceneDataSchema
• Added imagePrompts: z.array(z.string()).optional() to sceneDataSchema
• Added InfographicCycleSceneProps interface

remotion/components/InfographicScene.tsx (FULL REWRITE)

• Multi-image cycling: Accepts infographicUrls: string[], cycles every ~4 seconds (configurable secondsPerImage)
• Crossfade transitions: 15-frame (0.5s) smooth crossfade between images via interpolate()
• Ken Burns zoom: Subtle 1.0→1.05 scale per image for motion
• NO text overlays: narration prop kept for data but never rendered
• Legacy compat: Also accepts single infographicUrl (wrapped in array)
• Uses Remotion <Img>, all animation via useCurrentFrame() + interpolate()

remotion/components/SceneRouter.tsx (+33 -15)

Updated routing priority:

1. code/list/comparison/mockup → specialized components (unchanged)
2. infographicUrls[] → InfographicScene (multi-image cycling) ← NEW
3. infographicUrl single → InfographicScene (wrapped) ← existing, moved down
4. Fallback → Scene (Pexels b-roll, no text)

remotion/components/Scene.tsx (+10 -75)

• Removed: narration text overlay (Layer 3)
• Removed: visual description debug text (Layer 2)
• Kept: B-roll video background, gradient fallback, watermark

remotion/constants.ts (+4 -6)

• Updated INFOGRAPHIC_COLORS: removed focusGlow/captionBg, added crossfadeBg

NOT modified

• MainVideo.tsx / ShortVideo.tsx — no changes needed (use SceneRouter)
• HookScene.tsx / CTAScene.tsx — branded intro/outro, left as-is

Schema contract (from @content PR #638)

• script.scenes[].imagePrompts: string[] — per-scene prompts
• script.scenes[].infographicUrls: string[] — generated image URLs for cycling
• infographicsHorizontal / infographicsVertical — Sanity image assets at doc root

Scope

✅ Only remotion/ files — no other files touched.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
codingcat-dev	Ignored		Mar 13, 2026 5:26am