Video Editing

Layer 4: Remotion for Motion Graphics

Use Remotion (React-based) for overlays, titles, and animated elements:

• Lower thirds with candidate/employer info
• Animated job posting cards
• careers.ky branding overlays
• Transition animations
• Data visualization animations

Remotion fits our React/Next.js stack. Key patterns:

import { useCurrentFrame, useVideoConfig, interpolate } from 'remotion';

const TitleCard = ({ title, subtitle }) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1]);
  return (
    <div style={{ opacity }}>
      <h1>{title}</h1>
      <p>{subtitle}</p>
    </div>
  );
};

Layer 5: AI Enhancement (TODO)

These require API keys — placeholder for future integration:

• fal.ai: AI video generation, image-to-video, style transfer
• ElevenLabs: AI voiceover generation
• Note: Set up API keys in .env.local when ready to use

Layer 6: Human Final Polish

• Review the assembled edit
• Fine-tune timing and transitions
• Color correction notes
• Export in required formats (web: H.264/MP4, social: platform-specific)

Workflow

1. Start with Layer 1-2 to plan the edit
2. Use Layer 3 (FFmpeg) for all cuts, trims, and concatenation
3. Use Layer 4 (Remotion) for any animated overlays or graphics
4. Skip Layer 5 unless API keys are configured
5. Present Layer 6 deliverable for human review