Remotion Video Generator

{/* chuk-motion/src/chuk_motion/components/layouts/OverTheShoulder/template.tsx.j2 */} import React from 'react'; import { AbsoluteFill, useCurrentFrame } from 'remotion'; interface OverTheShoulderProps { screen_content?: React.ReactNode; shoulder_overlay?: React.ReactNode; startFrame: number; durationInFrames: number; overlay_position?: string; overlay_size?: number; padding?: number; border_width?: number; border_color?: string; border_radius?: number; } export const OverTheShoulder: React.FC<OverTheShoulderProps> = ({ screen_content, shoulder_overlay, startFrame, durationInFrames, overlay_position = 'bottom-left', overlay_size = 30, padding = parseInt('[[ spacing.spacing.xl ]]'), border_width = parseInt('[[ spacing.border_width.medium ]]'), border_color = '[[ colors.border.medium ]]', border_radius = parseInt('[[ spacing.border_radius.md ]]') }) => { const frame = useCurrentFrame(); if (frame < startFrame || frame >= startFrame + durationInFrames) { return null; } const getOverlayStyle = () => { const baseStyle = { position: 'absolute' as const, width: `${overlay_size}%`, aspectRatio: '9/16', display: 'flex', overflow: 'hidden', border: `${border_width}px solid ${border_color}`, borderRadius: border_radius, zIndex: 10, }; switch (overlay_position) { case 'bottom-left': return { ...baseStyle, bottom: padding, left: padding }; case 'bottom-right': return { ...baseStyle, bottom: padding, right: padding }; case 'top-left': return { ...baseStyle, top: padding, left: padding }; case 'top-right': return { ...baseStyle, top: padding, right: padding }; default: return { ...baseStyle, bottom: padding, left: padding }; } }; return ( <AbsoluteFill style={{ pointerEvents: 'none' }}> {/* Screen content */} {screen_content && ( <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', overflow: 'hidden', }}> {screen_content} </div> )} {/* Shoulder overlay */} {shoulder_overlay && ( <div style={getOverlayStyle()}> {shoulder_overlay} </div> )} </AbsoluteFill> ); };