Remotion Video Generator

{/* chuk-motion/src/chuk_motion/components/layouts/AsymmetricLayout/template.tsx.j2 */} import React from 'react'; import { AbsoluteFill, useCurrentFrame } from 'remotion'; interface AsymmetricLayoutProps { main?: React.ReactNode; top_side?: React.ReactNode; bottom_side?: React.ReactNode; startFrame: number; durationInFrames: number; layout?: string; main_ratio?: number; padding?: number; gap?: number; border_width?: number; border_color?: string; border_radius?: number; } export const AsymmetricLayout: React.FC<AsymmetricLayoutProps> = ({ main, top_side, bottom_side, startFrame, durationInFrames, layout = 'main-left', main_ratio = 66.67, padding = parseInt('[[ spacing.spacing.xl ]]'), gap = parseInt('[[ spacing.spacing.md ]]'), border_width, border_color = '[[ colors.border.light ]]', border_radius = parseInt('[[ spacing.border_radius.md ]]') }) => { const frame = useCurrentFrame(); const relativeFrame = frame - startFrame; // Don't render if outside the time range if (frame < startFrame || frame >= startFrame + durationInFrames) { return null; } const side_ratio = 100 - main_ratio; // Main on left, side panels on right const renderMainLeft = () => ( <> {main && ( <div style={{ width: `${main_ratio}%`, height: '100%', display: 'flex', overflow: 'hidden', position: 'relative', ...(border_width && { border: `${border_width}px solid ${border_color}`, borderRadius: border_radius }), }}> {main} </div> )} <div style={{ width: `${side_ratio}%`, height: '100%', display: 'flex', flexDirection: 'column', gap: gap, }}> {top_side && ( <div style={{ width: '100%', height: '50%', display: 'flex', overflow: 'hidden', position: 'relative', ...(border_width && { border: `${border_width}px solid ${border_color}`, borderRadius: border_radius }), }}> {top_side} </div> )} {bottom_side && ( <div style={{ width: '100%', height: '50%', display: 'flex', overflow: 'hidden', position: 'relative', ...(border_width && { border: `${border_width}px solid ${border_color}`, borderRadius: border_radius }), }}> {bottom_side} </div> )} </div> </> ); // Side panels on left, main on right const renderMainRight = () => ( <> <div style={{ width: `${side_ratio}%`, height: '100%', display: 'flex', flexDirection: 'column', gap: gap, }}> {top_side && ( <div style={{ width: '100%', height: '50%', display: 'flex', overflow: 'hidden', position: 'relative', ...(border_width && { border: `${border_width}px solid ${border_color}`, borderRadius: border_radius }), }}> {top_side} </div> )} {bottom_side && ( <div style={{ width: '100%', height: '50%', display: 'flex', overflow: 'hidden', position: 'relative', ...(border_width && { border: `${border_width}px solid ${border_color}`, borderRadius: border_radius }), }}> {bottom_side} </div> )} </div> {main && ( <div style={{ width: `${main_ratio}%`, height: '100%', display: 'flex', overflow: 'hidden', position: 'relative', ...(border_width && { border: `${border_width}px solid ${border_color}`, borderRadius: border_radius }), }}> {main} </div> )} </> ); return ( <AbsoluteFill style={{ pointerEvents: 'none' }}> <div style={{ position: 'absolute', top: padding, left: padding, right: padding, bottom: padding, display: 'flex', flexDirection: 'row', gap: gap, width: `calc(100% - ${padding * 2}px)`, height: `calc(100% - ${padding * 2}px)`, }} > {layout === 'main-left' ? renderMainLeft() : renderMainRight()} </div> </AbsoluteFill> ); };