Remotion Video Generator

{/* chuk-motion/src/chuk_motion/components/layouts/SplitScreen/template.tsx.j2 */} import React from 'react'; import { AbsoluteFill, useCurrentFrame } from 'remotion'; interface SplitScreenProps { left?: React.ReactNode; right?: React.ReactNode; top?: React.ReactNode; bottom?: React.ReactNode; startFrame: number; durationInFrames: number; dividerWidth?: number; dividerColor?: string; gap?: number; orientation?: 'horizontal' | 'vertical'; } export const SplitScreen: React.FC<SplitScreenProps> = ({ left, right, top, bottom, startFrame, durationInFrames, dividerWidth = [[ config.divider_width or ("parseInt('" ~ spacing['border_width']['medium'] ~ "')") ]], dividerColor = '[[ config.divider_color or colors.accent[0] ]]', gap = [[ config.gap or ("parseInt('" ~ spacing['spacing']['lg'] ~ "')") ]], orientation = '[[ config.orientation or "horizontal" ]]', }) => { const frame = useCurrentFrame(); // 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; } const isHorizontal = orientation === 'horizontal'; return ( <AbsoluteFill style={{ display: 'flex', flexDirection: isHorizontal ? 'row' : 'column', gap, padding: [[ config.padding or ("parseInt('" ~ spacing['spacing']['2xl'] ~ "')") ]], backgroundColor: '[[ config.background_color or colors.background.dark ]]', }} > <div style={{ flex: 1 }}> {isHorizontal ? left : top} </div> <div style={{ width: isHorizontal ? dividerWidth : '100%', height: isHorizontal ? '100%' : dividerWidth, background: dividerColor, }} /> <div style={{ flex: 1 }}> {isHorizontal ? right : bottom} </div> </AbsoluteFill> ); };