Remotion Video Generator

{/* chuk-motion/src/chuk_motion/components/animations/PanelCascade/template.tsx.j2 */} import React from 'react'; import { AbsoluteFill, useCurrentFrame, interpolate, Easing, spring, useVideoConfig } from 'remotion'; interface PanelCascadeProps { children: React.ReactNode[]; cascadeType?: string; staggerDelay?: number; startFrame: number; durationInFrames: number; } export const PanelCascade: React.FC<PanelCascadeProps> = ({ children, cascadeType = 'from_edges', staggerDelay = 0.08, startFrame, durationInFrames, }) => { const frame = useCurrentFrame(); const { fps, width, height } = useVideoConfig(); const relativeFrame = frame - startFrame; // Don't render if outside the time range if (frame < startFrame || frame >= startFrame + durationInFrames) { return null; } // Motion tokens - token-first approach const DURATION_FAST = [[ motion.duration.fast.frames_30fps ]]; const DURATION_MEDIUM = [[ motion.duration.medium.frames_30fps ]]; // Easing from tokens const easeOutExpo = [[ motion.easing.ease_out_expo.curve ]]; const easeOutBack = [[ motion.easing.ease_out_back.curve ]]; // Spring config from tokens const bouncySpring = { damping: [[ motion.spring_configs.bouncy.config.damping ]], mass: [[ motion.spring_configs.bouncy.config.mass ]], stiffness: [[ motion.spring_configs.bouncy.config.stiffness ]], }; // Convert stagger delay to frames const staggerFrames = Math.round(staggerDelay * 30); // Helper function to create custom easing const createEasing = (curve: number[]): Easing.EasingFunction => { return Easing.bezier(curve[0], curve[1], curve[2], curve[3]); }; // Calculate grid dimensions (assuming square-ish grid) const panelCount = React.Children.count(children); const cols = Math.ceil(Math.sqrt(panelCount)); const rows = Math.ceil(panelCount / cols); // Helper to get panel position in grid const getPanelPosition = (index: number) => { const row = Math.floor(index / cols); const col = index % cols; return { row, col }; }; // Helper to calculate distance from center const getDistanceFromCenter = (index: number) => { const { row, col } = getPanelPosition(index); const centerRow = (rows - 1) / 2; const centerCol = (cols - 1) / 2; return Math.sqrt(Math.pow(row - centerRow, 2) + Math.pow(col - centerCol, 2)); }; // Helper to get edge distance (for from_edges cascade) const getEdgeDistance = (index: number) => { const { row, col } = getPanelPosition(index); const distFromLeft = col; const distFromRight = cols - 1 - col; const distFromTop = row; const distFromBottom = rows - 1 - row; return Math.min(distFromLeft, distFromRight, distFromTop, distFromBottom); }; // ============================================================================ // RENDER PANELS WITH CASCADE ANIMATIONS // ============================================================================ return ( <AbsoluteFill style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gridTemplateRows: `repeat(${rows}, 1fr)`, gap: parseInt('[[ spacing.spacing.md ]]'), padding: parseInt('[[ spacing.spacing.xl ]]'), pointerEvents: 'none' }}> {React.Children.map(children, (child, index) => { let panelDelay = 0; let animationProps: any = {}; // ============================================================================ // FROM_EDGES CASCADE // ============================================================================ if (cascadeType === 'from_edges') { const edgeDist = getEdgeDistance(index); panelDelay = edgeDist * staggerFrames; const opacity = interpolate( relativeFrame, [panelDelay, panelDelay + DURATION_MEDIUM], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: createEasing(easeOutExpo), } ); // Determine direction based on closest edge const { row, col } = getPanelPosition(index); const distFromLeft = col; const distFromRight = cols - 1 - col; const distFromTop = row; const distFromBottom = rows - 1 - row; const minDist = Math.min(distFromLeft, distFromRight, distFromTop, distFromBottom); let translateX = 0; let translateY = 0; if (minDist === distFromLeft) translateX = -50; else if (minDist === distFromRight) translateX = 50; else if (minDist === distFromTop) translateY = -50; else translateY = 50; const currentTranslateX = interpolate( relativeFrame, [panelDelay, panelDelay + DURATION_MEDIUM], [translateX, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: createEasing(easeOutExpo), } ); const currentTranslateY = interpolate( relativeFrame, [panelDelay, panelDelay + DURATION_MEDIUM], [translateY, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: createEasing(easeOutExpo), } ); animationProps = { opacity, transform: `translate(${currentTranslateX}px, ${currentTranslateY}px)`, }; } // ============================================================================ // FROM_CENTER CASCADE // ============================================================================ else if (cascadeType === 'from_center') { const centerDist = getDistanceFromCenter(index); panelDelay = centerDist * staggerFrames; const opacity = interpolate( relativeFrame, [panelDelay, panelDelay + DURATION_MEDIUM], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: createEasing(easeOutExpo), } ); const scale = interpolate( relativeFrame, [panelDelay, panelDelay + DURATION_MEDIUM], [0.5, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: createEasing(easeOutExpo), } ); animationProps = { opacity, transform: `scale(${scale})`, }; } // ============================================================================ // BOUNCE_IN CASCADE // ============================================================================ else if (cascadeType === 'bounce_in') { panelDelay = index * staggerFrames; const progress = spring({ frame: Math.max(0, relativeFrame - panelDelay), fps, config: bouncySpring, }); const opacity = interpolate(progress, [0, 1], [0, 1]); const scale = interpolate(progress, [0, 1], [0.3, 1]); animationProps = { opacity, transform: `scale(${scale})`, }; } // ============================================================================ // SEQUENTIAL_LEFT CASCADE // ============================================================================ else if (cascadeType === 'sequential_left') { panelDelay = index * staggerFrames; const opacity = interpolate( relativeFrame, [panelDelay, panelDelay + DURATION_FAST], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: createEasing(easeOutExpo), } ); const translateX = interpolate( relativeFrame, [panelDelay, panelDelay + DURATION_FAST], [-30, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: createEasing(easeOutExpo), } ); animationProps = { opacity, transform: `translateX(${translateX}px)`, }; } // ============================================================================ // SEQUENTIAL_RIGHT CASCADE // ============================================================================ else if (cascadeType === 'sequential_right') { panelDelay = (panelCount - 1 - index) * staggerFrames; const opacity = interpolate( relativeFrame, [panelDelay, panelDelay + DURATION_FAST], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: createEasing(easeOutExpo), } ); const translateX = interpolate( relativeFrame, [panelDelay, panelDelay + DURATION_FAST], [30, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: createEasing(easeOutExpo), } ); animationProps = { opacity, transform: `translateX(${translateX}px)`, }; } // ============================================================================ // SEQUENTIAL_TOP CASCADE // ============================================================================ else if (cascadeType === 'sequential_top') { panelDelay = index * staggerFrames; const opacity = interpolate( relativeFrame, [panelDelay, panelDelay + DURATION_FAST], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: createEasing(easeOutExpo), } ); const translateY = interpolate( relativeFrame, [panelDelay, panelDelay + DURATION_FAST], [-30, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: createEasing(easeOutExpo), } ); animationProps = { opacity, transform: `translateY(${translateY}px)`, }; } // ============================================================================ // WAVE CASCADE // ============================================================================ else if (cascadeType === 'wave') { const { row, col } = getPanelPosition(index); const wavePosition = row + col; panelDelay = wavePosition * staggerFrames; const opacity = interpolate( relativeFrame, [panelDelay, panelDelay + DURATION_MEDIUM], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: createEasing(easeOutExpo), } ); const translateY = interpolate( relativeFrame, [panelDelay, panelDelay + DURATION_MEDIUM], [40, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: createEasing(easeOutExpo), } ); const scale = interpolate( relativeFrame, [panelDelay, panelDelay + DURATION_MEDIUM], [0.9, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: createEasing(easeOutExpo), } ); animationProps = { opacity, transform: `translateY(${translateY}px) scale(${scale})`, }; } // Default fallback else { panelDelay = index * staggerFrames; const opacity = interpolate( relativeFrame, [panelDelay, panelDelay + DURATION_MEDIUM], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', } ); animationProps = { opacity }; } return ( <div key={index} style={animationProps}> {child} </div> ); })} </AbsoluteFill> ); };