Remotion Video Generator

{/* chuk-motion/src/chuk_motion/components/layouts/Timeline/template.tsx.j2 */} import React from 'react'; import { AbsoluteFill, useCurrentFrame } from 'remotion'; interface TimelineProps { main_content?: React.ReactNode; milestones?: Array<{time: number; label: string; icon?: string}>; startFrame: number; durationInFrames: number; current_time?: number; total_duration?: number; position?: string; height?: number; } export const Timeline: React.FC<TimelineProps> = ({ main_content, milestones = [], startFrame, durationInFrames, current_time = 0, total_duration = 10, position = 'bottom', height = 100 }) => { const frame = useCurrentFrame(); if (frame < startFrame || frame >= startFrame + durationInFrames) { return null; } const progress = (current_time / total_duration) * 100; return ( <AbsoluteFill style={{ pointerEvents: 'none' }}> {/* Main content */} {main_content && ( <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', overflow: 'hidden', }}> {main_content} </div> )} {/* Timeline bar */} <div style={{ position: 'absolute', ...(position === 'top' ? { top: 0 } : { bottom: 0 }), left: 0, right: 0, height: height, backgroundColor: '[[ colors.background.dark ]]', borderTop: position === 'bottom' ? `${parseInt('[[ spacing.border_width.medium ]]')}px solid [[ colors.border.light ]]` : undefined, borderBottom: position === 'top' ? `${parseInt('[[ spacing.border_width.medium ]]')}px solid [[ colors.border.light ]]` : undefined, display: 'flex', alignItems: 'center', padding: `0 ${parseInt('[[ spacing.spacing.xl ]]')}px`, zIndex: 20, }}> {/* Progress bar */} <div style={{ position: 'relative', width: '100%', height: parseInt('[[ spacing.spacing.xs ]]'), backgroundColor: '[[ colors.border.light ]]', borderRadius: '[[ spacing.border_radius.sm ]]', overflow: 'hidden', }}> {/* Progress fill */} <div style={{ position: 'absolute', top: 0, left: 0, height: '100%', width: `${progress}%`, backgroundColor: '[[ colors.primary[0] ]]', borderRadius: '[[ spacing.border_radius.sm ]]', transition: 'width 0.3s ease', }} /> {/* Milestones */} {milestones.map((milestone, idx) => { const milestonePos = (milestone.time / total_duration) * 100; return ( <div key={idx} style={{ position: 'absolute', left: `${milestonePos}%`, top: '50%', transform: 'translate(-50%, -50%)', width: parseInt('[[ spacing.spacing.md ]]'), height: parseInt('[[ spacing.spacing.md ]]'), borderRadius: '50%', backgroundColor: milestonePos <= progress ? '[[ colors.accent[1] ]]' : '[[ colors.border.medium ]]', border: `${parseInt('[[ spacing.border_width.medium ]]')}px solid [[ colors.text.on_dark ]]`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution].xs ]]'), }} title={milestone.label} > {milestone.icon} </div> ); })} </div> </div> </AbsoluteFill> ); };