Remotion Video Generator

{/* chuk-motion/src/chuk_motion/components/layouts/ThreeByThreeGrid/template.tsx.j2 */} import React from 'react'; import { AbsoluteFill, useCurrentFrame } from 'remotion'; interface ThreeByThreeGridProps { children: React.ReactNode[]; startFrame: number; durationInFrames: number; padding?: number; gap?: number; border_width?: number; border_color?: string; border_radius?: number; cell_background?: string; align_items?: string; justify_items?: string; } export const ThreeByThreeGrid: React.FC<ThreeByThreeGridProps> = ({ children, startFrame, durationInFrames, padding = parseInt('[[ spacing.spacing.xl ]]'), gap = parseInt('[[ spacing.spacing.md ]]'), border_width, border_color = '[[ colors.border.light ]]', border_radius = parseInt('[[ spacing.border_radius.md ]]'), cell_background, align_items = 'center', justify_items = 'center' }) => { const frame = useCurrentFrame(); const relativeFrame = frame - startFrame; // Don't render if outside the time range if (frame < startFrame || frame >= startFrame + durationInFrames) { return null; } // Limit to 9 children const gridChildren = Array.isArray(children) ? children.slice(0, 9) : []; return ( <AbsoluteFill style={{ pointerEvents: 'none' }}> <div style={{ position: 'absolute', top: padding, left: padding, right: padding, bottom: padding, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gridTemplateRows: '1fr 1fr 1fr', gap: gap, width: `calc(100% - ${padding * 2}px)`, height: `calc(100% - ${padding * 2}px)`, alignItems: align_items, justifyItems: justify_items, }} > {gridChildren.map((child, idx) => { // Clone child element with updated props to inherit parent's duration const childWithDuration = React.isValidElement(child) ? React.cloneElement(child as React.ReactElement<any>, { startFrame: child.props.startFrame !== undefined ? child.props.startFrame : startFrame, durationInFrames: child.props.durationInFrames !== undefined && child.props.durationInFrames > 0 ? child.props.durationInFrames : durationInFrames, }) : child; return ( <div key={idx} style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', position: 'relative', ...(border_width && { border: `${border_width}px solid ${border_color}`, borderRadius: border_radius }), ...(cell_background && { background: cell_background }), }}> {childWithDuration} </div> ); })} </div> </AbsoluteFill> ); };