Remotion Video Generator

{/* chuk-motion/src/chuk_motion/components/content/ImageContent/template.tsx.j2 */} import React from 'react'; import { Img, useCurrentFrame, staticFile } from 'remotion'; interface ImageContentProps { src: string; startFrame?: number; durationInFrames?: number; fit?: 'contain' | 'cover' | 'fill'; opacity?: number; borderRadius?: number; } export const ImageContent: React.FC<ImageContentProps> = ({ src, startFrame = 0, durationInFrames = 150, fit = 'cover', opacity = 1, borderRadius = 0, }) => { const frame = useCurrentFrame(); // Don't render if outside the time range // If durationInFrames is 0, render for the full parent duration (nested component) if (durationInFrames > 0 && (frame < startFrame || frame >= startFrame + durationInFrames)) { return null; } // Resolve static file path if it's a local asset const imageSrc = src.startsWith('http') ? src : staticFile(src); return ( <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden', backgroundColor: '[[ colors.background.dark ]]', }} > <Img src={imageSrc} style={{ width: '100%', height: '100%', objectFit: fit, opacity: opacity, borderRadius: borderRadius, }} /> </div> ); };