Remotion Video Generator

{/* chuk-motion/src/chuk_motion/components/layouts/FocusStrip/template.tsx.j2 */} import React from 'react'; import { AbsoluteFill, useCurrentFrame } from 'remotion'; interface FocusStripProps { main_content?: React.ReactNode; focus_content?: React.ReactNode; startFrame: number; durationInFrames: number; position?: string; strip_height?: number; padding?: number; gap?: number; border_width?: number; border_color?: string; border_radius?: number; } export const FocusStrip: React.FC<FocusStripProps> = ({ main_content, focus_content, startFrame, durationInFrames, position = 'center', strip_height = 30, padding = parseInt('[[ spacing.spacing.xl ]]'), gap = parseInt('[[ spacing.spacing.md ]]'), 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 getStripPosition = () => { switch (position) { case 'top': return { top: padding, left: padding, right: padding }; case 'bottom': return { bottom: padding, left: padding, right: padding }; case 'center': default: return { top: '50%', left: padding, right: padding, transform: 'translateY(-50%)' }; } }; return ( <AbsoluteFill style={{ pointerEvents: 'none' }}> {/* Background content (dimmed) */} {main_content && ( <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', overflow: 'hidden', opacity: 0.4, filter: 'blur([[ spacing.border_width.medium ]])', }}> {main_content} </div> )} {/* Focus strip */} {focus_content && ( <div style={{ position: 'absolute', ...getStripPosition(), height: `${strip_height}%`, width: `calc(100% - ${padding * 2}px)`, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', border: `${border_width}px solid ${border_color}`, borderRadius: border_radius, backgroundColor: '[[ colors.background.dark ]]', zIndex: 10, }}> {focus_content} </div> )} </AbsoluteFill> ); };