feat: add InfographicScene with Ken Burns zoom/pan on Gemini PNGs

[codercatdev]

Summary

Adds a new InfographicScene Remotion component that displays Gemini-generated infographic PNGs with Ken Burns zoom/pan animation synced to narration.

What Changed

New: remotion/components/InfographicScene.tsx (252 lines)

• Ken Burns zoom/pan effect across infographic images
• Divides scene duration into 3-4 focus regions with smooth transitions
• Uses Easing.inOut(Easing.quad) for smooth motion between regions
• Per-region zoom-in effect (1.0 → 1.08) for subtle dynamism
• Vignette overlay with pulsing opacity for depth
• Purple focus glow overlay (brand-consistent)
• Caption bar with spring entrance animation
• Falls back to gradient background when no infographic URL provided
• Supports both landscape and portrait orientations
• Uses Remotion's <Img> component (not native <img>)
• Zero CSS transitions/animations — all frame-based via interpolate()

Modified: remotion/types.ts (+7 lines)

• Added "infographic" to SCENE_TYPES array
• Added infographicUrl: z.string().url().optional() to sceneDataSchema
• Added InfographicSceneProps interface extending BaseSceneProps

Modified: remotion/components/SceneRouter.tsx (+12 lines)

• Imported InfographicScene
• Added "infographic" case in scene type switch
• Added fallback: when ANY scene has infographicUrl but no specific sceneType, prefers InfographicScene over default Scene

Modified: remotion/constants.ts (+9 lines)

• Added INFOGRAPHIC_COLORS constant with focusGlow, vignette, and captionBg

TypeScript

npx tsc --noEmit passes with zero errors.

Animation Approach

Scene duration ÷ N regions (default 4)
For each region:
  - Smooth pan to region center via interpolate() + Easing.inOut(Easing.quad)
  - Gentle zoom from region.zoom × 1.0 → region.zoom × 1.08
  - Vignette opacity pulses at region transitions
  - Spring-animated caption bar entrance

Scope

Only remotion/ directory files modified — no other areas 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 0:25am