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>
  );
};