Remotion Video Generator

{/* chuk-motion/src/chuk_motion/components/overlays/TextOverlay/template.tsx.j2 */} import React from 'react'; import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion'; interface TextOverlayProps { text: string; style: string; animation: string; position: string; startFrame: number; durationInFrames: number; } export const TextOverlay: React.FC<TextOverlayProps> = ({ text, style, animation, position, startFrame, durationInFrames }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const relativeFrame = frame - startFrame; // Don't render if outside the time range if (frame < startFrame || frame >= startFrame + durationInFrames) { return null; } // Animation logic let opacity = 1; let transform = 'none'; let filter = 'none'; let displayText = text; if (animation === 'blur_in') { const progress = spring({ frame: relativeFrame, fps, config: { damping: [[ motion.default_spring.config.damping ]], mass: [[ motion.default_spring.config.mass ]], stiffness: [[ motion.default_spring.config.stiffness ]] } }); opacity = interpolate(progress, [0, 1], [0, 1]); const blur = interpolate(progress, [0, 1], [20, 0]); filter = `blur(${blur}px)`; } else if (animation === 'slide_up') { const progress = spring({ frame: relativeFrame, fps, config: { damping: [[ motion.default_spring.config.damping ]], mass: [[ motion.default_spring.config.mass ]], stiffness: [[ motion.default_spring.config.stiffness ]] } }); opacity = interpolate(progress, [0, 1], [0, 1]); const translateY = interpolate(progress, [0, 1], [100, 0]); transform = `translateY(${translateY}px)`; } else if (animation === 'fade') { opacity = interpolate(relativeFrame, [0, 15], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); } else if (animation === 'typewriter') { const charsToShow = Math.floor(interpolate(relativeFrame, [0, 60], [0, text.length], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' })); displayText = text.slice(0, charsToShow); opacity = 1; } else if (animation === 'scale_in') { const progress = spring({ frame: relativeFrame, fps, config: { damping: [[ motion.default_spring.config.damping ]], mass: [[ motion.default_spring.config.mass ]], stiffness: [[ motion.default_spring.config.stiffness ]] } }); opacity = interpolate(progress, [0, 1], [0, 1]); const scale = interpolate(progress, [0, 1], [0.5, 1]); transform = `scale(${scale})`; } // Fade out at the end const fadeOut = interpolate( relativeFrame, [durationInFrames - 15, durationInFrames], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } ); const finalOpacity = opacity * fadeOut; // Style variants const styles: Record<string, any> = { emphasis: { fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution]['3xl'] ]]'), fontWeight: parseInt('[[ typography.font_weights.black ]]'), color: '[[ colors.text.on_dark ]]', textAlign: 'center', textShadow: `0 ${parseInt('[[ spacing.spacing.xxs ]]')}px ${parseInt('[[ spacing.spacing.lg ]]')}px [[ colors.primary[0] ]]80`, letterSpacing: '-0.02em', lineHeight: 1.1, maxWidth: 1200, background: `linear-gradient(135deg, [[ colors.primary[0] ]], [[ colors.accent[0] ]])`, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }, caption: { fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution].lg ]]'), fontWeight: parseInt('[[ typography.font_weights.semibold ]]'), color: '[[ colors.text.on_dark ]]', textAlign: 'center', background: '[[ colors.background.glass ]]', backdropFilter: 'blur(10px)', padding: `[[ spacing.spacing.lg ]] [[ spacing.spacing['2xl'] ]]`, borderRadius: parseInt('[[ spacing.border_radius.lg ]]'), maxWidth: 1400, lineHeight: parseFloat('[[ typography.line_heights.normal ]]') }, callout: { fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution]['2xl'] ]]'), fontWeight: parseInt('[[ typography.font_weights.extrabold ]]'), color: '[[ colors.text.on_dark ]]', textAlign: 'center', background: `linear-gradient(135deg, [[ colors.primary[0] ]], [[ colors.accent[0] ]])`, padding: `[[ spacing.spacing.xl ]] [[ spacing.spacing['3xl'] ]]`, borderRadius: parseInt('[[ spacing.spacing.md ]]'), boxShadow: `0 ${parseInt('[[ spacing.spacing.xs ]]')}px ${parseInt('[[ spacing.spacing['2xl'] ]]')}px [[ colors.primary[0] ]]60`, textTransform: 'uppercase', letterSpacing: '0.05em', maxWidth: 1200, lineHeight: 1.2 }, subtitle: { fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution].xl ]]'), fontWeight: parseInt('[[ typography.font_weights.semibold ]]'), color: '[[ colors.text.on_dark ]]', textAlign: 'center', background: '[[ colors.background.dark ]]', padding: `[[ spacing.spacing.lg ]] [[ spacing.spacing['2xl'] ]]`, borderRadius: parseInt('[[ spacing.border_radius.md ]]'), maxWidth: 1600, lineHeight: parseFloat('[[ typography.line_heights.normal ]]'), border: '2px solid [[ colors.border.light ]]' }, quote: { fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution].xl ]]'), fontWeight: parseInt('[[ typography.font_weights.semibold ]]'), color: '[[ colors.text.on_dark ]]', textAlign: 'center', fontStyle: 'italic', maxWidth: 1200, lineHeight: parseFloat('[[ typography.line_heights.snug ]]'), borderLeft: `${parseInt('[[ spacing.spacing.xs ]]')}px solid [[ colors.accent[0] ]]`, paddingLeft: parseInt('[[ spacing.spacing['2xl'] ]]'), position: 'relative' } }; const styleConfig = styles[style] || styles.emphasis; // Position configuration const positions: Record<string, any> = { center: { justifyContent: 'center', alignItems: 'center' }, top: { justifyContent: 'flex-start', alignItems: 'center', paddingTop: parseInt('[[ spacing.spacing['4xl'] ]]') }, bottom: { justifyContent: 'flex-end', alignItems: 'center', paddingBottom: parseInt('[[ spacing.spacing['4xl'] ]]') }, top_left: { justifyContent: 'flex-start', alignItems: 'flex-start', padding: parseInt('[[ spacing.spacing['4xl'] ]]') }, top_right: { justifyContent: 'flex-start', alignItems: 'flex-end', padding: parseInt('[[ spacing.spacing['4xl'] ]]') }, bottom_left: { justifyContent: 'flex-end', alignItems: 'flex-start', padding: parseInt('[[ spacing.spacing['4xl'] ]]') }, bottom_right: { justifyContent: 'flex-end', alignItems: 'flex-end', padding: parseInt('[[ spacing.spacing['4xl'] ]]') } }; const positionConfig = positions[position] || positions.center; return ( <AbsoluteFill style={{ display: 'flex', flexDirection: 'column', ...positionConfig, fontFamily: "'[[ "', '".join(typography.body_font.fonts) ]]'", pointerEvents: 'none', padding: parseInt('[[ spacing.spacing['3xl'] ]]') }} > <div style={{ ...styleConfig, opacity: finalOpacity, transform, filter }} > {displayText} </div> </AbsoluteFill> ); };