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;
background?: string;
cell_background?: string;
}
export const ThreeByThreeGrid: React.FC<ThreeByThreeGridProps> = ({
children,
startFrame,
durationInFrames,
padding = 40,
gap = 20,
border_width,
border_color = 'rgba(255, 255, 255, 0.2)',
border_radius = 8,
background,
cell_background
}) => {
const frame = useCurrentFrame();
// Don't render if outside the time range
if (frame < startFrame || frame >= startFrame + durationInFrames) {
return null;
}
// Ensure we have exactly 9 children (or less)
const gridChildren = Array.isArray(children) ? children.slice(0, 9) : [children];
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)`,
}}
>
{gridChildren.map((child, idx) => (
<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
}),
...(background && { background }),
...(cell_background && { background: cell_background }),
}}
>
{child}
</div>
))}
</div>
</AbsoluteFill>
);
};
