Remotion Video Generator

{/* chuk-motion/src/chuk_motion/components/layouts/Grid/template.tsx.j2 */} import React from 'react'; import { AbsoluteFill, useCurrentFrame } from 'remotion'; interface GridProps { children: React.ReactNode[]; startFrame: number; durationInFrames: number; layout?: string; padding?: number; gap?: number; border_width?: number; border_color?: string; border_radius?: number; cell_background?: string; align_items?: string; justify_items?: string; } export const Grid: React.FC<GridProps> = ({ children, startFrame, durationInFrames, layout = '3x3', 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, justify_items }) => { const frame = useCurrentFrame(); const relativeFrame = frame - startFrame; // Don't render if outside the time range // If durationInFrames is 0, this is a nested component and should always render if (durationInFrames > 0 && (frame < startFrame || frame >= startFrame + durationInFrames)) { return null; } // Grid layout configurations const layouts: Record<string, { gridTemplateColumns: string; gridTemplateRows: string }> = { '1x2': { gridTemplateColumns: '1fr', gridTemplateRows: '1fr 1fr' }, '2x1': { gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr' }, '2x2': { gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr' }, '3x2': { gridTemplateColumns: '1fr 1fr 1fr', gridTemplateRows: '1fr 1fr' }, '2x3': { gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr 1fr' }, '3x3': { gridTemplateColumns: '1fr 1fr 1fr', gridTemplateRows: '1fr 1fr 1fr' }, '4x2': { gridTemplateColumns: '1fr 1fr 1fr 1fr', gridTemplateRows: '1fr 1fr' }, '2x4': { gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr 1fr 1fr' } }; const layoutStyle = layouts[layout] || layouts['3x3']; return ( <AbsoluteFill style={{ pointerEvents: 'none' }}> <div style={{ position: 'absolute', top: padding, left: padding, right: padding, bottom: padding, display: 'grid', ...layoutStyle, gap: gap, width: `calc(100% - ${padding * 2}px)`, height: `calc(100% - ${padding * 2}px)`, ...(align_items && { alignItems: align_items }), ...(justify_items && { justifyItems: justify_items }), }} > {Array.isArray(children) ? children.map((child, idx) => ( <div key={idx} style={{ width: '100%', height: '100%', display: 'flex', overflow: 'hidden', position: 'relative', ...(border_width && { border: `${border_width}px solid ${border_color}`, borderRadius: border_radius }), ...(cell_background && { background: cell_background }), }}> {child} </div> )) : children} </div> </AbsoluteFill> ); };